/* BibleClue — warm olive courtyard. Shared across discovery, accounts and play. */
html[data-design] {
 --paper:#1d2923; --ink:#f3edde; --muted:#bdbfae; --green:#dfbc76;
 --accent:#dfbc76; --accent-hover:#efd49a; --surface:#2b3930; --soft:#344338;
 --sage:#344338; --line:#52604b; --border:#52604b; --gold:#dfbc76;
 --serif:'Segoe UI',Arial,sans-serif; --sans:'Segoe UI',Arial,sans-serif;
 --gutter:clamp(24px,4vw,64px); color-scheme:dark;
}
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:#1d2923; background-image:radial-gradient(ellipse at 85% 0%,#55604455,transparent 48%),linear-gradient(145deg,#26352a,#18221e 80%); font-family:var(--sans); min-height:100vh; }
h1,h2,h3 { font-family:var(--sans); letter-spacing:-.035em; font-weight:650; }
p { color:var(--muted); }
a { color:inherit; }
button,input,select,textarea { font:inherit; }
:focus-visible { outline:3px solid #edce8b; outline-offset:4px; }
.site-header { position:relative; z-index:3; max-width:none; width:100%; min-height:96px; height:auto; margin:0; padding:20px var(--gutter); background:transparent; border:0; gap:28px; box-shadow:none; }
.site-header .brand-logo { width:200px; }
.site-header nav { margin-left:auto; gap:26px; }
.site-header nav a,.header-account .login-link { color:#e4e4d6; font-size:14px; white-space:nowrap; }
.site-header nav a.active { border-color:#dfbc76; }
.header-account { gap:22px; font-size:14px; }
.header-account .login-link { display:inline-flex; }
html[data-design] .button { color:#243025; background:#dfbc76; border:1px solid #dfbc76; border-radius:8px; font-size:14px; font-weight:700; box-shadow:0 6px 18px #00000012; min-height:46px; padding:12px 22px; gap:18px; }
html[data-design] .button:hover { background:#efd49a; color:#18241b; border-color:#efd49a; }
html[data-design] .button.secondary { background:#ffffff06; color:#efe7d5; border-color:#72806a; }
html[data-design] .button.secondary:hover { background:#ffffff10; }
html[data-design] .button.small { min-height:40px; padding:10px 16px; font-size:13px; }
button:disabled { cursor:default; opacity:.5; }
.text-button,.back-link { color:#e0c78f; }
.eyebrow { color:#d3bd8d; letter-spacing:.18em; font-size:11px; font-weight:650; }
/* Large right-hand artwork fades into the same background as the rest of the site. */
.discovery-hero { position:relative; isolation:isolate; overflow:hidden; margin-top:-96px; padding-top:96px; min-height:650px; background:transparent; }
.discovery-landscape { position:absolute; z-index:-2; right:-9%; top:-12%; width:82%; height:125%; max-width:none; object-fit:cover; object-position:72% 44%; filter:saturate(1.12) sepia(.03) brightness(1.08); transform:scale(1.06); transform-origin:right center; }
.discovery-hero:after { content:''; position:absolute; z-index:-1; inset:0; pointer-events:none; background:linear-gradient(90deg,#223027 0%,#223027 24%,#223027ed 36%,#22302745 58%,transparent 85%),linear-gradient(0deg,#1d2923,transparent 27%,transparent 72%,#22302766); }
.discovery-hero-inner { max-width:none; padding:80px var(--gutter) 88px; margin:0; }
.discovery-copy { position:relative; max-width:570px; }
.discovery-copy .eyebrow { display:block; color:#d6be89; font-size:11px; letter-spacing:.23em; margin:0 0 24px; }
.discovery-copy h1 { margin:0 0 25px; font-size:clamp(54px,5vw,82px); font-weight:650; line-height:1.02; letter-spacing:-.05em; color:#f6efdf; }
.discovery-copy h1 span { color:#ddbd7d; }
.discovery-copy p { max-width:445px; font-size:18px; line-height:1.75; color:#d0d0bb; margin:0 0 30px; }
.discovery-details { display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 0; font-size:15px; font-weight:500; color:#eee6d2; margin-top:30px; }
.discovery-details>span { white-space:nowrap; }
.discovery-details strong { color:#e6c17a; font-size:23px; font-weight:750; font-variant-numeric:tabular-nums; letter-spacing:-.025em; }
.discovery-details span+span:before { content:'·'; margin:0 12px; color:#d6be89; }
/* The invitation is a quiet continuation of the page, not a full-width banner. */
.registration-banner { margin:0 var(--gutter) 8px; background:#35403366; border:1px solid #65715466; border-radius:12px; }
.registration-inner { display:flex; align-items:center; gap:22px; max-width:none; padding:24px 28px; margin:0; }
.registration-icon { color:#dfbc76; padding-right:20px; border-right:1px solid #687557; }
.registration-inner h2 { font-size:20px; margin:0 0 6px; color:#f1e9d8; }
.registration-inner p { font-size:14px; margin:0; color:#bfc4b0; }
.registration-inner .button { margin-left:auto; flex-shrink:0; }
/* Fixed card width like ClassicClue: more columns on wide screens, never oversized. */
.games-section { max-width:none; margin:0; padding:48px var(--gutter) 32px; scroll-margin-top:24px; }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:20px; }
.section-heading .eyebrow { display:block; margin-bottom:10px; }
.section-heading h2 { font-size:32px; margin:0; color:#f1e9d8; }
.section-heading .subtle { color:#aab7a2; font-size:13px; }
.difficulty-bar { padding:0; border:0; margin:26px 0 28px; gap:16px; font-size:13px; }
.level-options { gap:6px; }
.level { border:1px solid #5a684f; color:#d6ddcc; border-radius:7px; padding:9px 18px; background:#ffffff04; font-size:13px; }
.level.selected { background:#d9bd83; color:#253023; border-color:#d9bd83; }
.level-dots { display:none; }
.level-help { font-size:12px; color:#aab7a2; margin-left:auto; }
.game-grid { display:grid; grid-template-columns:repeat(auto-fill,300px); justify-content:start; gap:24px; }
html[data-design] .game-card { display:flex; flex-direction:column; border:1px solid #61705177; border-radius:12px; background:linear-gradient(145deg,#344332,#29372e); box-shadow:0 12px 24px #00000018; overflow:hidden; transition:transform .2s,border-color .2s; }
html[data-design] .game-card:hover { transform:translateY(-4px); border-color:#bfa575; box-shadow:0 18px 32px #00000028; }
.card-art { height:162px; flex-shrink:0; overflow:hidden; border:0; }
.card-art .illustration { transition:transform .4s; }
.game-card:hover .card-art .illustration { transform:scale(1.04); }
.card-count { background:#1d2923e8; color:#f1e3bf; border:1px solid #e1c89633; border-radius:5px; font-size:11px; padding:5px 9px; box-shadow:none; top:12px; right:12px; }
.card-copy { display:flex; flex:1; flex-direction:column; padding:21px 22px 18px; }
.card-icon { display:none; }
.card-copy h3 { color:#f4edda; font-size:20px; line-height:1.3; font-weight:650; padding:0; margin:0 0 12px; }
.card-copy p { font-size:14px; line-height:1.65; color:#bfc8b4; margin:0 0 20px; }
.card-bottom { margin-top:auto; padding-top:14px; border-top:1px solid #7f8c6544; color:#d9bf89; font-size:12px; }
.circle-arrow { background:transparent; color:#e7c784; width:28px; height:28px; border:1px solid #8f99714d; }
.learning-note { max-width:none; margin:24px var(--gutter) 64px; padding:34px; border:1px solid #697b5055; border-radius:12px; background:#35423166; gap:24px; }
.learning-note h2 { font-size:28px; color:#eee8d7; }
.learning-note p { color:#bfc8b4; font-size:15px; }
.large-star { color:#c1a36b; }
.site-footer { max-width:none; margin:0 var(--gutter); padding:30px 0; border-top:1px solid #66705277; gap:26px; color:#aeba9f; font-size:13px; }
.site-footer .brand-logo { width:172px; }
.site-footer a,.site-footer .text-button { color:#cbd0bb; }
/* A colonnaded olive courtyard surrounds the actual game, without stealing space. */
.site-main { position:relative; isolation:isolate; display:flow-root; }
.page-content { position:relative; z-index:1; display:flow-root; }
.site-main:not(:has(.discovery-hero)) { padding-top:124px; }
.courtyard-frame { display:block; position:absolute; z-index:0; inset:14px 0 0; width:100%; max-width:1520px; margin:0 auto; pointer-events:none; }
/* Clearance depends on the page width; decoration itself is shared. */
.courtyard-frame { --pillar-content-width:1100px; --pillar-reference-width:1100px; }
.site-main:has(.discovery-hero) .courtyard-frame { display:none; }

@media(min-width:1240px) { .site-main:not(:has(.discovery-hero))>.page-content { width:calc(100% - 248px); max-width:1100px; margin-inline:auto; } }
/* Narrow layouts omit the decorative lintel together with its reserved space. */
@media(width < 1240px) {
    .courtyard-frame { display:none; }
    .site-main:not(:has(.discovery-hero)) { padding-top:0; }
}
.courtyard-frame:before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 28%,#7480522e,transparent 65%); mask-image:linear-gradient(transparent,#000 96px); }



.play-page { position:relative; max-width:1000px; margin:40px auto 72px; padding:0 32px; }
.play-top { margin-bottom:30px; }
.play-heading h1 { color:#f2e9d4; font-size:38px; }
.play-heading .eyebrow { color:#c6b88b; font-size:12px; line-height:1.6; }
.save-state,.progress-label,.back-link { color:#bbc7ad; }
.save-state>span { background:#acbf8b; }
.score-chip { color:#efd49a; background:#354332; border:1px solid #71815a; border-radius:9px; font-size:22px; }
.score-chip>span { color:#c4cbb5; }
.progress-track { background:#46523d; height:5px; margin-bottom:25px; }
.progress-track>div { background:#d6b879; }
html[data-design] .question-panel { background:linear-gradient(135deg,#f6efdf,#eae0c9); border:1px solid #c5b48e; color:#283a2b; padding:36px; border-radius:16px; box-shadow:0 24px 70px #00000040; --ink:#283a2b; --muted:#5b6754; --green:#355c42; --line:#d0c7ad; --border:#c8bea5; --soft:#e3e5cd; --surface:#fdf7e9; }
.question-panel h2 { color:#293d2d; font-size:27px; line-height:1.45; font-weight:650; }
.question-panel p,.question-panel small,.question-panel .small-text { color:#5b6754; }
.question-panel .answer,.question-panel .match-item,.question-panel .sequence-item { background:#fffaf0; border:1px solid #c9c7ab; border-radius:9px; color:#2e4230; padding:16px; }
.question-panel .answer-letter,.question-panel .pair-letter { background:#e9e7d5; color:#62704d; }
.question-panel .answer:hover:not(:disabled),.question-panel .match-item:hover:not(:disabled) { background:#f0eedb; border-color:#748554; }
.question-panel .answer.chosen,.question-panel .match-item.active,.question-panel .match-item.connected { border-color:#527343; background:#e1e8ce; box-shadow:inset 0 0 0 1px #527343; }
.question-panel .answer.correct { background:#dce9cf; border-color:#5c7d49; opacity:1; }
.question-panel .answer:disabled,.question-panel .match-item:disabled { opacity:1; }
.question-panel .text-button,.question-panel a { color:#386041; }
html[data-design] .question-panel .button { color:#fff9e9; background:#375b3e; border-color:#375b3e; }
html[data-design] .question-panel .button:hover { background:#29482f; }
html[data-design] .question-panel .button.secondary { color:#35573c; background:#ffffff55; border-color:#9aaa83; }
.question-panel .hint,.question-panel .source-card { background:#e6e7cf; border:1px solid #c6c8ac; color:#3b5035; }
.question-panel .hint.locked { background:#ece7d7; color:#79816b; }
.question-panel .feedback { background:#e0e8cf; border:1px solid #b2c097; border-radius:10px; color:#354e34; }
.question-panel .feedback.learn { background:#efe3bc; border-color:#d4bc7c; }
.question-panel .feedback h3,.question-panel .feedback .eyebrow { color:#35573c; }
.question-panel .question-footer>span,.question-panel .picture-caption { color:#647052; }
.question-panel textarea,.question-panel input { background:#fffaf0; color:#293d2d; border-color:#bfc5a7; }
.question-panel .move-button { background:#e5e6d0; color:#35573c; }
.team-panel,.team-setup { background:#2e3e30; border:1px solid #627654; border-radius:12px; }
.team-score { background:#3c4c38; border-radius:8px; }
.team-score.active { border-color:#d5bc7c; }
.team-score span,.team-discussion p { color:#c3ccb2; }
.discover-layout { position:relative; max-width:1180px; margin:44px auto 70px; padding:0 40px; gap:48px; align-items:start; }
html[data-design] .discover-art { border-radius:14px; border:1px solid #81916b; overflow:hidden; margin-top:44px; box-shadow:0 20px 50px #00000033; }
.discover-copy h1 { color:#f3ebd8; font-size:44px; line-height:1.12; }
.discover-copy p { color:#c0c7b4; }
.level-choice { background:#344331; border:1px solid #607250; border-radius:9px; color:#e4e8d7; }
.level-choice.selected { background:#475a3e; border-color:#ddc38b; }
.level-choice small { color:#c0cbb1; }
.round-details { color:#c5cbb5; }
.team-setup input,.team-setup select { background:#233528; color:#eee8d9; border-color:#728064; }
/* Account and secondary pages use the same warm palette. */
.account-layout { max-width:1120px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch; margin:38px auto 72px; padding:0 24px; gap:28px; }
.account-art { display:block; height:auto; min-height:660px; position:relative; overflow:hidden; border:1px solid #6d7b5555; border-radius:16px; background:#284e40; }
.account-art>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center bottom; filter:saturate(.65); }
.account-art:after { background:linear-gradient(#1c352acc,#1c352a77 35%,transparent 68%); }
.account-art>div { position:relative; z-index:1; padding:42px 36px; }
.account-art h1 { font-size:37px; line-height:1.16; margin:20px 0; color:#f4ebd2; }
.account-art .eyebrow { color:#d9c48f; font-size:10px; }
.account-art p { font-size:16px; color:#dae0c9; line-height:1.75; }
html[data-design] .account-form { padding:36px 40px; background:#2c3b2f; border:1px solid #65755477; border-radius:16px; box-shadow:0 20px 40px #00000020; min-width:0; }
.account-form .back-link { display:inline-flex; margin-bottom:26px; font-size:13px; }
.account-form .eyebrow { display:block; margin:0 0 12px; font-size:10px; }
.account-form h2 { color:#f2ead6; font-size:34px; margin:0 0 16px; }
.account-form>p { font-size:15px; line-height:1.65; }
.account-form label { color:#e4e7d6; font-size:13px; margin:18px 0 8px; }
.account-form input { min-height:49px; background:#213026; border:1px solid #687857; border-radius:7px; color:#faf2df; }
.account-form input::placeholder { color:#a9b49d; }
.account-form .button.full { margin-top:26px; }
.account-form .account-switch { font-size:13px; margin-top:24px; }
.account-form .privacy-note { font-size:12px; color:#b8c3aa; border-color:#62724f; margin-bottom:0; }
.account-form .registration-confirmation-note { background:#3e4c35; color:#d4dfc1; border-radius:8px; padding:12px; font-size:12px; }
.account-form form>small { color:#bac8ac; }
.account-switch a,.privacy-note a { color:#e7cf99; }
.progress-page,.prose { max-width:1080px; padding:0 32px; margin:44px auto 72px; }
.progress-page h1,.prose h1,.prose h2 { color:#eee6d2; }
html[data-design] .saved-game,.stats-grid>div,.result-hero,.review-list details { background:#32422f; border:1px solid #697b515e; border-radius:12px; color:#f0e8d3; }
.saved-game small,.stats-grid span,.prose p { color:#bfc9b1; }
.stats-grid strong,.result-score { color:#e6c78a; }
.result-hero { padding:40px; }
.result-hero h1 { color:#f1e9d5; }
.result-badge { background:#465636; color:#e4c990; }
.guest-note { background:#34452e; color:#d7dfc5; border-color:#c0a56c; }
html[data-design] .quiz-dialog { background:#2b3c2d; border:1px solid #778861; border-radius:14px; color:#efe7d2; }
.quiz-dialog input,.quiz-dialog textarea { background:#1c2d21; color:#f4edda; border:1px solid #768461; }
.message.error { background:#593b32; color:#ffe3c8; border-color:#a77757; }
.message.success { background:#3a5133; color:#e0ebcb; }
@media(min-width:1700px) { .discovery-hero-inner { padding-top:100px; padding-bottom:104px; } .discovery-hero { min-height:710px; } }
@media(max-width:1100px) {
 .site-header { flex-wrap:wrap; gap:16px; }
 .site-header nav { order:3; width:100%; justify-content:flex-start; margin:0; }
 .header-account { margin-left:auto; }
 .discovery-hero { margin-top:-146px; padding-top:146px; min-height:640px; }
 .discovery-hero-inner { padding-top:60px; }
 .discovery-copy { max-width:460px; }
 .discovery-copy h1 { font-size:64px; }
 .discovery-copy p { max-width:375px; }
 .discovery-landscape { right:-24%; width:100%; }
 .discovery-hero:after { background:linear-gradient(90deg,#223027 0%,#223027ed 34%,#22302755 65%,transparent),linear-gradient(0deg,#1d2923,transparent 30%,#22302755); }
 .registration-inner { padding:22px; }
 .registration-icon { display:none; }
 .registration-inner h2 { font-size:18px; }
 .registration-inner p { max-width:420px; }
 .game-grid { grid-template-columns:repeat(auto-fill,minmax(265px,300px)); }
 
  
 .discover-layout { gap:30px; padding:0 28px; }
 .discover-copy h1 { font-size:36px; }
}
@media(max-width:760px) {
 .site-header { padding:18px 24px; }
 .site-header .brand-logo { width:163px; }
 .header-account { gap:12px; } .header-account .login-link { font-size:12px; }
 html[data-design] .header-account .button { font-size:11px; padding:9px 12px; }
 .site-header nav { gap:22px; } .site-header nav a { font-size:12px; }
 .discovery-hero { margin-top:-142px; padding-top:142px; min-height:760px; }
 .discovery-hero-inner { padding:45px 24px 230px; }
 .discovery-copy h1 { font-size:58px; }
 .discovery-copy p { font-size:16px; max-width:380px; }
 .discovery-landscape { top:auto; bottom:-80px; right:-80px; width:100%; height:70%; object-position:80% 55%; }
 .discovery-hero:after { background:linear-gradient(180deg,#223027 0%,#223027 38%,#22302788 57%,#1d292333 80%,#1d2923),linear-gradient(90deg,#22302799,transparent); }
 .discovery-details { display:grid; grid-template-columns:auto auto minmax(0,1fr); column-gap:20px; font-size:12px; line-height:1.45; }
 .discovery-details>span { white-space:normal; hyphens:auto; }
 .discovery-details strong { display:block; font-size:25px; margin-bottom:3px; }
 .discovery-details span+span:before { display:none; }
 .registration-inner { align-items:start; flex-direction:column; gap:18px; }
 .registration-inner .button { margin:0; }
 .games-section { padding-top:36px; }
 .section-heading { display:block; } .section-heading .subtle { display:block; margin-top:10px; }
 .section-heading h2 { font-size:29px; }
 .difficulty-bar { flex-wrap:wrap; } .level-help { width:100%; margin:0; }
 .game-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
 .card-art { height:145px; } .card-copy { padding:18px; } .card-copy h3 { font-size:18px; }
 .learning-note { padding:26px; flex-wrap:wrap; } .large-star { display:none; } .learning-note .button { margin:0; }
 .site-footer { flex-wrap:wrap; justify-content:flex-start; font-size:12px; }
 .play-page { padding:0 22px; margin-top:28px; } .play-heading h1 { font-size:29px; }
 html[data-design] .question-panel { padding:24px; } .question-panel h2 { font-size:23px; }
 .discover-layout { grid-template-columns:1fr; margin-top:24px; }
 html[data-design] .discover-art { order:2; height:250px; margin:0; }
 .account-layout { grid-template-columns:1fr; max-width:600px; margin-top:24px; }
 .account-art { min-height:310px; } .account-art>img { object-position:center 63%; } .account-art>div { padding:28px; }
 .account-art h1 { font-size:30px; max-width:340px; } .account-art p { max-width:350px; font-size:14px; }
 html[data-design] .account-form { max-width:none; width:100%; padding:28px; }
}
@media(max-width:510px) {
 .site-header { gap:15px 10px; padding:16px 20px; }
 .site-header .brand-logo { width:145px; }
 .header-account { gap:9px; }
 html[data-design] .header-account .button { font-size:10px; padding:8px 9px; }
 .site-header nav { gap:20px; }
 .discovery-copy h1 { font-size:51px; }
 .discovery-copy .eyebrow { font-size:9px; }
 .discovery-details { column-gap:14px; }
 .discovery-hero { min-height:740px; }
 .discovery-landscape { width:130%; right:-130px; bottom:-70px; }
 .game-grid { grid-template-columns:minmax(0,1fr); max-width:360px; }
 .card-art { height:185px; } .card-copy { padding:22px; } .card-copy h3 { font-size:21px; }
 .level { padding:9px 14px; }
   
 .play-top { gap:10px; } .save-state { font-size:11px; } .back-link { font-size:12px; }
 .play-page { padding:0 16px; }
 html[data-design] .question-panel { padding:22px 18px; }
 .question-panel .answer { font-size:15px; padding:14px; }
 .question-panel .question-footer { flex-wrap:wrap; gap:18px; }
 .question-footer .button { width:100%; justify-content:center; }
 .play-heading { gap:12px; } .score-chip { font-size:18px; padding:8px; }
 .progress-page,.prose { padding:0 22px; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *,*:before,*:after { animation:none!important; transition:none!important; } }
/* Keep shared legacy mobile rules from centering the new left-aligned shell. */
.site-header { justify-content:flex-start; }
@media(max-width:600px) {
 .header-account { width:auto; margin-left:auto; justify-content:flex-end; }
 .site-footer { justify-content:flex-start; text-align:left; }
 .site-footer .brand-logo { margin:0; }
}
@media(max-width:370px) {
 .site-header { padding-inline:16px; }
 .site-header .brand-logo { width:122px; }
 .header-account { gap:7px; }
 html[data-design] .header-account .button { padding:8px; font-size:9px; }
 .header-account .login-link { font-size:11px; }
}
html[data-design] .quiz-dialog { --ink:#efe7d2; --muted:#bfc9b1; }
html[data-design] .quiz-dialog h2,html[data-design] .quiz-dialog label { color:#efe7d2; }
html[data-design] .quiz-dialog p,html[data-design] .quiz-dialog small { color:#c1cbb1; }
html[data-design] .quiz-dialog .text-button { color:#e4c58b; }
html[data-design] .quiz-dialog select,html[data-design] .quiz-dialog textarea,html[data-design] .quiz-dialog input { background:#1e2e22; color:#f0e7d2; border-color:#71875c; }
html[data-design] .question-panel .quiz-dialog .button { background:#dfbc76; color:#243025; border-color:#dfbc76; }
html[data-design] .question-panel .quiz-dialog .button.secondary { background:transparent; color:#dfbc76; }
@media(max-width:760px) {
 .account-art:after { background:linear-gradient(110deg,#19382beb 0%,#19382bb8 64%,#19382b55); }
}
@media(max-width:600px) {
 .site-header { display:grid; grid-template-columns:minmax(110px,1fr) auto; gap:18px 10px; }
 .site-header>.brand { min-width:0; }
 .site-header nav { grid-column:1/-1; border:0; padding:0; }
 .header-account { flex-wrap:nowrap; width:auto; margin:0; }
 .header-account .button { white-space:nowrap; }
}

/* Organic painted foliage replaces the map's straight transition. */
.discovery-landscape { top:0; right:0; width:88%; height:100%; object-position:right center; filter:saturate(1.06) brightness(1.04); transform:none; mask-image:linear-gradient(90deg,transparent,#000 22%); -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%); }
.discovery-hero:after { background:linear-gradient(90deg,#223027 0%,#223027eb 20%,#22302788 34%,transparent 58%),linear-gradient(0deg,#1d2923,transparent 18%,transparent 72%,#223027b3); }
@media(max-width:1100px) and (min-width:761px) {
 .discovery-landscape { right:-12%; width:105%; }
 .discovery-hero:after { background:linear-gradient(90deg,#223027 0%,#223027de 28%,#22302766 48%,transparent 72%),linear-gradient(0deg,#1d2923,transparent 22%,transparent 76%,#22302777); }
}
@media(max-width:760px) {
 .discovery-landscape { top:auto; bottom:0; right:-20%; width:125%; height:63%; object-position:75% center; mask-image:linear-gradient(180deg,transparent,#000 28%); -webkit-mask-image:linear-gradient(180deg,transparent,#000 28%); }
 .discovery-hero:after { background:linear-gradient(180deg,#223027 0%,#223027 35%,#22302788 53%,transparent 72%,#1d2923); }
}

/* Compact shared footer, centered on every screen size. */
.site-footer { display:flex; justify-content:center; text-align:center; padding:24px 0; gap:0; }
.footer-info { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:8px 0; list-style:none; padding:0; margin:0; font-size:13px; line-height:1.6; }
.footer-info>li { display:flex; align-items:center; white-space:nowrap; }
.footer-info>li+li:before { content:'·'; color:#b8bd9f; margin:0 12px; }
.footer-info .text-button { font:inherit; padding:0; margin:0; line-height:inherit; }
@media(max-width:510px) { .footer-info { font-size:12px; } .footer-info>li+li:before { margin:0 8px; } }
.family-task-label { display:inline-flex; padding:6px 12px; margin:0 0 14px; border:1px solid #b6bc97; background:#e1e6ce; color:#40593b; border-radius:6px; font-size:12px; font-weight:650; letter-spacing:.04em; }
.family-line { list-style:none; display:flex; align-items:center; flex-wrap:wrap; gap:12px 30px; padding:14px 0; margin:0; }
.family-line li { position:relative; background:#e5e8d2; color:#365037; border:1px solid #b8c49b; border-radius:8px; padding:13px 18px; font-weight:650; }
.family-line li+li:before { content:'→'; position:absolute; left:-25px; color:#738653; }
.family-line li.family-gap { border:2px dashed #8a783f; background:#f6e8bc; color:#695727; }
@media(max-width:600px) { .family-line { flex-direction:column; align-items:stretch; gap:26px; } .family-line li { text-align:center; } .family-line li+li:before { content:'↓'; left:50%; top:-25px; } }
.discover-art.generations-art{height:auto;min-height:0;aspect-ratio:3/2;align-self:start}.discover-art.generations-art>.illustration{width:100%;height:100%;display:block}
/* Book selection uses the same olive/gold controls as the other round options. */
.book-picker { border:0; padding:0; margin:24px 0; min-width:0; }
.book-picker legend { color:#eee6d2; font-weight:650; margin-bottom:10px; }
.book-select-label { display:block; font-size:13px; margin-bottom:6px; color:#cbd0bd; }
.book-picker select { width:100%; max-width:100%; background:#293c2e; color:#f4ecd9; border:1px solid #8b976b; border-radius:8px; padding:14px; font:inherit; }
.book-picker select:focus-visible { outline:3px solid #dfbd7d; outline-offset:3px; }
.book-picker .small-text { margin:10px 0 0; font-size:13px; line-height:1.55; }
.level-choice small .book-level-count { position:static; display:inline; color:inherit; font-size:inherit; }
html[data-design] .online-card{--ink:#283d2e;--muted:#5b6754;--green:#355c42;--line:#d0c7ad;--border:#c8bea5;--soft:#e3e5cd;--surface:#fffaf0;color-scheme:light}
html[data-design] .online-card .button.secondary{color:#35573c;background:#ffffff55;border-color:#9aaa83}
html[data-design] .online-card .eyebrow{color:#506342}
@media(max-width:640px){html[data-design] .online-question.question-panel{padding:20px}}
@media(max-width:600px){.header-account .account-name{display:none}.header-account .online-presence{font-size:11px}.header-account .text-button{font-size:11px}}


/* Shared marble surface across discovery, accounts, games and information pages. */
body {
 background-color:#1d2923;
 background-image:linear-gradient(135deg,#1d2923b8,#1d2923cc),url('images/card-olive-marble.png');
 background-position:center;
 background-size:cover;
 background-repeat:no-repeat;
 background-attachment:fixed;
}

/* Left-hand headline; BibleClue laptop and historical city on the right. */
.discovery-hero-modern .discovery-landscape {
 top:0; bottom:auto; left:auto; right:0; width:100%; max-width:1440px; height:100%;
 object-fit:cover; object-position:right 60%; filter:none; transform:none;
 /* Fade into the actual textured page instead of an opaque end colour. */
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%),linear-gradient(180deg,#000 58%,#000c 72%,#0005 88%,transparent);
 -webkit-mask-composite:source-in;
 mask-image:linear-gradient(90deg,transparent,#000 18%),linear-gradient(180deg,#000 58%,#000c 72%,#0005 88%,transparent);
 mask-composite:intersect;
}
.discovery-hero-modern:after {
 background:linear-gradient(90deg,#1d2923e6 0%,#1d2923cc 32%,#1d292355 45%,transparent 60%),linear-gradient(180deg,#1d2923b3,transparent 25%);
 -webkit-mask-image:linear-gradient(180deg,#000 55%,#0009 78%,transparent);
 mask-image:linear-gradient(180deg,#000 55%,#0009 78%,transparent);
}
.discovery-hero-modern .discovery-copy { margin-left:0; width:auto; max-width:min(570px,44vw); }
@media(max-width:1000px) {
 .discovery-hero-modern { display:flex; flex-direction:column; margin-top:0; padding-top:0; min-height:0; }
 .discovery-hero-modern .discovery-hero-inner { order:0; width:100%; padding:28px var(--gutter) 26px; }
 .discovery-hero-modern .discovery-copy { width:100%; max-width:620px; margin:0; }
 .discovery-hero-modern .discovery-copy h1 { font-size:clamp(42px,7vw,60px); }
 .discovery-hero-modern .discovery-copy p { max-width:540px; }
 .discovery-hero-modern .discovery-landscape {
  position:relative; z-index:0; order:1; align-self:flex-end; display:block;
  width:142.857%; max-width:none; height:auto; aspect-ratio:2/1;
  object-fit:contain; object-position:right center;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 14%,#000 62%,#0008 82%,transparent);
  -webkit-mask-composite:source-over;
  mask-image:linear-gradient(180deg,transparent,#000 14%,#000 62%,#0008 82%,transparent);
  mask-composite:add;
 }
 .discovery-hero-modern:after { display:none; }
}

.header-account .profile-link { color:#e4e4d6; font-size:14px; overflow-wrap:anywhere; }
.header-account .profile-link.active { color:#dfbc76; }
@media(max-width:600px) { .header-account:has(.profile-link) { flex-wrap:wrap; } .header-account .profile-link { font-size:12px; } }

/* Soft olive marbling only in the homepage cards' text panels. */
.home-group .game-card .card-copy {
 background:linear-gradient(145deg,#29372e33,#23312866),url('images/card-olive-marble.png') center / cover no-repeat;
}
.home-group .game-card:nth-child(3n+2) .card-copy { background-position:center,35% center; }
.home-group .game-card:nth-child(3n) .card-copy { background-position:center,75% center; }

/* Compact language choices at the right edge of the header. */
.site-header .header-language { flex:0 0 auto; margin-left:auto; }
.site-header .language-switch { display:flex; align-items:center; gap:4px; }
.site-header .language-switch a { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; padding:5px; border:1px solid transparent; border-radius:7px; background:transparent; }
.site-header .language-switch svg { display:block; border-radius:2px; box-shadow:0 0 0 1px #ffffff35; overflow:hidden; }
.site-header .language-switch a:hover { background:#ffffff12; }
.site-header .language-switch a[aria-current="true"] { border-color:#dfbc76; background:#dfbc761a; }
.site-header .language-switch a:focus-visible { outline:2px solid #dfbc76; outline-offset:3px; }
@media(max-width:600px) {
 .site-header .header-language { grid-column:2; grid-row:1; justify-self:end; }
 .site-header .header-account { grid-column:1/-1; grid-row:2; justify-content:flex-end; flex-wrap:wrap; }
 .site-header>nav { grid-column:1/-1; grid-row:3; }
}

/* The main mixed quiz is the featured entry within the existing card grid. */
html[data-design] .game-card.main-quiz-card {
 position:relative;
 border:3px solid #e6c476;
 box-shadow:0 0 0 1px #fae4a666,0 0 22px #e6c47630,0 12px 24px #00000028;
}
html[data-design] .game-card.main-quiz-card:hover,
html[data-design] .game-card.main-quiz-card:focus-visible {
 border-color:#f7db94;
 box-shadow:0 0 0 1px #fae4a699,0 0 28px #e6c47645,0 18px 32px #00000030;
}
.main-quiz-card .card-art { position:relative; }
.main-quiz-label {
 position:absolute; top:10px; left:50%; transform:translateX(-50%);
 width:max-content; max-width:calc(100% - 20px); padding:7px 12px;
 border:1px solid #f6dea5; border-radius:20px;
 background:linear-gradient(135deg,#f5d88e,#dcba71); color:#243126;
 box-shadow:0 3px 10px #18271f33;
 font-size:11px; font-weight:750; line-height:1.4; letter-spacing:.04em; text-align:center;
}
.main-quiz-card .card-copy { padding:20px 18px 18px; text-align:center; }
.main-quiz-card .card-copy h3 { font-size:26px; line-height:1.2; margin-bottom:14px; }
.main-quiz-card .card-copy p { color:#eee5cb; font-size:16px; line-height:1.6; }
.main-quiz-card .card-bottom {
 display:flex; align-items:center; justify-content:center; gap:14px;
 min-height:52px; padding:12px 16px; border:1px solid #f1d494; border-radius:10px;
 background:linear-gradient(135deg,#f3d58c,#dbb66b); color:#243126;
 font-size:18px; font-weight:750; line-height:1.3;
 box-shadow:0 4px 10px #18271f30;
}
.main-quiz-card .circle-arrow { border:0; background:none; color:inherit; flex-shrink:0; }
/* Make the next hint easy to find across solo, daily and shared rounds. */
html[data-design] .button.hint-button {
 display:flex; align-items:center; justify-content:flex-start; gap:14px;
 width:100%; min-height:66px; margin:18px 0 0; padding:14px 18px;
 border:2px solid #b58c3e; border-radius:10px;
 background:linear-gradient(135deg,#f5d990,#dfb86b); color:#263b2b;
 box-shadow:0 3px 9px #59452226; text-align:left;
 font-size:17px; font-weight:750; line-height:1.4; white-space:normal;
}
.hint-button-copy { display:flex; flex:1; min-width:0; flex-direction:column; gap:4px; }
html[data-design] .button.hint-button small {
 display:block; margin:0; color:#415138; font-size:13px; font-weight:500; line-height:1.45;
}
html[data-design] .button.hint-button:hover:not(:disabled) {
 background:#f6d995; border-color:#8c6727; box-shadow:0 4px 12px #59452238;
}
html[data-design] .button.hint-button:focus-visible { outline:3px solid #35573c; outline-offset:4px; }
html[data-design] .button.hint-button:disabled { opacity:.6; box-shadow:none; }
@media(max-width:510px) {
 html[data-design] .button.hint-button { gap:10px; padding:12px; font-size:16px; }
}
.play-heading>div:first-child { min-width:0; flex:1; }
.play-heading .play-round-label { line-height:1.2; overflow-wrap:anywhere; margin:0; }
.play-heading .score-chip { flex-shrink:0; }

/* Public, crawlable explanations share the existing quiz illustrations and rules. */
.puzzle-guide { margin-top:48px; }
.puzzle-guide>h1,.puzzle-guide-detail h1 { font-size:clamp(30px,3.5vw,44px); }
.puzzle-guide-note { margin-top:30px; max-width:760px; }
.puzzle-guide-link { text-decoration:underline; text-underline-offset:3px; color:#e5c789; }
.puzzle-guide-detail { max-width:1100px; margin:40px auto 70px; padding:0 28px; }
.puzzle-breadcrumb { margin-bottom:28px; font-size:14px; color:#d9c69e; }
.puzzle-breadcrumb a,.puzzle-guide-detail section a { text-decoration:underline; text-underline-offset:3px; }
.puzzle-guide-intro { display:grid; grid-template-columns:1.3fr 1fr; gap:36px; align-items:center; }
.puzzle-guide-intro p { line-height:1.75; }
.puzzle-guide-art { overflow:hidden; border:1px solid #7c8963; border-radius:14px; }
.puzzle-guide-art .illustration { display:block; width:100%; height:auto; }
.puzzle-guide-detail section { margin-top:38px; }
.puzzle-guide-detail h2 { font-size:27px; }
.puzzle-levels { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.puzzle-levels>div { background:#344338; border:1px solid #647153; border-radius:9px; padding:18px; }
.puzzle-levels dt { font-weight:700; color:#e3c587; }
.puzzle-levels dd { margin:8px 0 0; color:#c3cbb7; }
.puzzle-related { display:flex; flex-wrap:wrap; gap:12px 26px; padding-left:20px; }
@media(max-width:700px) { .puzzle-guide-intro,.puzzle-levels { grid-template-columns:1fr; } .puzzle-guide-art { max-width:420px; } }

/* A clear invitation to explore the remaining solo games. */
html[data-design] .button.home-more-solo {
    display:flex; align-items:center; justify-content:center; gap:20px;
    width:fit-content; max-width:100%; min-height:60px; margin:30px auto 12px;
    padding:16px 28px; border:2px solid #eed49b; border-radius:12px;
    background:linear-gradient(135deg,#edcf8f,#dcb467); color:#243126;
    font-size:17px; font-weight:800; line-height:1.4; text-align:center;
    box-shadow:0 6px 20px #111d1840; position:relative; isolation:isolate;
}
html[data-design] .home-more-solo .home-more-symbol {
    display:grid; place-items:center; width:30px; height:30px; flex:0 0 30px;
    border:1px solid #24312655; border-radius:50%; font-size:23px; line-height:1;
}
html[data-design] .home-more-solo::after {
    content:""; position:absolute; inset:-2px; border-radius:inherit;
    pointer-events:none; box-shadow:0 0 0 0 #e4bd7540; opacity:0;
}
@media(prefers-reduced-motion:no-preference) {
    html[data-design] .home-more-solo[aria-expanded="false"]::after {animation:solo-more-pulse 3.2s ease-out infinite;}
}
@keyframes solo-more-pulse {
    0%,18% {box-shadow:0 0 0 0 #e4bd7540;opacity:0;}
    28% {opacity:1;}
    78%,100% {box-shadow:0 0 0 10px #e4bd7500;opacity:0;}
}
html[data-design] .button.home-more-solo:hover {background:linear-gradient(135deg,#f3dba8,#e7c27f);color:#243126;}
html[data-design] .button.home-more-solo:focus-visible {outline:3px solid #fff3ce;outline-offset:5px;}
html[data-design] .home-more-solo:hover::after,
html[data-design] .home-more-solo:focus-visible::after {animation:none;}
@media(max-width:600px) {html[data-design] .button.home-more-solo {width:100%;padding:15px 18px;font-size:16px;gap:14px;}}

/* Account artwork is a complete illustration, independent of the form's height. */
.account-layout { align-items:start; }
.account-layout .account-art { min-height:0; height:auto; display:flex; flex-direction:column; background:#263d32; }
.account-layout .account-art>img { position:static; order:2; display:block; width:100%; height:auto; aspect-ratio:2 / 3; object-fit:cover; filter:none; }
.account-layout .account-art:after { display:none; }
.account-layout .account-art>div { order:1; padding:30px 26px 24px; }
.account-layout .account-art h1 { font-size:clamp(28px,2.6vw,37px); }
.site-main:not(:has(.discovery-hero)) .account-layout { padding-inline:16px; }
@media(min-width:1240px) {
    .site-main:not(:has(.discovery-hero)) .page-content>.prose,
    .site-main:not(:has(.discovery-hero)) .page-content>.progress-page,
    .site-main:not(:has(.discovery-hero)) .page-content>.online-page { margin-inline:auto; max-width:100%; }
    .account-layout { gap:24px; }
    html[data-design] .account-form { padding:30px 26px; }
}
@media(max-width:760px) {

    .account-layout { grid-template-columns:minmax(0,1fr); }
    .account-layout .account-art { order:2; }
    .account-layout .account-art>img { aspect-ratio:4 / 3; object-position:center 65%; }
    .account-layout .account-art>div { padding:26px; }
}
/* Keep navigation, account controls and language choices aligned at the right. */
.site-header { display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; column-gap:24px; align-items:center; }
.site-header > nav { width:auto; min-width:0; margin:0; justify-content:flex-end; flex-wrap:wrap; row-gap:4px; }
.site-header .header-account { min-width:0; margin:0; justify-content:flex-end; }
.site-header .profile-link { overflow-wrap:anywhere; }
.site-header .header-language { margin:0; justify-self:end; }
@media(max-width:1100px) {
 .site-header { grid-template-columns:auto minmax(0,1fr) auto; gap:14px 18px; }
 .site-header > .brand { grid-column:1; grid-row:1; }
 .site-header .header-account { grid-column:2; grid-row:1; flex-wrap:wrap; }
 .site-header .header-language { grid-column:3; grid-row:1; }
 .site-header > nav { grid-column:1/-1; grid-row:2; justify-content:flex-end; }
}
@media(max-width:600px) {
 .site-header { grid-template-columns:minmax(0,1fr) auto; gap:14px 10px; }
 .site-header .header-language { grid-column:2; grid-row:1; }
 .site-header .header-account { grid-column:1/-1; grid-row:2; }
 .site-header > nav { grid-column:1/-1; grid-row:3; justify-content:flex-end; }
}

/* A notice before the hero must stay in normal flow, including when expanded. */
.page-content > .hindi-notice + .discovery-hero {
    margin-top:0;
    padding-top:0;
}
.page-content:has(> .discovery-hero) > .hindi-notice {
    max-width:none;
    margin-inline:var(--gutter);
}