/* Fall Bingo: retro interface presentation, scoped to this page. */
html{background:#166764}
body.retro-bingo{--ink:var(--retro-ink,#182525);--lav:#f2e3c3;--bar1:#b7652a;--bar2:#e5a92f;background:var(--retro-desktop,#166764);color:var(--retro-ink,#182525);font:14px/1.5 Verdana,Arial,sans-serif;padding:22px 14px;min-height:100vh}
.retro-bingo .page{width:min(100%,880px);padding:0 24px 20px;background:var(--retro-paper,#fffbea);border:2px solid;border-color:#fff #333 #333 #fff;box-shadow:6px 6px #0004;min-height:0}
.retro-bingo .topbar{margin:3px -21px 0;padding:9px 12px;background:var(--retro-title,#000080);color:var(--retro-title-ink,#fff);gap:16px;flex-wrap:wrap}
.retro-bingo .back,.retro-bingo .vibe-button,.retro-bingo .action{border:3px solid;border-color:#fff #444 #444 #fff;border-radius:0;background:var(--retro-panel,#ccc);color:var(--retro-ink,#182525);box-shadow:1px 1px #222;min-height:44px;padding:8px 12px;font:bold 12px/1.3 Verdana,sans-serif;transform:none;text-decoration:none}
.retro-bingo .wordmark{font:bold 17px/.95 'Courier New',monospace;text-transform:none;letter-spacing:-.5px}.retro-bingo .vibe-button{margin-left:auto;font-size:11px}
.retro-bingo .hero{text-align:left;padding:25px 0 22px;display:grid;grid-template-columns:1fr auto;column-gap:24px;align-items:center}
.utility-label{grid-column:1/-1;font:bold 10px 'Courier New',monospace;letter-spacing:1px;margin:0 0 22px;color:var(--retro-muted,#344747)}
.retro-bingo h1{display:block;grid-column:1;grid-row:2/5;font:bold clamp(42px,7vw,72px)/.95 'Courier New',monospace;letter-spacing:-4px;filter:none;text-transform:none;align-items:initial}
.retro-bingo h1 span{display:block;color:var(--retro-link,#000080)!important;-webkit-text-stroke:0!important}.retro-bingo h1 span:last-child{color:var(--retro-ink,#182525)!important}
.retro-bingo .instruction{grid-column:1;grid-row:5;font:13px/1.5 Verdana,sans-serif;margin:18px 0 0}
.retro-bingo .progress-count{grid-column:2;grid-row:2;border:2px inset #ddd;border-radius:0;box-shadow:none;background:var(--retro-tint,#eee);font:bold 26px 'Courier New',monospace;padding:10px 16px;text-align:center;min-width:154px}
.retro-bingo .board-number{grid-column:2;grid-row:3;color:var(--retro-muted,#344747);text-align:center;font:11px 'Courier New',monospace}.retro-bingo .progress-dots{grid-column:2;grid-row:4;display:grid;grid-template-columns:repeat(12,8px);gap:4px}.retro-bingo .progress-dots i{border-radius:0;background:#d3d3c8;width:8px;height:8px;transform:none}.retro-bingo .progress-dots i.filled{background:#16634e}
.board-title{display:flex;justify-content:space-between;gap:10px;background:var(--retro-title,#000080);color:var(--retro-title-ink,#fff);padding:9px 12px;font:bold 11px 'Courier New',monospace;border:2px outset #ddd}
.retro-bingo .bingo-grid{gap:5px;background:var(--retro-panel,#c6c6c6);border:2px inset #ddd;padding:8px}
.retro-bingo .quest-tile{border:2px solid;border-color:#fff #777 #777 #fff;border-radius:0;box-shadow:1px 1px #555;min-height:125px;padding:10px 7px;gap:10px;background:var(--retro-paper,#fffbea);color:var(--retro-ink,#182525);font:700 12px/1.3 Verdana,sans-serif;transform:none;transition:background .15s ease;overflow-wrap:anywhere;hyphens:auto}
.retro-bingo .quest-tile:hover{background:var(--retro-tint,#e5e5da);transform:none}.retro-bingo .quest-tile:active{border-color:#777 #fff #fff #777;transform:none;box-shadow:none}
.retro-bingo .quest-icon{width:36px;height:36px;border-radius:0;color:var(--retro-link,#784321);opacity:1;filter:none}
.retro-bingo .quest-tile.is-done{background:#d0e6bc;border-color:#517b37;box-shadow:none;transform:none}.retro-bingo .quest-tile.is-done .quest-icon{opacity:1;filter:none;color:#244d1d}
.retro-bingo .check-sticker{width:21px;height:21px;top:2px;right:2px;background:#245922;color:var(--retro-title-ink,#fff);border:1px solid #fff;border-radius:0;transform:none;box-shadow:none;font:16px monospace}
.retro-bingo .free-tile{background:var(--retro-accent,#ffe16b);transform:none}.retro-bingo .free-tile strong{font:bold 12px 'Courier New',monospace}
.retro-bingo .reward{margin:22px 0 0;padding:20px;background:var(--retro-tint,#eee);border:2px inset #ddd;grid-template-columns:140px 1fr;gap:24px}
.retro-bingo .patch-wrap{width:140px;height:auto;border-radius:0;overflow:visible;position:relative}.retro-bingo .patch-wrap img,.retro-bingo .reward.is-earned .patch-wrap img{width:100%;height:auto;border-radius:0;transform:none;display:block}
.retro-bingo .reward:not(.is-earned) .patch-wrap img{filter:grayscale(1);opacity:.42;transform:none}.retro-bingo .reward:not(.is-earned) .patch-wrap::after{content:'LOCKED';position:absolute;left:12%;right:12%;top:44%;text-align:center;border:2px outset #fff;background:#c6c6c6;font:bold 13px 'Courier New',monospace;padding:6px;color:var(--retro-ink,#182525)}
.retro-bingo .reward-kicker{font:11px 'Courier New',monospace;color:var(--retro-muted,#344747)}.retro-bingo .reward h2{font:bold 28px/1.1 'Courier New',monospace;margin:8px 0}.retro-bingo .reward-copy{font:13px/1.6 Verdana,sans-serif}.retro-bingo .celebration{border:2px outset #fff;border-radius:0;background:#d0e6bc;font:bold 13px/1.6 'Courier New',monospace;color:#244d1d}
.retro-bingo .action{background:var(--retro-accent,#ffe16b);font-size:12px}.retro-bingo .how-button{background:var(--retro-panel,#ccc)}.retro-bingo .reset-card{min-height:44px;color:var(--retro-link,#000080);border:0;text-decoration:underline;font:12px 'Courier New',monospace}.retro-bingo .how-copy{background:var(--retro-tint,#eee);border-left:3px solid var(--retro-title,#000080);font:13px/1.6 Verdana,sans-serif}
.retro-bingo footer{padding:20px 0 0;border-top:3px double #999;margin-top:16px;font:12px/1.8 'Courier New',monospace}.retro-bingo footer a{color:var(--retro-link,#000080);display:inline-block;padding:8px 3px;text-decoration:underline}
.retro-bingo :is(button,a):focus-visible{outline:3px solid #b13b00;outline-offset:3px;z-index:2}.retro-bingo .topbar :is(button,a):focus-visible{outline-color:#ffe16b}
.skip{position:absolute;left:8px;top:-100px;z-index:10;background:#fff;color:var(--retro-link,#000080);padding:12px}.skip:focus{top:8px}
@media(max-width:600px){body.retro-bingo{padding:8px 5px}.retro-bingo .page{padding:0 8px 14px}.retro-bingo .topbar{margin:3px -5px 0;padding:7px;gap:8px}.retro-bingo .wordmark{font-size:14px}.retro-bingo .back,.retro-bingo .vibe-button{font-size:10px;padding:7px}.retro-bingo .hero{padding:20px 3px;column-gap:8px}.utility-label{font-size:8px;letter-spacing:.4px;margin-bottom:18px}.retro-bingo h1{font-size:48px;letter-spacing:-3px}.retro-bingo .progress-count{min-width:112px;font-size:22px;padding:8px}.retro-bingo .instruction{grid-column:1/-1;font-size:12px;margin-top:15px}.retro-bingo .progress-dots{grid-template-columns:repeat(12,6px);gap:3px}.retro-bingo .progress-dots i{width:6px;height:6px}.board-title{padding:8px 5px;font-size:9px}.board-title span:last-child{font-size:8px}.retro-bingo .bingo-grid{gap:3px;padding:4px}.retro-bingo .quest-tile{min-height:111px;padding:6px 3px;font-size:10px;gap:7px;line-height:1.35}.retro-bingo .quest-icon{width:26px;height:26px}.retro-bingo .check-sticker{width:17px;height:17px;font-size:13px}.retro-bingo .reward{grid-template-columns:95px 1fr;gap:13px;padding:12px}.retro-bingo .patch-wrap{width:95px}.retro-bingo .reward h2{font-size:23px}.retro-bingo .reward-copy{font-size:12px}.retro-bingo .reward-kicker{font-size:9px}.retro-bingo .reward:not(.is-earned) .patch-wrap::after{font-size:10px;padding:3px}.retro-bingo .action{font-size:11px}}
@media(prefers-reduced-motion:reduce){.retro-bingo *{transition:none!important;scroll-behavior:auto!important}}
/* Keep complete words readable on the five-column phone board. */
@media(max-width:600px){.retro-bingo .quest-tile{font-family:Arial,sans-serif;font-size:11px;line-height:1.3;padding-left:2px;padding-right:2px;overflow-wrap:normal;hyphens:auto}}
@media(max-width:350px){.retro-bingo .quest-tile{font-size:10px}.retro-bingo .page{padding-left:5px;padding-right:5px}.retro-bingo .bingo-grid{gap:2px;padding:3px}}
@media(max-width:350px){.retro-bingo .quest-tile{font-size:9.5px;letter-spacing:-.15px}}
/* Break only a word that cannot fit in its own tile at the smallest widths. */
.retro-bingo .quest-tile>span:last-child{max-width:100%;overflow-wrap:anywhere}
/* Use the same full light/dark palettes as the homepage. */
body.retro-bingo{color-scheme:light}
body.retro-bingo[data-retro-mode="dark"]{color-scheme:dark}
body.retro-bingo .page,body.retro-bingo .quest-tile,body.retro-bingo :is(.back,.vibe-button,.action){border-color:var(--retro-edge-light,#fff) var(--retro-edge-dark,#52505b) var(--retro-edge-dark,#52505b) var(--retro-edge-light,#fff)}
body.retro-bingo .quest-tile.is-done{background:var(--retro-success,#d0e6bc);color:var(--retro-success-ink,#244d1d);border-color:#517b37}
body.retro-bingo .free-tile,body.retro-bingo .free-tile .quest-icon,body.retro-bingo .new-card{color:var(--retro-accent-ink,#182525)}
body.retro-bingo .how-button{color:var(--retro-ink,#182525)}
body.retro-bingo .reward:not(.is-earned) .patch-wrap::after{background:var(--retro-panel,#ccc);color:var(--retro-ink,#182525)}
body.retro-bingo .topbar .wordmark{color:var(--retro-title-ink,#fff)}
body.retro-bingo :is(.bingo-grid,.reward,.progress-count){border-color:var(--retro-edge-dark,#52505b) var(--retro-edge-light,#fff) var(--retro-edge-light,#fff) var(--retro-edge-dark,#52505b)}
