/* Minimal iOS Safari button reset so custom button classes render properly on iOS (keeps visual styles defined later; only removes native -webkit button chrome) */ button, input[type="button"], input[type="submit"], button[type="button"], button[type="submit"] { -webkit-appearance: none; appearance: none; -webkit-font-smoothing: antialiased; font: inherit; } /* --- Responsive mobile overrides (small) --- */ @media (max-width: 420px) { #main { max-width: 100vw; padding-left: 0.5em; padding-right: 0.5em; } .clue-text { font-size: 1.1em; } .answer-letter-box { width: 1.8em !important; height: 1.9em !important; font-size: 1em !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; box-shadow: 2px 2px 0 #ff0080, 4px 4px 0 #00eaff, 6px 6px 0 #ffe600; border: 2px solid #2a7ae2 !important; position: relative; z-index: 1; /* Overlap by border width */ margin-left: -2px !important; } .answer-letter-box.first-in-word { margin-left: 0 !important } #answer-boxes { gap: 0 !important; } .answer-word-spacer { width: 0.5em !important; min-width: 0.5em !important; } } html, body { max-width: 100vw; overflow-x: hidden; } #main { box-sizing: border-box; width: 100%; max-width: 370px; margin: 60px auto 0 auto; background: #fff; padding: 2.2em 1.5em 1.2em 1.5em; border-radius: 8px; box-shadow: none; border: 2px solid #d3d3d3; } @media (max-width: 420px) { #main { max-width: 100vw; padding-left: 0.5em; padding-right: 0.5em; } .clue-text { font-size: 1.1em; } } .answer-word-spacer { display: inline-block; width: 1.2em; min-width: 1.2em; height: 1.5em; } #answer-boxes { display: flex; gap: 0; justify-content: center; align-items: center; margin-bottom: 1.5em; } /* Explicit light mode overrides for all key elements */ /* NOTE: switched selector to body.theme-light so JS that toggles classes on works */ body.theme-light { color-scheme: light; background: #f4f6fa; color: #222; } body.theme-light #main { background: #fff; color: #222; border-color: #d3d3d3; } body.theme-light .clue-text, body.theme-light .site-title, body.theme-light .result-text, body.theme-light .explanation-text, body.theme-light .streak-label, body.theme-light .footer-attribution { color: #222 !important; font-family: 'Inter', 'Segoe UI', Arial, sans-serif !important; } body.theme-light .clue-attribution, body.theme-light .clue-attribution a { color: #2a7ae2 !important; } body.theme-light .answer-input { background: #f8fafc !important; color: #222 !important; border: 1.5px solid #d0d6e0 !important; } body.theme-light .submit-btn { background: #fff !important; color: #2a7ae2 !important; border: 2px solid #2a7ae2 !important; } body.theme-light .submit-btn:hover { background: #1a5bb8 !important; color: #fff !important; } body.theme-light .reveal-btn { background: #fff !important; color: #2a7ae2 !important; border: 2px solid #2a7ae2 !important; } body.theme-light .reveal-btn.confirm { background: #ffeaea !important; color: #b00020 !important; border: 2px solid #b00020 !important; } body.theme-light .share-btn { background: #fff !important; color: #2a7ae2 !important; border: 2px solid #2a7ae2 !important; } body.theme-light .share-btn:hover { background: #2a7ae2 !important; color: #fff !important; } /* Explicit light mode overrides for answer boxes and key elements */ body.theme-light .answer-letter-box { background: #f9f9f9 !important; color: #222 !important; border: 2px solid #bbb !important; box-shadow: none !important; } body.theme-light .answer-letter-box:focus { border: 2px solid #2a7ae2 !important; box-shadow: none !important; } body.theme-light .answer-letter-box[disabled] { background: #e2e2e2 !important; color: #aaa !important; border: 2.5px solid #bbb !important; } body.theme-light .reveal-btn { background: #fff !important; color: #2a7ae2 !important; border: 2px solid #2a7ae2 !important; } body.theme-light .reveal-btn.confirm { background: #ffeaea !important; color: #b00020 !important; border: 2px solid #b00020 !important; } /* Debug button style, light and dark mode */ .debug-btn { background: #eee; color: #444; border: 1.5px solid #bbb; border-radius: 5px; padding: 0.4em 1em; margin: 0.5em 0.2em; font-size: 0.95em; cursor: pointer; transition: background 0.2s, color 0.2s; } .debug-btn:hover { background: #e2e2e2; } @media (prefers-color-scheme: dark) { .debug-btn { background: #23272b; color: #eaeaea; border: 1.5px solid #444; } .debug-btn:hover { background: #181a1b; color: #fff; } #debug-date-override { color: #eaeaea; } } /* Theme override classes for manual light/dark mode */ /* Theme override classes for manual light/dark mode */ body.theme-light { color-scheme: light; background: #f4f6fa; color: #222; } body.theme-dark { color-scheme: dark; background: #181a1b; color: #eaeaea; } body.theme-light #main { background: #fff; color: #222; border-color: #d3d3d3; } body.theme-dark #main { background: #23272b; color: #eaeaea; border-color: #444; } /* Light mode disabled style (must come before dark mode for override) */ .answer-letter-box[disabled] { background: #e2e2e2; color: #aaa; border: 2.5px solid #bbb; } @media (prefers-color-scheme: dark) { .reveal-btn { background: #23272b; color: #aaa; border: 2px solid #555; } .reveal-btn:hover { background: #181a1b; color: #fff; } .reveal-btn.confirm { background: #3a1a1a; color: #ff6b6b; border: 2px solid #b00020; } .answer-letter-box { background: #23272b; color: #fff; border: 2.5px solid #7bb0ff; box-shadow: 2px 2px 0 #181a1b; } .answer-letter-box { width: 2.3em; height: 2.3em; font-size: 1.2em; text-align: center; border-radius: 6px; border-radius: 0; border: 2px solid #2a7ae2; margin: 0 0 0 -2px; margin-bottom: 0.1em; font-family: 'Inter', 'Segoe UI', Arial, sans-serif; font-weight: 700; background: #f8fafc; color: #222; box-sizing: border-box; transition: border 0.2s, box-shadow 0.2s; outline: none; z-index: 1; box-shadow: 2px 2px 0 #ff0080, 4px 4px 0 #00eaff, 6px 6px 0 #ffe600; position: relative; } .answer-letter-box.first-in-word { margin-left: 0 !important; } } .answer-letter-box { width: 2.4em; height: 2.4em; font-size: 1.6em; text-align: center; border: 2px solid #222; border-radius: 0; margin-right: -2px; /* overlap by border width */ background: #fff; color: #111; box-shadow: 2px 2px 0 0 #ff00a2, 4px 4px 0 0 #00eaff; position: relative; z-index: 1; transition: box-shadow 0.2s, border-color 0.2s, background 0.2s; } body.theme-dark .answer-letter-box, body.theme-dark .answer-letter-box { background: #23272b !important; color: #fff !important; border-color: #eee !important; } @media (prefers-color-scheme: dark) { body:not(.theme-light) .answer-letter-box { background: #23272b !important; color: #fff !important; border-color: #eee !important; } } .answer-letter-box.first-in-word { border-top-left-radius: 0.4em !important; border-bottom-left-radius: 0.4em !important; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } .answer-letter-box.last-in-word { border-top-right-radius: 0.4em !important; border-bottom-right-radius: 0.4em !important; border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } .answer-letter-box:focus { border: 2px solid #2a7ae2; box-shadow: none; } .answer-letter-box[disabled] { background: #e2e2e2; color: #aaa; border: 2.5px solid #bbb; } body { font-family: 'Inter', 'Segoe UI', Arial, sans-serif; background: #f4f6fa; color: #222; margin: 0; } @media (max-width: 600px) { #main { max-width: 98vw; margin: 0.5em auto 0 auto; padding: 1.2em 0.5em 1em 0.5em; border-radius: 0; box-shadow: none; border: none; } .site-title { font-size: 1.3em; } .clue-text { font-size: 1.1em; } .answer-input, .submit-btn, .share-btn, .reveal-btn { font-size: 1em; padding: 0.7em; } } #main { max-width: 370px; margin: 60px auto 0 auto; background: #fff; padding: 2.2em 1.5em 1.2em 1.5em; border-radius: 8px; box-shadow: none; border: 2px solid #d3d3d3; } .logo-row { display: flex; justify-content: center; align-items: center; margin-bottom: 1.2em; } .site-title { font-size: 1.3em; font-weight: 700; letter-spacing: 0; /* color removed to allow theme inheritance */ margin: 0.5em 0 0 0; font-family: 'Inter', 'Segoe UI', Arial, sans-serif; opacity: 1; } #clue-container { margin-bottom: 1.2em; } .clue-text { font-size: 1.5em; margin-bottom: 0.6em; text-align: center; font-weight: 700; letter-spacing: 0.01em; /* color removed to allow theme inheritance */ line-height: 1.3; } .clue-attribution { font-size: 1em; color: #2a7ae2; text-align: center; margin-bottom: 0.8em; } .clue-attribution a { color: #2a7ae2; text-decoration: none; font-weight: 500; } .clue-attribution a:hover { text-decoration: underline; } .timer { text-align: center; font-size: 1.1em; color: inherit; margin-bottom: 0.7em; font-variant-numeric: tabular-nums; display: block; } body.theme-dark .timer, .theme-dark .timer { color: #eaeaea; } /* End of previous block */ .answer-input { width: 100%; padding: 0.8em; font-size: 1.15em; border-radius: 8px; border: 1.5px solid #d0d6e0; margin-bottom: 0.8em; box-sizing: border-box; background: #f8fafc; transition: border 0.2s; } .answer-input:focus { border: 1.5px solid #2a7ae2; outline: none; } .submit-btn, .reveal-btn { width: 100%; padding: 0.8em 0; font-size: 1.15em; border-radius: 6px; border: 2px solid #2a7ae2; background: #fff; color: #2a7ae2; box-shadow: none; cursor: pointer; margin-bottom: 0.8em; margin-left: 0; box-shadow: 0 1px 2px #0001; transition: background 0.2s; } .submit-btn:hover { background: #1a5bb8; } .result-text { margin-top: 1em; font-weight: bold; text-align: center; font-size: 1.1em; } .explanation-text { margin-top: 1em; font-size: 1em; color: #444; text-align: center; } #streak-container { margin-top: 1.5em; font-size: 1.1em; text-align: center; color: #888; } .streak-label { font-weight: 500; color: #888; } .share-btn { margin: 1.2em auto 0 auto; display: block; background: #fff; color: #2a7ae2; border: 2px solid #2a7ae2; border-radius: 6px; width: 100%; padding: 0.8em 0; font-size: 1.15em; font-weight: 700; margin-bottom: 0.8em; margin-left: 0; cursor: pointer; transition: background 0.2s, color 0.2s, border 0.2s, opacity 0.3s; opacity: 1; } .share-btn.fade-in { animation: fadeInShare 0.4s; opacity: 1 !important; } .submit-btn.fade-out { animation: fadeOutCheck 0.4s; opacity: 0 !important; pointer-events: none; } @keyframes fadeInShare { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeOutCheck { from { opacity: 1; } to { opacity: 0; } } /* End of previous block */ .footer-attribution a { color: #2a7ae2; text-decoration: none; } .footer-attribution a:hover { text-decoration: underline; } /* End of previous block */ body.theme-dark { background: #181a1b; color: #eaeaea; } body.theme-dark #main { background: #23272b; color: #eaeaea; border: 1px solid #23272b; box-shadow: 0 4px 24px #0008; } body.theme-dark .clue-text { color: #fff; } body.theme-dark .site-title { color: #fff; font-weight: 700; opacity: 1; } body.theme-dark .answer-input { background: #23272b; color: #fff; border: 1.5px solid #444; } body.theme-dark .answer-input:focus { border: 1.5px solid #2a7ae2; } body.theme-dark .submit-btn { background: #2a7ae2; color: #fff; } body.theme-dark .submit-btn:hover { background: #2a7ae2; color: #fff; } /* Reveal button */ body.theme-dark .reveal-btn { background: #f7f7f7; color: #888; /* width: 150px; height: 40px; font-size: 1.15em; font-weight: 700; border-radius: 6px; border: 2px solid #bdbdbd; margin-bottom: 0.8em; cursor: pointer; transition: background 0.2s, color 0.2s, border 0.2s; */ } body.theme-dark .reveal-btn:hover { background: #181a1b; color: #fff; } body.theme-dark .reveal-btn.confirm { background: #3a1a1a; color: #ff6b6b; border: 2px solid #b00020; } body.theme-dark .clue-attribution, body.theme-dark .clue-attribution a { color: #7bb0ff; } body.theme-dark .result-text, body.theme-dark .explanation-text { color: #eaeaea; } body.theme-dark .footer-attribution { color: #888; } body.theme-dark .share-btn { background: #181a1b; color: #7bb0ff; border: 2px solid #7bb0ff; box-shadow: none; } body.theme-dark .share-btn:hover { background: #7bb0ff; color: #181a1b; }