@import url('/fonts/fonts.css');

:root {
  --paper:#f7f7f0; --ink:#20251e; --muted:#62685b; --green:#d8f36a;
  --line:#d5d8cb; --white:#fff; --good:#30633f; --bad:#9c4540;
  --text-small:.875rem; --text-meta:.8125rem;
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; scrollbar-gutter:stable; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:'DM Sans',sans-serif; font-size:1rem; line-height:1.6; }
button,a,input,select { -webkit-tap-highlight-color:transparent; }
button,input,select { font:inherit; }
button { cursor:pointer; }
a { color:inherit; text-decoration:none; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible { outline:3px solid #628a1b; outline-offset:3px; }
button:disabled { cursor:default; }
input,select { font-size:1rem; min-height:48px; }
h1,h2,h3,p { overflow-wrap:break-word; }
.wrap { width:100%; max-width:1248px; margin-inline:auto; padding-inline:32px; }
.header { position:sticky; top:0; z-index:20; background:var(--paper); box-shadow:0 4px 12px #20251e08; min-height:88px; display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid var(--line); }
.logo { display:inline-flex; align-items:center; flex-shrink:0; }
.logo img { display:block; width:190px; max-width:100%; height:auto; }
.logo.small img { width:116px; }
nav { display:flex; gap:24px; }
.nav { border:0; background:none; color:var(--muted); padding:12px 2px; min-height:48px; font-size:1rem; line-height:1.3; white-space:nowrap; flex-shrink:0; font-weight:600; }
.nav.active { color:var(--ink); position:relative; font-weight:600; }
.nav.active:after { content:''; height:4px; background:var(--green); position:absolute; bottom:2px; left:0; right:0; }
.daily-label { font-size:var(--text-meta); letter-spacing:.08em; font-weight:700; display:flex; gap:8px; align-items:center; }
.daily-label i,.eyebrow i { width:7px; height:7px; flex-shrink:0; border-radius:50%; background:#6d8d2a; display:inline-block; }
.edition { display:flex; justify-content:space-between; gap:16px; margin:18px 0; font-size:var(--text-meta); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.hero { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:40px; align-items:center; padding:8px 0 32px; }
.hero>* { min-width:0; }
.eyebrow { font-size:var(--text-meta); font-weight:700; letter-spacing:.08em; display:flex; gap:9px; align-items:center; }
.hero h1 { font-family:Manrope,sans-serif; font-size:clamp(2.25rem,4.2vw,3.5rem); font-weight:800; letter-spacing:-.045em; line-height:1.14; margin:22px 0; }
.highlight { position:relative; display:inline-block; z-index:0; }
.highlight:after { content:''; position:absolute; z-index:-1; bottom:.06em; left:-2px; right:-3px; height:.32em; background:var(--green); transform:rotate(-2deg); }
.intro { color:var(--muted); line-height:1.75; max-width:42ch; font-size:1.125rem; }
.hero-note { margin-top:24px; display:flex; flex-wrap:wrap; gap:12px 20px; color:var(--muted); font-size:var(--text-small); }
.hero-note span { display:flex; gap:7px; }
.quiz-card { background:var(--green); border:1px solid #c8df65; border-radius:18px; padding:28px; position:relative; box-shadow:0 10px 0 -5px #e8ebdb; }
.card-top { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; font-size:var(--text-meta); font-weight:700; letter-spacing:.055em; }
.pill { background:#ffffff68; border:1px solid #21271c19; border-radius:20px; padding:6px 10px; letter-spacing:.025em; }
.card-art { height:120px; display:flex; justify-content:center; align-items:center; position:relative; }
.brain { width:104px; height:104px; border-radius:26px; background:var(--ink); transform:rotate(-9deg); display:flex; align-items:center; justify-content:center; color:var(--green); font-family:Georgia,serif; font-size:86px; font-weight:bold; box-shadow:8px 8px 0 #b7d04b; }
.spark { position:absolute; font-size:32px; left:22%; top:24px; }
.spark.right { left:auto; right:19%; top:95px; font-size:23px; }
.quiz-card h2 { font:800 clamp(1.5rem,2.2vw,2rem)/1.25 Manrope,sans-serif; letter-spacing:-.035em; margin:8px 0 14px; }
.quiz-card p { font-size:1rem; color:#424c34; margin:0; line-height:1.65; }
.card-stats { display:flex; flex-wrap:wrap; gap:8px 20px; border-top:1px solid #21271c35; margin:22px 0 20px; padding-top:16px; font-size:var(--text-small); }
.primary { border:0; border-radius:9px; background:var(--ink); color:white; padding:15px 20px; min-height:52px; font-size:1rem; font-weight:700; line-height:1.4; display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; text-align:left; }
.primary:hover { background:#39422f; }
.primary:disabled { opacity:.6; }
.arrow { font-size:1.3rem; line-height:1; }
.card-bottom { text-align:center; font-size:var(--text-small); margin-top:16px; color:#424c34; }
.overview { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); border:1px solid var(--line); border-radius:12px; margin-bottom:44px; background:#ffffff42; }
.overview>div { padding:22px 24px; display:flex; gap:14px; align-items:center; min-width:0; }
.overview>div+div { border-left:1px solid var(--line); }
.stat-icon { width:42px; height:42px; flex-shrink:0; background:#edeee5; border-radius:50%; display:grid; place-items:center; font-size:1.25rem; }
.stat-number { font:800 1.625rem/1.25 Manrope,sans-serif; letter-spacing:-.025em; }
.stat-text { font-size:var(--text-small); color:var(--muted); margin-top:6px; }
.section-heading { display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:space-between; align-items:baseline; border-bottom:1px solid var(--line); padding-bottom:16px; }
.section-heading h2 { font:800 1.5rem/1.3 Manrope,sans-serif; letter-spacing:-.025em; margin:0; }
.section-heading span { font-size:var(--text-meta); color:var(--muted); }
.categories { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin:20px 0 40px; }
.category { border:1px solid var(--line); border-radius:10px; padding:20px 16px; background:#ffffff55; min-width:0; }
.category-icon { font-size:1.625rem; display:block; margin-bottom:16px; }
.category small { color:var(--muted); font-size:var(--text-meta); letter-spacing:.06em; }
.category h3 { font-size:1rem; line-height:1.4; margin:7px 0 2px; }
.bottom-note { display:flex; justify-content:space-between; align-items:center; gap:24px; background:#eaece2; border-radius:10px; padding:24px; margin-bottom:40px; }
.bottom-note strong { font-size:1.125rem; }
.bottom-note p { font-size:1rem; color:var(--muted); margin:8px 0 0; }
.text-button { background:none; border:0; font-weight:700; font-size:var(--text-small); padding:10px 4px; min-height:44px; }
.footer { border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between; padding-top:24px; padding-bottom:24px; color:var(--muted); font-size:var(--text-small); }
.beta { font-size:var(--text-meta); letter-spacing:.025em; }
.page-head { margin:44px 0 28px; }
.page-head h1 { font:800 clamp(2rem,3.6vw,2.75rem)/1.2 Manrope,sans-serif; letter-spacing:-.035em; margin:12px 0; }
.page-head p { color:var(--muted); line-height:1.7; max-width:65ch; }
.game { max-width:780px; margin:36px auto 56px; }
.game-top { display:flex; flex-wrap:wrap; gap:12px; justify-content:space-between; align-items:center; margin-bottom:16px; color:var(--muted); font-size:var(--text-small); }
.progress { display:flex; gap:6px; }
.progress i { width:30px; height:5px; border-radius:4px; background:var(--line); }
.progress i.done { background:#759c37; }
.progress i.current { background:var(--ink); }
.question-box { border:1px solid var(--line); background:white; border-radius:16px; padding:32px; }
.question-meta { display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:var(--text-meta); letter-spacing:.05em; font-weight:700; }
.timer { font-size:1.125rem; background:#eff3e5; padding:8px 12px; border-radius:8px; min-width:72px; flex-shrink:0; text-align:center; font-variant-numeric:tabular-nums; }
.timer.urgent { color:var(--bad); background:#ffefeb; }
.timer-track { height:4px; background:#eef0e8; margin:20px 0 24px; border-radius:4px; overflow:hidden; }
.timer-track i { display:block; background:#9cbc4b; height:100%; transition:width .1s linear; }
h2.question { font:800 clamp(1.375rem,2.2vw,1.75rem)/1.4 Manrope,sans-serif; letter-spacing:-.02em; margin:16px 0 24px; }
.answers { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.answer { display:flex; align-items:center; gap:12px; text-align:left; background:white; border:1px solid var(--line); border-radius:9px; padding:16px; color:var(--ink); min-height:64px; font-size:1.0625rem; line-height:1.5; min-width:0; overflow-wrap:anywhere; }
.answer:not(:disabled):hover { border-color:var(--line); background:white; }
.answer b { font-size:var(--text-meta); flex-shrink:0; border:1px solid var(--line); padding:4px 8px; border-radius:5px; color:var(--muted); }
.answer:focus-visible { outline:3px solid var(--ink); outline-offset:3px; }
.feedback { padding:20px 0 0; line-height:1.7; color:var(--muted); font-size:1rem; }
.feedback strong { color:var(--ink); }
.feedback .primary { margin-top:20px; }
.landscape,.flag-image { width:100%; height:190px; object-fit:cover; border-radius:9px; }
.flag-image { object-fit:contain; background:#f0f1e9; padding:15px; }
.quiet { text-align:center; font-size:var(--text-small); color:var(--muted); margin:20px 0; }
.result-card { max-width:680px; margin:40px auto; text-align:center; background:white; border:1px solid var(--line); padding:36px; border-radius:16px; }
.result-icon { font-size:2.375rem; }
.result-card h1 { font:800 clamp(1.875rem,3vw,2.375rem)/1.25 Manrope,sans-serif; letter-spacing:-.035em; }
.result-squares { font-size:1.625rem; letter-spacing:4px; margin:24px 0; }
.result-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin:28px 0; padding:22px 0; border-block:1px solid var(--line); }
.result-stats b { display:block; font:800 1.75rem/1.35 Manrope,sans-serif; }
.result-stats span { font-size:var(--text-small); color:var(--muted); }
.secondary { border:1px solid var(--line); background:transparent; padding:12px 18px; min-height:48px; font-size:1rem; line-height:1.5; border-radius:8px; width:100%; margin-top:12px; color:var(--ink); }
.result-card p { font-size:1rem; color:var(--muted); line-height:1.75; }
.review { text-align:left; border-top:1px solid var(--line); margin-top:28px; padding-top:6px; }
.review-title { font:800 1.375rem/1.4 Manrope,sans-serif; letter-spacing:-.02em; margin:22px 0; }
.review-item { padding:20px 0; border-bottom:1px solid var(--line); font-size:1rem; line-height:1.7; margin:0; }
.review-item:last-child { border-bottom:0; }
.review-item h3 { font-size:1.0625rem; line-height:1.55; margin:8px 0 12px; }
.review-item small,.review-status { font-size:var(--text-meta); color:var(--muted); }
.review-status { letter-spacing:.04em; text-transform:uppercase; }
.review-correct,.review-choice,.review-explanation { margin:8px 0!important; color:var(--ink)!important; }
.review-explanation { color:var(--muted)!important; }
.source-link { display:inline-flex; align-items:center; min-height:44px; font-size:var(--text-small); color:#42611e; text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere; }
.rules-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin:24px 0 36px; }
.rule { border:1px solid var(--line); border-radius:12px; background:white; padding:24px; }
.rule>span { display:block; font:800 2rem Manrope,sans-serif; color:#617b27; }
.rule h2 { font-size:1.25rem; line-height:1.4; margin-top:24px; }
.rule p { color:var(--muted); font-size:1rem; line-height:1.75; }
.notice { padding:22px; background:#eaece2; border-radius:10px; font-size:1rem; line-height:1.75; margin:24px 0 40px; }
.history-table,.board-table { width:100%; border-collapse:collapse; margin:24px 0 40px; text-align:left; font-size:1rem; }
.history-table th,.board-table th { font-size:var(--text-meta); color:var(--muted); font-weight:700; }
.history-table th,.history-table td,.board-table th,.board-table td { border-bottom:1px solid var(--line); padding:16px 12px; }
.table-scroll { overflow-x:auto; overscroll-behavior-inline:contain; }
.table-scroll table { margin-bottom:20px; }
.board-table td { white-space:nowrap; }
.my-rank { background:#eaf0db; }
.you-label { font-size:var(--text-meta); padding:3px 6px; border-radius:4px; background:var(--green); margin-left:5px; }
.board-count { font-size:var(--text-small); color:var(--muted); }
.empty { border:1px dashed #c5c8b9; text-align:center; padding:40px 20px; border-radius:12px; margin:24px 0 40px; }
.empty p { color:var(--muted); }
.empty .primary { max-width:320px; margin:24px auto 0; }
#toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%); max-width:calc(100% - 32px); width:max-content; border-radius:8px; background:var(--ink); color:white; padding:14px 20px; font-size:1rem; opacity:0; pointer-events:none; transition:opacity .2s; z-index:9; }
#toast.visible { opacity:1; }
.share-output { white-space:pre-wrap; overflow-wrap:anywhere; text-align:left; font:1rem/1.7 'DM Sans',sans-serif; background:var(--paper); padding:20px; border-radius:8px; user-select:all; }
.test-panel { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:20px 24px; margin-top:22px; background:#edf0e2; border:1px dashed #b9c49c; border-radius:10px; }
.test-panel strong { font-size:1rem; }
.test-panel p { font-size:var(--text-small); color:var(--muted); line-height:1.7; margin:6px 0 0; }
.test-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.test-actions label { font-size:var(--text-small); width:100%; color:var(--muted); }
.test-actions select { padding:10px; border:1px solid #bbc5ab; border-radius:7px; background:white; color:var(--ink); max-width:100%; }
.test-button { background:var(--ink); color:white; border:0; border-radius:7px; min-height:48px; padding:11px 15px; font-size:1rem; }
.profile-form { border-top:1px solid #20251e30; margin-top:20px; padding-top:20px; text-align:left; }
.profile-form label { font-size:1rem; font-weight:700; display:block; margin-bottom:10px; }
.profile-form input { width:100%; background:white; border:1px solid #87956e; border-radius:8px; padding:12px; }
.profile-form p { font-size:var(--text-small)!important; margin:12px 0!important; }
.form-error { font-size:1rem; color:#71342d; line-height:1.6; margin-top:12px; }
.player-line { font-size:1rem; margin-bottom:16px; }
.emoji-picker { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0; }
.emoji-picker button { width:44px; min-height:44px; border:1px solid #87956e; border-radius:8px; background:#ffffff80; font-size:1.375rem; padding:4px; }
.local-links { margin:20px 0 36px; text-align:center; font-size:var(--text-small); color:var(--muted); }
.local-links a { display:inline-block; padding-block:10px; text-decoration:underline; text-underline-offset:3px; }
.account-line { display:flex; justify-content:space-between; align-items:center; gap:16px; border-bottom:1px solid var(--line); padding:8px 0; color:var(--muted); font-size:var(--text-small); }
.account-line>span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account-line>button { flex-shrink:0; white-space:nowrap; }
.local-mode-note { color:var(--muted); font-size:var(--text-meta); padding-block:8px; }
.legal-footer { padding-block:8px 12px; text-align:center; color:var(--muted); border-top:1px solid var(--line); }
.legal-links { display:flex; flex-wrap:wrap; gap:8px 20px; justify-content:center; font-size:var(--text-small); }
.legal-links a { display:inline-flex; align-items:center; min-height:44px; text-decoration:underline; text-underline-offset:3px; }
.legal-footer>span { font-size:var(--text-meta); }
.legal-page { max-width:900px; padding-top:32px; padding-bottom:40px; }
.legal-page h1 { font:800 clamp(2rem,4vw,3rem)/1.2 Manrope,sans-serif; letter-spacing:-.035em; margin:14px 0; }
.legal-page h2 { font:800 1.375rem/1.4 Manrope,sans-serif; letter-spacing:-.02em; margin:32px 0 14px; scroll-margin-top:160px; }
.legal-page p,.legal-page li { font-size:1rem; line-height:1.8; }
.legal-page li { margin:12px 0; }
.legal-page p a,.legal-page li a,.legal-identity a { text-decoration:underline; text-underline-offset:3px; overflow-wrap:anywhere; }
.legal-updated,.legal-source { font-size:var(--text-small)!important; color:var(--muted); }
.legal-draft { border:1px solid #c9ba85; background:#f7efd4; }
.legal-draft p { margin:10px 0 0; }
.legal-missing { background:#fff0b7; padding:2px 4px; overflow-wrap:anywhere; }
.legal-identity { display:grid; grid-template-columns:minmax(130px,1fr) minmax(0,2fr); gap:12px 20px; padding:20px; background:#eaece2; border-radius:10px; }
.legal-identity dt { font-weight:700; }.legal-identity dd { margin:0; }
.legal-table { width:100%; border-collapse:collapse; min-width:480px; }.legal-table th,.legal-table td { padding:16px 12px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line); }
.legal-table code { overflow-wrap:anywhere; white-space:normal; }
.auth-legal { font-size:var(--text-small)!important; }.auth-legal a { text-decoration:underline; text-underline-offset:3px; }
@media(max-width:640px) { .legal-identity { grid-template-columns:minmax(0,1fr); gap:6px; }.legal-identity dd { margin-bottom:12px; }.legal-page { padding-top:24px; } }
.login-box { margin-top:20px; border-top:1px solid #20251e30; padding-top:20px; max-width:480px; margin-inline:auto; }
.login-box h3 { font:800 1.375rem/1.35 Manrope,sans-serif; margin:0 0 12px; }
.login-box p { font-size:1rem!important; line-height:1.65; margin:12px 0!important; color:#424c34; }
.login-box label { display:block; font-size:1rem; font-weight:700; margin:18px 0 8px; }
.login-box input { width:100%; background:white; border:1px solid #87956e; border-radius:8px; padding:12px; font-size:1rem; margin-bottom:12px; }
#login-message { font-size:1rem; line-height:1.65; margin-top:12px; overflow-wrap:anywhere; }
.auth-tabs { display:flex; gap:8px; margin-bottom:20px; }
.auth-tabs button { flex:1; border:1px solid #20251e65; border-radius:7px; padding:10px; min-height:48px; background:transparent; font-size:1rem; color:var(--ink); }
.auth-tabs button[aria-pressed="true"] { background:var(--ink); color:white; }
.password-field { display:flex; align-items:stretch; gap:8px; margin-bottom:12px; }
.password-field input { min-width:0; flex:1; margin:0; }
.password-field button { flex-shrink:0; background:transparent; border:1px solid #20251e65; border-radius:7px; font-size:var(--text-small); padding:8px 10px; color:var(--ink); min-height:48px; }
.auth-options { display:flex; flex-wrap:wrap; gap:4px 20px; margin-top:12px; }
.auth-options button { border:0; padding:10px 0; min-height:44px; background:transparent; text-decoration:underline; text-underline-offset:3px; font-size:var(--text-small); color:var(--ink); text-align:left; }
.password-update { max-width:480px; margin:40px auto; }
.auth-page { max-width:520px; margin:32px auto 48px; padding:28px; border:1px solid var(--line); border-radius:16px; background:white; }
.auth-page h1 { font:800 clamp(1.75rem,3vw,2.25rem)/1.25 Manrope,sans-serif; letter-spacing:-.035em; margin:14px 0 22px; }
.auth-page>p { color:var(--muted); }
.auth-page .login-box { border:0; margin:0; padding:0; }
.auth-page .profile-form { border:0; margin:0; padding-top:8px; }
.back-button { margin-bottom:20px; color:var(--muted); }
.result-celebration { font-size:2rem; margin:18px 0 10px; letter-spacing:.15em; }
.result-card h1 { margin:10px 0 14px; }
.result-rank { min-height:100px; padding:18px; margin:22px 0; border:1px solid #b7c59b; border-radius:12px; background:#f1f5e8; }
.result-rank strong { font:800 1.375rem/1.35 Manrope,sans-serif; }
.result-rank p { font-size:var(--text-small); margin:8px 0 0; }
.achievement { color:#42611e!important; font-weight:700; }
.save-result { text-align:left; background:#f1f5e8; border:1px solid #b7c59b; border-radius:12px; padding:20px; margin:22px 0; }
.save-result h2 { font:800 1.25rem/1.4 Manrope,sans-serif; letter-spacing:-.02em; margin:0 0 10px; }
.save-result p { margin:10px 0 16px; }
.save-result .save-note { font-size:var(--text-small); margin:6px 0 0; }
.save-note .text-button { display:inline; padding:6px 2px; text-decoration:underline; text-underline-offset:3px; }
.return-card { padding:20px; background:#eaece2; border-radius:12px; text-align:left; margin:24px 0; }
.return-card strong { font-size:1.0625rem; }
.return-card p { margin:8px 0 0; }
.theme-section { margin:4px 0 40px; }
.theme-section-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:20px; }
.theme-section-heading h2 { font:800 clamp(1.5rem,3vw,2rem)/1.3 Manrope,sans-serif; letter-spacing:-.035em; margin:12px 0 8px; }
.theme-section-heading p { color:var(--muted); margin:0; }
.theme-section-heading>.text-button { flex-shrink:0; }
.theme-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.theme-card { display:flex; flex-direction:column; align-items:flex-start; text-align:left; gap:10px; border:1px solid #c6ccba; border-radius:14px; padding:24px; background:#eef3e4; color:var(--ink); min-width:0; transition:transform .15s,border-color .15s; }
.theme-card:hover { transform:translateY(-3px); border-color:#73825e; }
.theme-lavender { background:#f0eafb; border-color:#d3c7e7; }
.theme-peach { background:#f8eae1; border-color:#e5cdbf; }
.theme-gold { background:#f7efd4; border-color:#dbc994; }
.theme-blue { background:#e4edf7; border-color:#bfd0e1; }
.theme-icon { font-size:2rem; line-height:1.3; margin-bottom:4px; }
.image-credit { font-size:.7rem; line-height:1.4; color:var(--muted); margin:4px 0 12px; }
.theme-label { font-size:var(--text-meta); font-weight:700; text-transform:uppercase; letter-spacing:.065em; }
.theme-card>strong { font:800 1.375rem/1.3 Manrope,sans-serif; letter-spacing:-.025em; }
.theme-description { font-size:1rem; color:#505b4e; line-height:1.6; }
.theme-card-bottom { width:100%; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; border-top:1px solid #20251e25; padding-top:14px; margin-top:auto; font-size:var(--text-small); }
.theme-card-bottom b { font-size:1rem; }
.theme-note { font-size:var(--text-small)!important; color:var(--muted); margin-top:16px; line-height:1.65; }
.theme-catalog { padding:24px 0; }
.theme-game .back-button { margin:0 0 16px; }
.theme-game .question-meta { flex-wrap:wrap; }
.theme-game .question { margin-top:24px; }
.theme-relaxed { text-transform:none; letter-spacing:0; font-weight:500; font-size:var(--text-small); color:var(--muted); }
.theme-result>.back-button { display:block; margin:0 0 20px; }
.topic-score { padding:16px 0; border-block:1px solid var(--line); margin:20px 0; }
.topic-score>strong { font:800 3rem/1.2 Manrope,sans-serif; letter-spacing:-.04em; }
.topic-score>strong>span { color:var(--muted); font-size:1.5rem; }
.topic-score>p { font-size:var(--text-small); margin:8px 0 0; }
.theme-result>#theme-repeat { margin-top:10px; }
.app-mode .theme-section { max-width:960px; margin:8px auto 32px; }
.playing #auth-panel,.playing .local-mode-note { display:none; }
.app-mode .edition,.app-mode .hero-note,.app-mode .overview,.app-mode .categories,.app-mode .section-heading,.app-mode .bottom-note,.app-mode .footer,.app-mode .hero>div:first-child { display:none; }
.app-mode .header { min-height:80px; }
.app-mode .hero { display:block; max-width:580px; margin-inline:auto; padding:24px 0; }
.app-mode .quiz-card { box-shadow:none; }
.app-mode .game,.app-mode .result-card { margin:24px auto; }
.app-mode .logo img { width:160px; }

@media(min-width:1440px) {
  .hero { gap:48px; padding-block:12px 36px; }
  .card-art { height:130px; }
}
@media(max-width:1080px) {
  .daily-label { display:none; }
  .hero { gap:32px; }
  nav { gap:18px; }
  .overview>div { padding:20px 16px; }
}
@media(max-width:960px) {
  .theme-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .hero { grid-template-columns:minmax(0,1fr); gap:28px; max-width:680px; margin-inline:auto; }
  .hero h1 { max-width:15ch; font-size:clamp(2.25rem,5.8vw,3rem); }
  .intro { max-width:48ch; }
  .quiz-card { padding:28px; }
  .quiz-card h2 { font-size:1.875rem; }
  .categories { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .rules-grid { grid-template-columns:1fr; }
  .rule h2 { margin-top:12px; }
}
@media(max-width:640px) {
  .theme-grid { grid-template-columns:minmax(0,1fr); gap:12px; }
  .theme-card { padding:22px; }
  .theme-section-heading { align-items:flex-start; flex-direction:column; gap:8px; }
  .theme-section-heading .eyebrow { font-size:var(--text-meta); }
  .wrap { padding-inline:20px; }
  .header,.app-mode .header { min-height:0; height:auto; flex-wrap:wrap; gap:8px; padding-top:16px; padding-bottom:10px; }
  .header .logo { margin-inline:auto; }
  .logo img,.app-mode .logo img { width:156px; }
  .header nav { width:100%; display:flex; justify-content:center; gap:clamp(14px,4vw,22px); overflow-x:auto; }
  .nav { font-size:1rem; min-height:52px; padding:10px 0; }
  .edition { flex-direction:column; gap:4px; margin:20px 0; font-size:var(--text-meta); }
  .hero { padding:8px 0 32px; gap:24px; }
  .hero h1 { font-size:clamp(2.125rem,9vw,2.5rem); margin:18px 0; }
  .intro { font-size:1rem; margin-bottom:0; }
  .hero-note { margin-top:16px; gap:8px 16px; }
  .quiz-card { padding:22px 20px; }
  .quiz-card h2 { font-size:1.625rem; }
  .card-art { height:88px; }
  .brain { width:64px; height:64px; border-radius:18px; font-size:54px; box-shadow:6px 6px 0 #b7d04b; }
  .spark { left:22%; top:6px; font-size:24px; }
  .spark.right { right:21%; top:54px; font-size:19px; }
  .card-stats { gap:8px 16px; margin:18px 0; }
  .overview { margin-bottom:32px; }
  .overview>div { flex-direction:column; gap:10px; text-align:center; padding:18px 8px; }
  .stat-icon { width:36px; height:36px; }
  .stat-number { font-size:1.375rem; }
  .stat-text { font-size:var(--text-meta); }
  .section-heading h2 { font-size:1.375rem; }
  .categories { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:28px; }
  .category { padding:18px 14px; }
  .category:last-child { grid-column:1/-1; }
  .category-icon { margin-bottom:10px; }
  .bottom-note { flex-direction:column; align-items:flex-start; gap:12px; padding:20px; margin-bottom:32px; }
  .footer { align-items:flex-start; }
  .beta { width:100%; }
  .question-box { padding:20px; }
  .game { margin:24px auto 40px; }
  .game-top { font-size:var(--text-meta); }
  .answers { grid-template-columns:minmax(0,1fr); }
  .answer { min-height:60px; padding:14px; font-size:1rem; }
  .timer-track { margin-bottom:20px; }
  .result-card { margin:24px auto; padding:24px 18px; }
  .result-celebration { font-size:1.5rem; margin:8px 0; }
  .result-card h1 { font-size:1.75rem; }
  .result-squares { margin:18px 0; }
  .result-stats { margin:20px 0; padding:16px 0; }
  .auth-page { margin:20px auto 32px; padding:22px 20px; }
  .result-stats b { font-size:1.375rem; }
  .result-stats span { font-size:var(--text-meta); }
  .result-squares { letter-spacing:1px; }
  .page-head { margin-top:28px; }
  .history-table,.board-table { font-size:var(--text-small); }
  .history-table th,.history-table td,.board-table th,.board-table td { padding:14px 8px; }
  .test-panel { align-items:flex-start; flex-direction:column; gap:12px; padding:18px; }
  .test-actions { width:100%; }
  .test-actions select { flex:1; min-width:0; }
  .app-mode .hero { padding:20px 0; }
}
@media(max-width:400px) {
  .header.wrap { padding-inline:12px; }
}
@media(max-width:359px) {
  .wrap { padding-inline:16px; }
  .header.wrap { padding-inline:8px; }
  .header nav { gap:14px; }
  .quiz-card,.question-box { padding:18px 16px; }
  .progress { gap:4px; }
  .progress i { width:22px; }
  .overview { grid-template-columns:1fr; }
  .overview>div { flex-direction:row; text-align:left; }
  .overview>div+div { border-left:0; border-top:1px solid var(--line); }
}
@media(prefers-reduced-motion:reduce) { *,*:before,*:after { transition:none!important; animation:none!important; } }

.content-disclaimer { flex-basis:100%; margin:4px 0 0; font-size:var(--text-small); line-height:1.6; color:var(--muted); }
.content-disclaimer a { text-decoration:underline; text-underline-offset:3px; }

textarea.share-output { display:block; width:100%; resize:vertical; border:1px solid var(--line); }

/* Compact account navigation and the completed daily challenge. */
.header-account { flex-shrink:0; min-width:0; }
.header-account .account-line { padding:0; margin:0; border:0; min-height:44px; gap:12px; }
.header-account .account-line>span { display:none; }
.header-account .is-signed-in>span { display:block; max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.header-account .text-button { white-space:nowrap; }
.legal-footer .local-mode-note { margin:12px 0 0; padding:0; }
.completed-mark { display:grid; place-items:center; width:38px; height:38px; margin:20px 0 12px; border-radius:50%; background:#ffffff70; font-size:1.5rem; font-weight:700; }
.completed-score { display:flex; align-items:center; gap:18px; margin:18px 0 8px; }
.completed-score strong { font:800 3.5rem/1 Manrope,sans-serif; letter-spacing:-.055em; }
.completed-score strong span { font-size:1.75rem; letter-spacing:-.025em; }
.completed-score>span { max-width:10ch; font-size:var(--text-small); line-height:1.4; }
.completed-squares { font-size:1.25rem; letter-spacing:3px; margin:12px 0; }
.completed-details { display:flex; gap:24px; font-size:var(--text-small); margin:0 0 20px; }
.completed-review { display:block; width:100%; margin-top:6px; text-align:center; }
.quiz-card-completed .card-bottom { margin-top:6px; }
@media(max-width:640px) {
  .header:has(.header-account),.app-mode .header:has(.header-account) { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; padding-top:10px; padding-bottom:2px; }
  .header:has(.header-account) .logo { margin:0; grid-column:1; grid-row:1; }
  .header:has(.header-account) .header-account { grid-column:2; grid-row:1; }
  .header:has(.header-account) nav { grid-column:1 / -1; grid-row:2; }
  .header-account .is-signed-in>span { display:none; }
  .edition { margin:14px 0; }
  .app-mode .hero { padding-top:16px; }
  .completed-mark { margin-top:14px; }
  .completed-score { margin-top:16px; }
}

.card-edition { display:flex; flex-direction:column; gap:3px; min-width:0; }
.card-edition time { font-size:var(--text-meta); font-weight:400; letter-spacing:0; text-transform:none; }
.hero { padding-top:24px; }

/* Phone layout is the default small-screen experience, without requiring ?app=1. */
body { padding-bottom:env(safe-area-inset-bottom,0px); }
@media(max-width:640px) {
  .wrap { padding-left:max(20px,env(safe-area-inset-left)); padding-right:max(20px,env(safe-area-inset-right)); }
  .header:has(.header-account),.app-mode .header:has(.header-account) { padding-top:calc(10px + env(safe-area-inset-top,0px)); }
  .hero>div:first-child { display:none; }
  .hero,.app-mode .hero { display:block; padding:16px 0 24px; }
  .card-art { height:72px; }
  .spark.right { top:44px; }
  .quiz-card h2 { font-size:clamp(1.375rem,6.3vw,1.625rem); }
  .card-stats { margin:16px 0; }
  .primary,.secondary { min-height:52px; }
  .header .text-button { min-height:48px; }
  input,select,textarea { font-size:1rem; }
  .playing .header:has(.header-account),.playing.app-mode .header:has(.header-account) { display:flex; min-height:60px; padding-top:calc(4px + env(safe-area-inset-top,0px)); padding-bottom:4px; }
  .playing .header:has(.header-account) .logo { display:none; }
  .playing .header nav { width:100%; }
  .game,.app-mode .game { margin:12px auto 28px; }
  .game-top { display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:8px; align-items:center; margin-bottom:12px; }
  .game-top>span:first-child { min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .progress { gap:4px; }.progress i { width:18px; }
  .question-box { padding:18px 16px; }
  .question-meta { position:sticky; top:calc(60px + env(safe-area-inset-top,0px)); background:white; z-index:2; padding:4px 0; }
  .theme-game .question-meta { flex-wrap:nowrap; }
  .timer { min-width:64px; padding:6px 10px; }
  .timer-track { margin:12px 0 16px; }
  h2.question { font-size:clamp(1.25rem,5.5vw,1.5rem); margin:12px 0 18px; line-height:1.4; }
  .answers { gap:10px; }
  .answer { min-height:56px; padding:12px; line-height:1.4; }
  .flag-image,.landscape { height:130px; }
  .feedback:empty { display:none; }
  .theme-game .back-button { margin-bottom:8px; }
  .quiet { text-align:left; margin-top:14px; }
  .result-card,.app-mode .result-card { margin:16px auto 24px; }
  .table-scroll:focus-visible { outline:3px solid #628a1b; outline-offset:3px; }
  #toast { bottom:calc(16px + env(safe-area-inset-bottom,0px)); }
}
@media(max-width:359px) {
  .wrap { padding-left:max(16px,env(safe-area-inset-left)); padding-right:max(16px,env(safe-area-inset-right)); }
  .header.wrap { padding-left:max(8px,env(safe-area-inset-left)); padding-right:max(8px,env(safe-area-inset-right)); }
}
@media(max-width:960px) and (max-height:500px) {
  .playing .header:has(.header-account) { display:flex; min-height:60px; padding-top:calc(4px + env(safe-area-inset-top,0px)); padding-bottom:4px; }
  .playing .header .logo,.playing .header .daily-label { display:none; }
  .playing .header nav { width:100%; justify-content:center; }
  .playing .question-meta { position:sticky; top:calc(60px + env(safe-area-inset-top,0px)); background:white; z-index:2; }
}

/* Public boards and private teams share compact mobile score rows. */
.competition-page { max-width:960px; margin:0 auto 40px; }
.competition-tabs { display:flex; gap:10px; margin-bottom:24px; }
.competition-tabs .secondary { margin:0; width:auto; flex:1; }
.competition-tabs [aria-pressed="true"] { background:var(--ink); color:white; border-color:var(--ink); }
.competition-filters { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:24px 0; }
.competition-filters label { display:flex; flex-direction:column; gap:6px; font-size:var(--text-small); font-weight:700; }
.competition-filters select { width:100%; min-width:0; padding:10px 12px; color:var(--ink); background:white; border:1px solid var(--line); border-radius:8px; }
.score-list { list-style:none; margin:20px 0; padding:0; border:1px solid var(--line); border-radius:12px; background:white; overflow:hidden; }
.score-list li { display:grid; grid-template-columns:42px minmax(0,1fr) auto; gap:14px; align-items:center; padding:16px; }
.score-list li+li { border-top:1px solid var(--line); }.score-list .score-me { background:#eff4df; }
.score-player { min-width:0; }.score-player strong { display:block; overflow-wrap:anywhere; }
.score-player small,.score-points small { display:block; font-size:var(--text-meta); font-weight:400; color:var(--muted); }
.score-points { text-align:right; font-variant-numeric:tabular-nums; }
.league-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:24px 0; }
.league-card { display:flex; flex-direction:column; gap:10px; text-align:left; padding:24px; border:1px solid var(--line); background:white; color:var(--ink); border-radius:12px; min-width:0; }
.league-card strong { font:800 1.375rem/1.4 Manrope,sans-serif; overflow-wrap:anywhere; }.league-card span { color:var(--muted); font-size:var(--text-small); }
.league-forms { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; margin:28px 0; }
.league-forms form { display:flex; flex-direction:column; min-width:0; margin:0; border:1px solid var(--line); border-radius:12px; padding:24px; background:white; }
.league-forms h2 { font-size:1.25rem; margin:0 0 20px; }
.league-forms input { flex-shrink:0; margin:0 0 16px; }
.league-forms button { display:flex; align-items:center; justify-content:center; min-height:52px; margin: auto 0 0; }
.answer-revealed:disabled { opacity:1; cursor:default; }
.answer-revealed:not(.correct):not(.wrong) { opacity:.48; }
.answer.correct { background:#416d41; border-color:#416d41; color:white; }
.answer.correct b { color:white; background:#2f522e; border-color:#ffffff55; }
.account-menu-wrap { position:relative; }
.account-menu { position:absolute; right:0; top:calc(100% + 8px); z-index:100; width:min(280px,calc(100vw - 32px)); padding:8px; background:#fffef9; border:1px solid var(--line); border-radius:14px; box-shadow:0 12px 32px #20251e24; text-align:left; }
.account-menu[hidden] { display:none; }
.account-menu-identity { display:flex; flex-direction:column; gap:5px; padding:12px; border-bottom:1px solid var(--line); margin-bottom:6px; overflow-wrap:anywhere; }
.account-menu-identity strong { color:var(--ink); font-size:1rem; }
.account-menu-email { color:var(--muted); font-size:.875rem; line-height:1.4; }
.account-menu-action { display:block; width:100%; min-height:48px; padding:12px; border:0; border-radius:8px; background:transparent; color:var(--ink); font:inherit; font-weight:600; text-align:left; cursor:pointer; }
.account-menu-action:hover,.account-menu-action:focus-visible { background:#eff4df; }
.account-menu-action:focus-visible { outline:2px solid #6a841a; outline-offset:-2px; }
.account-menu-logout { border-top:1px solid var(--line); border-radius:0 0 8px 8px; color:#873c32; }

/* Shared page frame: navigation never changes the width of the content. */
:root { --page-width:1040px; }
.wrap { max-width:var(--page-width); }
#main.wrap { padding-top:32px; padding-bottom:40px; min-height:calc(100svh - 250px); }
.app-mode #main>.hero { width:100%; max-width:640px; margin:0 auto 28px; padding:0; }
.app-mode #main>.theme-section { width:100%; max-width:none; margin:0 0 32px; }
#main .competition-page,#main .account-page { width:100%; max-width:none; margin:0 0 32px; }
#main>.page-head { margin:0 0 28px; }
#main>.rules-grid { width:100%; margin-top:0; }
#main>.notice,#main>.table-scroll { width:100%; }
.page-head h1 { font:800 clamp(1.875rem,3vw,2.5rem)/1.2 Manrope,sans-serif; letter-spacing:-.035em; margin:8px 0 12px; }
.page-head p { max-width:68ch; margin:0; color:var(--muted); }
.competition-tabs { margin-top:24px; }
.quiz-card { box-shadow:0 4px 16px #20251e06; }
.quiz-card p { max-width:68ch; }
.rule { background:#fffef9; border:1px solid var(--line); border-radius:14px; padding:24px; }
.rule h2 { font-size:1.25rem; line-height:1.35; }
.rule p { color:var(--muted); line-height:1.7; }
.theme-card { transition:border-color .15s,box-shadow .15s; }
.theme-card:hover { box-shadow:0 4px 14px #20251e0c; }
@media(min-width:761px){
 .app-mode .quiz-card:not(.quiz-card-completed) { display:grid; grid-template-columns:120px minmax(0,1fr); column-gap:28px; }
 .app-mode .quiz-card:not(.quiz-card-completed) .card-top { grid-column:1/-1; margin-bottom:24px; }
 .app-mode .quiz-card:not(.quiz-card-completed) .card-art { grid-column:1; grid-row:2/4; height:130px; }
 .app-mode .quiz-card:not(.quiz-card-completed)>h2 { grid-column:2; align-self:end; margin-bottom:10px; }
 .app-mode .quiz-card:not(.quiz-card-completed)>p { grid-column:2; }
 .app-mode .quiz-card:not(.quiz-card-completed)>:is(.card-stats,.player-line,.primary,.card-bottom) { grid-column:1/-1; }
 .app-mode .quiz-card .spark { display:none; }
}
@media(max-width:640px){
 #main.wrap { padding-top:20px; padding-bottom:24px; }
 .app-mode #main>.hero { margin-bottom:24px; }
 .page-head h1 { font-size:1.875rem; }
 .rule { padding:20px; }
 .header nav { display:grid; grid-template-columns:repeat(4,max-content); gap:16px; justify-content:center; }
 .header nav .nav { min-height:48px; padding-inline:0; }
}
@media(max-width:359px){.header nav{gap:12px;}.header nav .nav{font-size:.9375rem;}}
.answer.wrong { background:#fbe9e5; border-color:#b64a3f; color:#792c25; }
.answer-mark { margin-left:auto; font-size:1.4rem; font-weight:800; }
.answer-feedback { margin-top:20px; padding:16px; border:1px solid #6c9866; border-radius:12px; background:#edf3e9; color:#355e32; }
.answer-feedback.is-wrong { background:#fff3e9; border-color:#d6ad85; color:#704a28; }
.answer-feedback strong { display:block; font-size:1.0625rem; }
.answer-feedback p { margin:8px 0 0; line-height:1.55; }
.game .question-next { width:auto; min-width:180px; justify-content:center; margin:24px auto 0; }
.app-mode .footer { display:flex; justify-content:center; padding:16px; border:0; color:var(--muted); font-size:var(--text-small); text-align:center; }
.app-mode .footer .logo,.app-mode .footer .beta { display:none; }
@media(max-width:640px){.game .question-next{width:100%;}.answer-feedback{padding:14px;}}
.league-title { font:800 clamp(1.75rem,4vw,2.5rem)/1.3 Manrope,sans-serif; overflow-wrap:anywhere; }
.league-invite { margin:24px 0; padding:24px; border:1px solid var(--line); border-radius:12px; background:#eff4df; }.invite-code { overflow-wrap:anywhere; letter-spacing:.08em; }
.league-members { margin:24px 0; border-block:1px solid var(--line); }.league-members summary { min-height:52px; padding:14px 0; cursor:pointer; font-weight:700; }
.league-members ul { list-style:none; padding:0; }.league-members li { display:flex; align-items:center; gap:12px; justify-content:space-between; border-top:1px solid var(--line); padding:8px 0; }.league-members li span { overflow-wrap:anywhere; min-width:0; }
.league-actions { display:flex; gap:16px; align-items:center; }.league-actions button { width:auto; min-height:48px; margin:0; }
.danger-action { color:var(--bad); }#league-confirm:not(:empty) { padding:20px; background:#fff2df; border-radius:10px; margin:20px 0; }
#league-message,#theme-feedback { overflow-wrap:anywhere; }
@media(max-width:640px) {
  .competition-tabs { gap:8px; }.competition-tabs button { padding:12px 8px; font-size:.875rem; min-height:52px; }
  .competition-filters { gap:12px; }.score-list li { grid-template-columns:28px minmax(0,1fr) auto; gap:10px; padding:14px 12px; }
  .league-grid,.league-forms { grid-template-columns:minmax(0,1fr); }.league-forms form,.league-invite { padding:20px 16px; }
  .league-members .text-button { flex-shrink:0; min-height:48px; }
}

.competition-rules { margin:18px 0; color:var(--muted); font-size:var(--text-small); }
.competition-rules summary { min-height:44px; padding:10px 0; cursor:pointer; font-weight:700; }
.pending-invite { padding:20px; border:1px solid #b7c59b; background:#eff4df; border-radius:12px; margin-bottom:24px; }
.pending-invite h2 { margin-top:0; font-size:1.375rem; }

/* Personal profile: large controls, earned badges and separate notification choices. */
.account-page { max-width:1060px; margin:20px auto 40px; }
.profile-heading { display:flex; align-items:center; gap:20px; margin:20px 0 24px; }
.profile-heading>div { min-width:0; }.profile-heading h1 { font:800 clamp(1.75rem,4vw,2.5rem)/1.3 Manrope,sans-serif; margin:6px 0; overflow-wrap:anywhere; }.profile-heading p { margin:0; color:var(--muted); overflow-wrap:anywhere; }
.profile-avatar { display:grid; place-items:center; flex-shrink:0; width:76px; height:76px; border-radius:22px; background:var(--green); font-size:2.75rem; }
.profile-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin-bottom:24px; }
.profile-stats>div { min-width:0; padding:18px; background:white; border:1px solid var(--line); border-radius:10px; text-align:center; }.profile-stats strong { display:block; font:800 1.75rem/1.3 Manrope,sans-serif; }.profile-stats span { display:block; font-size:var(--text-meta); color:var(--muted); margin-top:6px; }
.profile-layout { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; align-items:start; }
.profile-card { min-width:0; background:white; border:1px solid var(--line); border-radius:14px; padding:24px; }.profile-card h2 { font:800 1.375rem/1.4 Manrope,sans-serif; margin:0 0 16px; }.profile-card p { line-height:1.7; }.profile-card p:empty { margin:0; }
.profile-section-title { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }.profile-section-title>span { color:var(--muted); font-size:var(--text-small); }
.avatar-picker { border:0; padding:0; margin:20px 0; }.avatar-picker legend { font-weight:700; margin-bottom:10px; }.avatar-picker>div { display:grid; grid-template-columns:repeat(auto-fit,minmax(44px,1fr)); gap:8px; }.avatar-picker button { min-width:0; min-height:48px; padding:4px; font-size:1.5rem; background:var(--paper); border:1px solid var(--line); border-radius:9px; }.avatar-picker [aria-pressed="true"] { border:2px solid var(--ink); background:var(--green); }
.badge-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:12px; }
.profile-badge { border:1px dashed var(--line); border-radius:10px; padding:16px; background:var(--paper); min-width:0; }.profile-badge>span { display:block; font-size:1.75rem; }.profile-badge h3 { margin:8px 0; font-size:1rem; }.profile-badge p { font-size:var(--text-small); margin:8px 0; color:var(--muted); }.profile-badge small { display:block; font-size:var(--text-meta); margin-top:8px; }.profile-badge progress { display:block; width:100%; height:7px; margin-top:16px; accent-color:#739a31; }.badge-earned { border-style:solid; border-color:#bacb96; background:#f1f6e5; }
.referral-counts { display:flex; flex-wrap:wrap; gap:12px 24px; margin:20px 0; }.referral-counts span { font-size:var(--text-small); color:var(--muted); }.referral-counts strong { font-size:1.5rem; color:var(--ink); display:block; }
.preference-toggle { display:flex; align-items:flex-start; gap:12px; cursor:pointer; min-height:52px; padding:8px 0; }.preference-toggle input { flex-shrink:0; width:22px; height:22px; min-height:22px; margin:3px 0 0; accent-color:var(--ink); }.preference-toggle span { min-width:0; line-height:1.6; }
.time-label { display:block; font-weight:700; margin:16px 0 8px; }.time-label small { display:block; font-size:var(--text-small); font-weight:400; color:var(--muted); }.profile-card input[type="time"] { display:block; width:100%; padding:10px 12px; border:1px solid #87956e; border-radius:8px; color:var(--ink); background:white; min-height:48px; }
.push-settings { margin-top:24px; border-top:1px solid var(--line); padding-top:12px; }.push-settings .text-button { display:block; width:100%; text-align:left; }.profile-card a { text-decoration:underline; text-underline-offset:3px; }
.profile-card .secondary:disabled { opacity:.65; }.profile-card [role="status"] { overflow-wrap:anywhere; }
@media(max-width:760px) { .profile-layout { grid-template-columns:minmax(0,1fr); } }
@media(max-width:640px) {
  .account-page { margin-top:12px; }.profile-heading { gap:14px; margin:16px 0 20px; }.profile-avatar { width:56px; height:56px; border-radius:16px; font-size:2rem; }.profile-heading .eyebrow { font-size:.75rem; }.profile-heading h1 { font-size:1.625rem; }.profile-heading p { font-size:var(--text-small); }
  .profile-stats { gap:8px; }.profile-stats>div { padding:14px 6px; }.profile-stats strong { font-size:1.375rem; }.profile-stats span { font-size:.75rem; }
  .profile-card { padding:20px 16px; }.profile-layout { gap:16px; }.profile-card .text-button { min-height:48px; }
}

.profile-shortcuts { display:flex; gap:8px; overflow-x:auto; margin:0 0 24px; padding-bottom:4px; overscroll-behavior-inline:contain; }
.profile-shortcuts a { flex-shrink:0; min-height:44px; padding:10px 14px; border:1px solid var(--line); border-radius:8px; background:white; font-size:var(--text-small); font-weight:700; }
.profile-card { scroll-margin-top:140px; }

/* Compact profile: an overview and five expandable settings rows. */
.share-dialog { width:min(460px,calc(100% - 24px)); max-height:calc(100dvh - 32px); overflow:auto; padding:24px; border:1px solid var(--line); border-radius:20px; background:var(--paper); color:var(--ink); box-shadow:0 20px 80px #0003; }
.share-dialog::backdrop { background:#20251e88; }
.share-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.share-heading h2 { margin:0; font:800 1.4rem/1.3 Manrope,sans-serif; }
.share-heading button { min-width:44px; min-height:44px; flex-shrink:0; }
.share-intro { margin:8px 0 20px; color:var(--muted); }
.share-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.share-options .secondary { display:flex; justify-content:center; align-items:center; text-align:center; min-height:52px; margin:0; padding:12px; font-size:.9375rem; text-decoration:none; border-radius:10px; }
.share-options .secondary:first-child { grid-column:1/-1; background:var(--ink); color:white; }
.share-status { margin-top:12px; font-size:.875rem; overflow-wrap:anywhere; }
.share-help { color:var(--muted); font-size:.8125rem; line-height:1.55; margin:16px 0 0; }
@media(max-width:640px) { .share-dialog { margin:auto auto 12px; padding:18px; } }
.account-page { max-width:860px; }
.profile-overview { border:1px solid var(--line); border-radius:16px; background:white; padding:24px; margin:16px 0 20px; }
.profile-heading { margin:0 0 22px; gap:16px; }
.profile-heading .eyebrow { font-size:.7rem; letter-spacing:.08em; }
.profile-heading h1 { font-size:clamp(1.5rem,3vw,2rem); margin:4px 0; }
.profile-heading p { font-size:.875rem; }
.profile-edit-link { margin-left:auto; flex-shrink:0; font-weight:700; min-height:44px; }
.profile-stats { margin:0; gap:0; padding-top:18px; border-top:1px solid var(--line); }
.profile-stats>div { padding:0 12px; border:0; border-radius:0; background:transparent; }
.profile-stats>div+div { border-left:1px solid var(--line); }
.profile-stats strong { font-size:1.5rem; }
.profile-stats span { margin-top:4px; }
.profile-layout { display:flex; flex-direction:column; gap:10px; }
.profile-fold { width:100%; padding:0; border-radius:12px; overflow:clip; }
.profile-fold>summary { display:flex; align-items:center; gap:14px; padding:17px 20px; min-height:76px; cursor:pointer; list-style:none; }
.profile-fold>summary::-webkit-details-marker,.profile-badge>summary::-webkit-details-marker { display:none; }
.profile-fold>summary:hover { background:#f7f9f2; }
.profile-fold>summary:focus-visible,.profile-badge>summary:focus-visible { outline:3px solid #739a31; outline-offset:-3px; border-radius:10px; }
.profile-fold-icon { display:grid; place-items:center; width:40px; height:40px; flex-shrink:0; border-radius:12px; background:var(--paper); font-size:1.3rem; }
.profile-fold-label { min-width:0; flex:1; }
.profile-fold-label strong { display:block; font-size:1rem; }
.profile-fold-label small { display:block; color:var(--muted); font-size:.8125rem; margin-top:3px; }
.profile-fold-arrow { font-size:1.4rem; flex-shrink:0; }
.profile-fold[open]>.profile-fold-arrow { transform:rotate(180deg); }
.profile-fold[open]>summary .profile-fold-arrow { transform:rotate(180deg); }
.profile-fold[open]>summary { border-bottom:1px solid var(--line); }
.profile-fold-body { padding:20px; }
.profile-fold-body>.profile-form { padding:0; margin:0; border:0; }
.profile-fold-body h2 { font-size:1.125rem; margin-bottom:12px; }
.profile-fold-body h3 { font-size:1rem; }
.profile-fold-body p { font-size:.9375rem; line-height:1.6; }
.profile-fold .primary,.profile-fold .secondary { margin-top:12px; min-height:48px; }
.profile-fold-body .badge-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.profile-badge { padding:0; align-self:start; }
.profile-badge>summary { display:flex; align-items:center; gap:10px; padding:12px; cursor:pointer; list-style:none; min-height:76px; }
.profile-badge>summary>span:first-child { font-size:1.65rem; flex-shrink:0; }
.profile-badge h3 { font-size:.875rem; margin:0; line-height:1.35; }
.profile-badge summary small { margin-top:3px; font-size:.75rem; color:var(--muted); }
.profile-badge>p,.profile-badge>small { margin:0 12px 12px; }
.profile-badge>progress { width:calc(100% - 24px); margin:8px 12px; }
.notification-state { display:flex; gap:10px; flex-wrap:wrap; margin-bottom:20px; }
.notification-state>span { background:var(--paper); border-radius:6px; padding:6px 10px; font-size:.8125rem; color:var(--muted); }
.notification-state strong { color:var(--ink); margin-left:4px; }
.profile-email-block { border-top:1px solid var(--line); padding-top:20px; margin-top:20px; }
.profile-fold-body .theme-note { font-size:.8125rem; }
@media(max-width:640px) {
  .account-page { margin-top:4px; }
  .profile-overview { padding:18px 14px; margin-top:8px; margin-bottom:14px; }
  .profile-heading { flex-wrap:wrap; gap:12px; margin-bottom:16px; }
  .profile-heading>div { flex:1; }
  .profile-heading .eyebrow { display:none; }
  .profile-heading h1 { font-size:1.5rem; }
  .profile-heading p { font-size:.8125rem; }
  .profile-avatar { width:48px; height:48px; border-radius:14px; font-size:1.8rem; }
  .profile-edit-link { width:100%; text-align:center; background:var(--paper); border-radius:8px; min-height:44px!important; }
  .profile-stats { padding-top:14px; }
  .profile-stats>div { padding:0 5px; }
  .profile-stats strong { font-size:1.25rem; }
  .profile-stats span { font-size:.6875rem; line-height:1.4; }
  .profile-fold>summary { gap:10px; padding:14px; min-height:76px; }
  .profile-fold-label small { font-size:.75rem; }
  .profile-fold-body { padding:16px 14px; }
  .profile-fold-body .badge-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .profile-badge>summary { gap:7px; padding:10px 8px; }
  .profile-badge>summary>span:first-child { font-size:1.35rem; }
  .profile-badge h3 { font-size:.8125rem; }
  .profile-fold .primary,.profile-fold .secondary { width:100%; }
}
.board-archive { margin-top:36px; padding-top:28px; border-top:1px solid var(--line); }
.board-archive h2 { font-size:clamp(1.4rem,3vw,1.8rem); margin:8px 0; }
.archive-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; }
.archive-grid h3 { font-size:1.0625rem; margin:0 0 14px; }
.archive-period { background:#fff; border:1px solid var(--line); border-radius:12px; margin-bottom:10px; overflow:hidden; }
.archive-period>summary { cursor:pointer; padding:16px; min-height:52px; font-weight:700; }
.archive-period>summary span { display:block; padding-left:18px; color:var(--muted); font-size:.8125rem; font-weight:400; margin-top:4px; }
.archive-period .score-list { margin:0; border:0; border-radius:0; }
.archive-period .score-list li { padding:12px; gap:10px; }
.archive-period .score-player { min-width:0; overflow-wrap:anywhere; }
.archive-empty { color:var(--muted); line-height:1.6; }
.footer-year { font-size:.8125rem; color:var(--muted); margin-top:10px; text-align:center; }
@media(max-width:640px) { .archive-grid { grid-template-columns:1fr; gap:20px; } .board-archive { margin-top:28px; padding-top:24px; } }
.all-time-progress { padding:14px 16px; border:1px solid var(--line); border-radius:10px; background:#eef3e5; line-height:1.6; }
.community-card { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:20px 32px; border:1px solid var(--line); border-radius:16px; padding:24px; margin:0 0 32px; background:#fff; }
.community-intro h2 { font-size:clamp(1.25rem,2.5vw,1.5rem); margin:8px 0 10px; }
.community-intro>p { color:var(--muted); line-height:1.6; margin:0; }
.community-count { display:flex; flex-direction:column; justify-content:center; gap:10px; }
.community-number { font-size:1.125rem; }
.community-count progress { width:100%; height:10px; accent-color:#739b24; }
.community-count>span,.community-count>small { font-size:.8125rem; color:var(--muted); line-height:1.5; }
.community-terms { grid-column:1/-1; color:var(--muted); font-size:.75rem; line-height:1.6; margin:0; border-top:1px solid var(--line); padding-top:14px; }
@media(max-width:640px) { .community-card { grid-template-columns:1fr; gap:18px; padding:20px; margin-bottom:24px; } .community-intro .eyebrow { font-size:.65rem; } }