/* Crisp paper, ink, green and sunshine. */
:root { --ink: #142019; --green: #b9ee79; --green-dark: #17663b; --yellow: #ffe16b; --line: #d4dbd2; --muted: #4b554e; color: var(--ink); background: #fafbf8; }
body { color: var(--ink); }
::selection { background: var(--yellow); color: var(--ink); }
:focus-visible { outline: 3px solid #197448; outline-offset: 4px; }
input:focus { border-color: #197448; box-shadow: 0 0 0 4px #b9ee7950; }
input::placeholder { color: #647067; }
input,select { border: 1.5px solid #9aa99b; background: #fff; color: var(--ink); }
input:disabled { background: #f1f3ee; color: #566257; }
button:disabled { opacity: 1; color: #647067; background-color: #f0f3ec; }
.brand { font-size: 20px; color: #131b16; }
.title-dot { color: #23854c; }
.quiet,.connection,.eyebrow,.count,.field-label,.room-meta { color: #3e4d41; }
.quiet { font-size: 13px; font-weight: 550; }
.eyebrow,.connection,.field-label { font-size: 12px; }
.count { padding: 3px 8px; border-radius: 6px; background: var(--yellow); color: #19221a; font-weight: 650; }
.ambient { background: radial-gradient(circle,#e9f7db70,transparent 68%); }
.pixel-art i { background: #d9efc5; }
.pixel-art i:nth-child(3n) { background: #8bd34e; }
.pixel-art i:nth-child(4n) { background: #ffe16b; }
.pixel-art i:nth-child(5n) { background: #2b7346; }
.menu-view h1 { font-weight: 750; letter-spacing: -3px; }
.mode-button,.room-card { border: 1.5px solid #293a2e; background: #fff; box-shadow: 0 3px 0 #293a2e0c; }
.mode-button:hover,.room-card:hover:enabled { border-color: #142019; background: #f2fbe8; box-shadow: 0 5px 0 #14201910; }
.mode-icon { color: var(--ink); }
.primary { background: #17241b; color: #fff; border: 1.5px solid #17241b; font-weight: 650; }
.primary span { color: var(--green); }
.primary:hover:enabled { background: #255b37; border-color: #255b37; box-shadow: 0 4px 0 #14201916; }
.primary:disabled { background: #e5ecdf; color: #586458; border-color: #d0dac8; }
.primary:disabled span { color: inherit; }
.secondary { background: var(--yellow); color: #17241b; border: 1.5px solid #28392d; font-weight: 650; }
.secondary:hover:enabled { background: #ffda43; }
.section-heading h1 { font-weight: 700; }
.games-view { width: min(100%,900px); }
.create-room { border-color: #bccbb6; background: #eef7e6; }
.room-card small { color: #455448; font-size: 12px; }
.room-card.bot-room { background: #fcfff8; }
.bot-label { display: inline-block; vertical-align: middle; margin-left: 5px; padding: 3px 6px; border: 1px solid #83a665; border-radius: 5px; background: #d9f4b9; color: #15210e; font-size: 10px; font-weight: 700; white-space: nowrap; }
.player-chip.bot { background: #fff4bd; border-color: #c7af4d; }
.empty-state,.feed-empty { color: #4c5c4f; }
.play-view { width: min(100%,600px); }
.play-view.online { width: min(100%,950px); }
.online .game-layout { grid-template-columns: minmax(0,600px) minmax(250px,1fr); }
.game-heading { margin-bottom: 19px; }
.game-heading h1 { color: #131e16; font-size: 24px; font-weight: 700; letter-spacing: -.7px; }
.round-bar { margin-bottom: 12px; font-size: 13px; font-weight: 600; color: #344738; }
#timer { background: var(--yellow); color: #17241b; border: 1px solid #dec85e; padding: 5px 10px; min-width: 63px; justify-content: center; font-size: 19px; border-radius: 8px; }
.timer-unit { color: #3c492b; opacity: 1; font-size: 12px; }
#timer.urgent { background: #ffe16b; border-color: #1a2a1e; }
.picture { background: #fff; border: 1.5px solid #b4c4ac; border-radius: 18px; box-shadow: 0 4px 0 #18251c08; }
.picture.text-game { min-height: 340px; }
.question-zone { padding: 28px; min-height: 340px; gap: 20px; justify-content: center; }
.question-label { display: flex; align-items: center; gap: 9px; color: #24482e; font-size: 12px; font-weight: 700; letter-spacing: .5px; line-height: 1.5; }
.question-label svg { width: 21px; height: 21px; flex: 0 0 21px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.question-zone > .question-label { align-self: flex-start; padding: 7px 11px; border-radius: 7px; background: #e4f5d6; }
.question-main { color: #101b14; font-size: clamp(23px,4vw,29px); font-weight: 650; line-height: 1.4; letter-spacing: -.65px; }
.question-main.long { font-size: clamp(19px,3vw,24px); line-height: 1.5; }
.quiz-note { color: #3e5041; font-size: 13px; }
.game-photo { position: relative; margin: 0; background: #f3f6ee; border: 1px solid #d8e1d1; border-radius: 12px; overflow: hidden; }
.game-photo img { display: block; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: scale(1.025); transition: opacity .45s,transform .7s var(--ease); }
.game-photo.photo-ready img { opacity: 1; transform: scale(1); }
.hero-photo { width: 100%; height: 225px; }
.answer-photo { height: 190px; animation: content-arrive .6s var(--ease) both; }
.photo-credit { position: absolute; bottom: 6px; right: 6px; margin: 0; z-index: 1; max-width: calc(100% - 12px); font-size: 10px; line-height: 1.5; color: #fff; }
.photo-credit summary { list-style: none; margin-left: auto; background: #15231ee8; color: #fff; padding: 4px 7px; border-radius: 5px; font-weight: 550; }
.photo-credit summary::-webkit-details-marker { display: none; }
.photo-credit[open] { background: #13231eef; padding: 8px; border-radius: 7px; }
.photo-credit[open] summary { padding: 0; margin-bottom: 6px; }
.photo-credit a { display: block; max-height: 74px; overflow-y: auto; color: #fff; text-underline-offset: 2px; overflow-wrap: anywhere; }
.compare-pair { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; align-items: stretch; }
.compare-card { display: flex; flex-direction: column; background: #f9fbf5; border: 1.5px solid #cedcc5; padding: 16px; }
.compare-card:nth-child(2) { background: #fffdf0; border-color: #e7da9a; }
.compare-photo { height: 137px; width: 100%; margin-bottom: 15px; background: #fff; }
.compare-card .question-label { font-size: 11px; color: #3d4e3f; margin-bottom: 7px; }
.compare-card strong { color: #111f16; font-size: 18px; font-weight: 650; line-height: 1.35; overflow-wrap: anywhere; }
.compare-value { color: #1c6033; font-size: clamp(20px,3vw,25px); font-weight: 700; letter-spacing: -.6px; line-height: 1.35; overflow-wrap: anywhere; }
.unknown-value { color: #66550e; }
.measurement-note { color: #465641; font-size: 11px; }
.compare-card.comparison-answer { border-color: #3d8c38; background: #e4f8d3; }
.comparison-track { flex-shrink: 0; height: 5px; margin-top: auto; padding-top: 0; margin-block-start: 14px; background: #dbe5d4; }
.comparison-track i { background: #569934; }
.comparison-answer .comparison-track i { background: #226c36; }
.choice-actions { gap: 12px; margin-top: 16px; }
.choice-button { display: flex; align-items: center; justify-content: center; gap: 12px; background: var(--green); color: #142019; border: 1.5px solid #263c24; font-size: 17px; font-weight: 650; min-height: 56px; box-shadow: 0 3px 0 #1a321b12; }
.choice-button:nth-child(2) { background: var(--yellow); border-color: #53491e; }
.choice-button::before { font-size: 21px; line-height: 1; font-weight: 450; }
.choice-button[data-choice="higher"]::before { content: '↑'; }
.choice-button[data-choice="lower"]::before { content: '↓'; }
.choice-button[data-choice="before"]::before { content: '←'; }
.choice-button[data-choice="after"]::before { content: '→'; }
.choice-button[data-choice="true"]::before { content: '✓'; }
.choice-button[data-choice="false"]::before { content: '×'; }
.choice-button:hover:enabled { background: #a6e55b; border-color: #172c1c; transform: translateY(-3px); box-shadow: 0 6px 0 #1a321b12; }
.choice-button:nth-child(2):hover:enabled { background: #ffda47; }
.choice-button:disabled { background: #f1f3ed; color: #5d685c; border-color: #d0d8ca; box-shadow: none; }
.choice-button.answer-choice { background: var(--green); border: 2px solid #296236; color: #142019; box-shadow: 0 3px 0 #266d3515; }
.choice-button.chosen:not(.answer-choice):disabled { opacity: 1; background: #fff2bc; color: #594b1b; border-color: #a68b28; }
#guess-form { margin-top: 16px; }
#guess-form input { font-size: 17px; border: 1.5px solid #9cab96; }
#guess-form .primary { font-size: 15px; }
#result { color: #223b2a; font-size: 15px; font-weight: 600; }
#result[data-outcome="correct"] { color: #155e32; }
#result[data-outcome="correct"]::before { content: '✓'; display: inline-grid; place-items: center; width: 23px; height: 23px; background: var(--green); border-radius: 50%; margin-right: 8px; }
#result[data-outcome="wrong"] { color: #66520d; }
.bottom { align-items: center; min-height: 62px; }
.bottom .quiet { font-size: 14px; }
.bottom.round-finished .quiet:enabled { color: #fff; background: #17241b; padding: 10px 16px; border-radius: 8px; font-weight: 650; }
.answer-detail { color: #2f4736; background: #eef8e7; padding: 12px 15px; border-radius: 9px; font-size: 14px; line-height: 1.6; }
.year-trail { display: flex; flex-wrap: wrap; gap: 7px; }
.year-trail:empty { display: none; }
.year-guess { padding: 6px 10px; border-radius: 7px; background: #fff2b4; border: 1px solid #d1b64e; color: #403812; font-size: 13px; font-weight: 600; animation: chip-in .35s var(--ease); }
.clue-row { color: #172b1c; font-size: 17px; line-height: 1.6; }
.clue-number { flex-basis: 27px; width: 27px; height: 27px; margin-top: 1px; font-size: 12px; color: #1e3f29; background: #fff1aa; border-color: #e2ce77; font-weight: 700; }
.clue-row.locked { color: #52654d; font-size: 14px; }
.clue-row.unlocked .clue-number { background: #d2f2b6; border-color: #8cbd68; color: #1d4427; }
.detective-link { background: #f3f8eb; color: #193020; border-color: #c4d5b5; font-size: 15px; padding: 13px 15px; }
.detective-link:nth-child(even) { background: #fff8d6; border-color: #e7d997; }
.bingo-game .question-zone { padding: 22px; gap: 16px; }
.bingo-cell { background: #f8fbf2; border: 1.5px solid #b6c8a9; min-height: 85px; }
.bingo-cell strong { color: #172f1d; font-size: 14px; font-weight: 650; }
.bingo-cell small { color: #244b2c; font-size: 11px; }
.bingo-cell.filled { background: var(--green); border-color: #3b7135; }
.explorer { border-color: #bfcdb4; }
.wiki-navigation { display:flex;align-items:center;gap:5px;padding:8px 10px;background:#f8f9fa;border:1px solid #a2a9b1;border-bottom:0;border-radius:6px 6px 0 0; }
.wiki-navigation .explorer-back { min-width:32px;min-height:32px;border:1px solid #a2a9b1;border-radius:3px;background:#fff;color:#202122;padding:3px 8px; }
.wiki-navigation .explorer-back:disabled { opacity:.35; }
.wiki-breadcrumb { color:#202122;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-left:7px; }
.wiki-viewport { max-height:620px;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;background:#fff;border:1px solid #a2a9b1;border-radius:0 0 6px 6px;scroll-padding-top:12px; }
.wiki-paper { color:#202122;padding:22px 25px;font-family:Arial,Helvetica,sans-serif;font-size:14px;line-height:1.65;overflow-wrap:break-word;text-align:left; }
.wiki-paper .wiki-title { color:#101418;font:normal 29px/1.25 Georgia,'Times New Roman',serif;margin:0 0 7px;padding-bottom:6px;border-bottom:1px solid #a2a9b1; }
.wiki-tabs { display:flex;justify-content:space-between;gap:12px;font-size:12px;border-bottom:1px solid #c8ccd1;padding:5px 0 8px;margin-bottom:10px; }
.wiki-active-tab { color:#202122;border-bottom:2px solid #202122;padding-bottom:8px;margin-bottom:-9px; }
.wiki-paper .wiki-byline { color:#54595d;font-size:11px;margin:0 0 16px; }
.wiki-paper a { color:#36c;cursor:pointer;text-decoration:none; }
.wiki-paper a:hover { text-decoration:underline; }
.wiki-paper a:focus-visible { outline:2px solid #36c;outline-offset:2px; }
.wiki-paper a[aria-disabled="true"] { cursor:default; }
.wiki-article::after { content:'';display:block;clear:both; }
.wiki-article p { margin:.5em 0 1em;line-height:1.65; }
.wiki-article h2,.wiki-article h3,.wiki-article h4 { color:#101418;text-align:left;margin:1em 0 .4em;line-height:1.3; }
.wiki-article h2 { font:normal 23px/1.3 Georgia,'Times New Roman',serif;border-bottom:1px solid #a2a9b1;clear:both; }
.wiki-article h3 { font-size:17px;font-weight:700; }
.wiki-article ul,.wiki-article ol { padding-left:1.7em;margin:.4em 0 1em; }
.wiki-article li { margin:.2em 0; }
.wiki-article dl { margin:.6em 0; }.wiki-article dd { margin-left:1.5em; }
.wiki-article img { max-width:100%;height:auto;object-fit:contain;vertical-align:middle; }
.wiki-article figure,.wiki-article .thumb { max-width:240px;float:right;clear:right;margin:.5em 0 1em 1em;background:#f8f9fa;border:1px solid #c8ccd1;padding:4px; }
.wiki-article figcaption,.wiki-article .thumbcaption { font-size:11px;line-height:1.45;margin-top:5px; }
.wiki-article table { border-collapse:collapse;max-width:100%;font-size:12px;margin:1em 0; }
.wiki-article td,.wiki-article th { padding:5px 7px;vertical-align:top;overflow-wrap:anywhere; }
.wiki-article th { background:#eaecf0;font-weight:600; }
.wiki-article .wikitable { border:1px solid #a2a9b1; }.wiki-article .wikitable td,.wiki-article .wikitable th { border:1px solid #a2a9b1; }
.wiki-article .infobox { float:right;clear:right;width:235px;margin:0 0 14px 17px;border:1px solid #a2a9b1;background:#f8f9fa;line-height:1.45; }
.wiki-article .infobox caption { font-weight:700;font-size:15px; }.wiki-article .infobox img { max-width:210px; }
.wiki-article .reference { font-size:10px;line-height:1; }.wiki-article .reflist,.wiki-article .references { font-size:11px; }
.wiki-article blockquote { margin:1em 1.5em;border-left:3px solid #c8ccd1;padding-left:12px; }
.wiki-article pre { overflow:auto;max-width:100%;background:#f8f9fa;padding:10px; }
.wiki-summary-links { display:flex;flex-wrap:wrap;gap:7px 14px; }
.wiki-attribution { clear:both;display:flex;flex-wrap:wrap;gap:8px 16px;border-top:1px solid #c8ccd1;margin-top:25px;padding-top:13px;font-size:10px; }
@media(max-width:650px) {
  .wiki-paper { padding:16px 13px;font-size:14px; }.wiki-paper .wiki-title { font-size:27px; }
  .wiki-viewport { max-height:520px; }.wiki-article .infobox { float:none;width:100%;margin:12px auto; }
  .wiki-article figure,.wiki-article .thumb { float:none;margin:12px auto;max-width:100%; }
  .wiki-article table { display:block;overflow:auto; }.wiki-article .infobox { display:table; }
}
.explorer-heading h2 { color: #132d1a; font-size: 19px; font-weight: 650; }
.explorer-photo { height: 160px; margin-bottom: 13px; }
.explorer-text { color: #25392a; font-size: 13px; line-height: 1.75; max-height: 145px; }
.article-links button { color: #23402a; background: #edf8e1; border-color: #bed2ab; font-size: 12px; padding: 7px 9px; }
.bingo-status { font-size: 13px; color: #25462d; }
.time-track { height: 4px; background: #e0e8d7; }
#time-progress { background: #4d9c3c; }
.stage-overlay { color: #234b2d; background: #f2f8eb; font-size: 14px; }
.mini-pixels i { background: #479136; }
.mini-pixels i:nth-child(2n) { background: #ddbe36; }
.countdown { background: #fffffff0; color: #16351d; font-weight: 700; }
.sidebar { border: 1.5px solid #bdcdb3; background: #fff; }
.sidebar h2 { font-size: 13px; color: #223b2a; }
.player-chip { font-size: 12px; color: #233d29; border-color: #c2d4b5; }
.player-chip.me { background: #e1f8cb; border-color: #97bf7e; }
.player-chip .player-name::after,.player-chip b { color: #3c5b3b; font-size: 11px; }
.message-name { font-size: 12px; color: #41563f; }
.message-text { font-size: 14px; color: #192e1f; }
.guess-message.correct .message-text { color: #155e32; font-weight: 650; }
.avatar { color: #244829; background: #e0f1d2; }
.guess-message.correct .avatar { background: var(--green); color: #15321d; }
.guess-message.system .message-text,.round-message { color: #4f6250; font-size: 12px; }
.toast { background: #14251a; color: #fff; font-size: 14px; }
#credits { color: #40513d; font-size: 12px; }
.credit-content { font-size: 11px; line-height: 1.7; }
.celebration { pointer-events: none; position: absolute; inset: 0; z-index: 5; overflow: hidden; }
.celebration i { position: absolute; left: var(--x); top: -15px; width: 7px; height: 12px; border-radius: 2px; background: #79c841; animation: confetti-fall 1.3s var(--delay) cubic-bezier(.2,.65,.4,1) both; }
.celebration i:nth-child(2n) { background: #f2cd35; }
.celebration i:nth-child(3n) { width: 7px; height: 7px; border-radius: 50%; background: #203e2a; }
@keyframes confetti-fall { from { opacity: 0; transform: translate(0,0) rotate(0); } 10% { opacity: 1; } to { opacity: 0; transform: translate(var(--drift),320px) rotate(var(--spin)); } }
@keyframes solved { 25% { box-shadow: 0 0 0 6px #a8e37655; border-color: #397b31; } }
@media (max-width: 740px) { .online .game-layout { grid-template-columns: minmax(0,1fr); } .online { max-width: 600px; } }
@media (max-width: 650px) {
  .question-zone { padding: 20px; gap: 16px; }
  .hero-photo { height: 185px; }
  .compare-card { padding: 12px; }
  .compare-photo { height: 112px; margin-bottom: 12px; }
  .compare-card strong { font-size: 16px; }
  .compare-value { font-size: 21px; }
  .compare-pair { gap: 10px; }
  .choice-button { min-height: 54px; font-size: 16px; }
  .game-heading h1 { font-size: 22px; }
  .clue-row { font-size: 16px; }
  .bingo-game .question-zone { padding: 15px; }
  .bingo-cell strong { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .celebration { display: none; } }
.photo-loading { position: absolute; left: calc(50% - 10px); top: calc(50% - 10px); display: grid; grid-template-columns: 1fr 1fr; width: 20px; height: 20px; gap: 3px; }
.photo-loading i { background: #73b54a; border-radius: 2px; animation: tiny-pixel 1.2s infinite; }
.photo-loading i:nth-child(2n) { background: #e1be35; animation-delay: .2s; }
.photo-ready .photo-loading { display: none; }
.compare-placeholder { height: 137px; flex: 0 0 137px; margin-bottom: 15px; border-radius: 11px; border: 1px solid #d0e2c2; display: grid; place-items: center; background: #eaf7db; color: #3b6b3b; }
.compare-card:nth-child(2) .compare-placeholder { background: #fff3be; border-color: #e7d695; color: #71601c; }
.compare-placeholder svg { width: 56px; height: 56px; fill: none; stroke: currentColor; stroke-width: 1.15; stroke-linecap: round; stroke-linejoin: round; }
.question-zone[data-comparison="population"] .compare-value { font-size: clamp(16px,2.5vw,23px); }
@media (max-width: 650px) { .compare-placeholder { height: 112px; flex-basis: 112px; margin-bottom: 12px; } }

/* Game selection: consistent cards and deliberately static illustrations. */
.games-view { width: min(100%,930px); animation: none; }
.game-grid { gap: 16px; align-items: stretch; }
.game-card { position: relative; display: flex; flex-direction: column; width: 100%; min-width: 0; padding: 0; text-align: left; border: 1.5px solid #b8c9ad; border-radius: 16px; background: #fff; color: #15241a; overflow: hidden; box-shadow: 0 3px 0 #20361c08; animation: none; transform: none; transition: border-color .18s,box-shadow .18s; }
.game-card:hover { background: #fff; border-color: #426a37; box-shadow: 0 0 0 1px #426a37,0 4px 12px #18301a0b; transform: none; }
.game-card:active:enabled { background: #fff; transform: none; box-shadow: 0 0 0 1px #426a37; }
.game-card:focus-visible { outline: 3px solid #2c733c; outline-offset: 4px; border-color: #426a37; }
.game-card-art { width: 100%; height: 106px; display: grid; place-items: center; flex: 0 0 106px; background: #f0f7e9; border-bottom: 1px solid #e1eada; }
.game-card:nth-child(3n+2) .game-card-art { background: #fff9df; border-bottom-color: #eee5bf; }
.game-card:nth-child(3n) .game-card-art { background: #f4f7f0; }
.game-card-art svg { display: block; width: 160px; height: 88px; fill: none; stroke-width: 1.7; }
.game-card-body { display: flex; flex-direction: column; flex: 1; width: 100%; padding: 18px 20px 16px; }
.game-card strong { display: block; font-size: 18px; font-weight: 700; letter-spacing: -.4px; line-height: 1.3; color: #15241a; }
.game-card small { display: block; margin-top: 7px; min-height: 42px; font-size: 13px; font-weight: 400; line-height: 1.6; color: #42533f; }
.game-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 14px; }
.game-card-meta { color: #3d5738; font-size: 11px; font-weight: 550; white-space: nowrap; }
@media (max-width: 650px) {
  .game-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .game-card-art { height: 94px; flex-basis: 94px; }
  .game-card-art svg { width: 138px; height: 76px; max-width: 100%; }
  .game-card-body { padding: 15px 14px 13px; }
  .game-card strong { font-size: 16px; }
  .game-card small { font-size: 12px; min-height: 58px; line-height: 1.6; margin-top: 5px; }
  .game-card-meta { font-size: 11px; }
}
@media (max-width: 350px) { .game-card-body { padding-inline: 11px; } .game-card strong { font-size: 15px; } .game-card-footer { gap: 4px; } .game-card-meta { font-size: 9px; } }

/* The supplied hand-drawn wordmark is shared by every visible brand label. */
.brand-wordmark,.menu-wordmark { display: block; height: auto; object-fit: contain; }
.brand-wordmark { width: 142px; }
.menu-view .wordmark-heading { width: 100%; margin: 0 0 40px; line-height: 0; }
.menu-wordmark { width: 100%; }
.game-card-footer { min-height: 43px; justify-content: flex-start; }
@media (max-width: 650px) { .game-card-footer { min-height: 40px; } .brand-wordmark { width: 128px; } }
.game-card-art,.game-card-art * { animation: none !important; transition: none !important; transform: none !important; }