/* * Shared Game Theme * Import this in every game for consistent look & feel. * Usage: * * Dark mode (default) — add data-theme="light" to for light mode. * * Available CSS classes: * Layout: .game-page, .site-brand, .game-header, .header-left, .header-btns * Buttons: .icon-btn, .tool-btn, .tool-btn.active, .tool-btn .tool-icon * Chips: .toggle-chip, .toggle-chip.on, .toggle-chip .dot * Cards: .card, .stat-chip, .stat-chip .label, .stat-chip .value * Modals: .modal-overlay, .modal-overlay.visible, .modal, .modal-close, .modal-btn, .modal-btn.primary, .modal-btn.secondary * Selectors: .pill-selector, .pill-btn, .pill-btn.active * Misc: .timer-display, .timer-display.hidden-timer */ /* =========================== CSS VARIABLES — DARK MODE =========================== */ :root { --bg: #0a0a1a; --bg2: #111128; --card: #161633; --card-border: #2c2c58; --text: #f0f0ff; --text-dim: #7e7ea8; --accent: #7b6fff; --accent-glow: rgba(123,111,255,0.35); --accent2: #ff5e94; --accent3: #00e6b8; --cell-bg: #1a1a3c; --cell-hover: #26264e; --cell-selected: #3b3b80; --cell-highlight: #242458; --cell-same-num: #2e2e6a; --cell-given: #ffffff; --cell-user: #9b8fff; --cell-error: #ff3355; --cell-correct: #00e6b8; --note-color: #8888cc; --box-border: #5555a0; --cell-border: #2a2a55; --btn-bg: #222250; --btn-hover: #333370; --shadow: 0 8px 32px rgba(0,0,0,0.5); --modal-overlay: rgba(0,0,0,0.75); --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --transition: 0.2s ease; } /* =========================== CSS VARIABLES — LIGHT MODE =========================== */ [data-theme="light"] { --bg: #e4e8f4; --bg2: #d8dcea; --card: #ffffff; --card-border: #c0c5d8; --text: #1a1a3a; --text-dim: #6a6a8e; --accent: #5a4fd0; --accent-glow: rgba(90,79,208,0.25); --accent2: #e04580; --accent3: #00b892; --cell-bg: #eef0f8; --cell-hover: #e0e3f0; --cell-selected: #c5c8ff; --cell-highlight: #dcdff5; --cell-same-num: #cdd0f8; --cell-given: #1a1a3a; --cell-user: #5a4fd0; --cell-error: #d02040; --cell-correct: #00a882; --note-color: #6a6aa0; --box-border: #8088aa; --cell-border: #c8cce0; --btn-bg: #e4e8f4; --btn-hover: #d0d4e4; --shadow: 0 8px 32px rgba(0,0,0,0.1); --modal-overlay: rgba(0,0,0,0.4); } /* =========================== RESET & BASE =========================== */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { overscroll-behavior: none; } body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; transition: background 0.4s, color 0.4s; overflow-x: hidden; -webkit-font-smoothing: antialiased; touch-action: manipulation; overscroll-behavior: none; } /* =========================== PAGE LAYOUT =========================== */ .game-page { display: flex; flex-direction: column; align-items: center; min-height: 100vh; } main { width: 100%; display: flex; flex-direction: column; align-items: center; } /* =========================== SITE BRAND (top of every page) =========================== */ .site-brand { display: block; text-align: center; padding: 12px 16px 0; text-decoration: none; font-size: 13px; font-weight: 800; letter-spacing: -0.5px; background: linear-gradient(135deg, var(--accent), var(--accent2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; transition: opacity var(--transition); } .site-brand:hover { opacity: 0.7; } /* =========================== HEADER =========================== */ .game-header { width: 100%; max-width: 560px; padding: 10px 16px; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; } .header-left { display: flex; align-items: center; gap: 6px; } .back-btn { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; text-decoration: none; font-size: 0; transition: opacity var(--transition); } .back-btn::before { content: ''; width: 12px; height: 12px; border-left: 3px solid var(--accent); border-bottom: 3px solid var(--accent2); transform: rotate(45deg); margin-left: 3px; } .back-btn:hover { opacity: 0.65; } .game-header .logo { font-size: 26px; font-weight: 800; letter-spacing: -1px; background: linear-gradient(135deg, var(--accent), var(--accent2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-decoration: none; margin: 0; } .header-btns { display: flex; gap: 6px; } /* =========================== INFO BUTTON (gradient "i") =========================== */ .info-btn { width: 36px; height: 36px; border: 1.5px solid var(--accent); border-radius: var(--radius-md); background: transparent; display: flex; align-items: center; justify-content: center; text-decoration: none; font-family: 'Georgia', 'Times New Roman', serif; font-size: 18px; font-weight: 700; font-style: italic; background-image: linear-gradient(135deg, var(--accent), var(--accent2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; transition: all var(--transition); cursor: pointer; } .info-btn:hover { border-color: var(--accent2); transform: translateY(-1px); } /* =========================== INFO PAGE CONTENT =========================== */ .info-content { width: 100%; max-width: 560px; padding: 0 16px; margin: 0 auto; } .info-content h2 { font-size: 18px; font-weight: 800; margin: 24px 0 12px; background: linear-gradient(135deg, var(--accent), var(--accent2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .info-content h2:first-child { margin-top: 0; } .info-content p { font-size: 14px; line-height: 1.7; color: var(--text); margin-bottom: 12px; } .info-content ul, .info-content ol { font-size: 14px; line-height: 1.7; color: var(--text); margin: 0 0 12px 20px; } .info-content li { margin-bottom: 6px; } .info-content strong { color: var(--accent); } .info-content .info-card { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius-md); padding: 16px; margin-bottom: 12px; } /* =========================== SECTION HEADINGS (hub page) =========================== */ .section-heading { font-size: 13px; font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 1.5px; margin-bottom: 16px; padding-bottom: 8px; border-bottom: 1px solid var(--card-border); } /* =========================== ICON BUTTON (small square) =========================== */ .icon-btn { width: 36px; height: 36px; border: none; border-radius: var(--radius-md); background: var(--card); color: var(--text); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 16px; transition: all var(--transition); border: 1px solid var(--card-border); } .icon-btn:hover { background: var(--btn-hover); transform: translateY(-1px); } /* =========================== PILL SELECTOR (difficulty, modes) =========================== */ .pill-selector { display: flex; gap: 3px; background: var(--card); border-radius: var(--radius-md); padding: 3px; border: 1px solid var(--card-border); } .pill-btn { border: none; background: transparent; color: var(--text-dim); padding: 5px 12px; border-radius: var(--radius-sm); cursor: pointer; font-size: 12px; font-weight: 600; transition: all var(--transition); } .pill-btn.active { background: var(--accent); color: #fff; box-shadow: 0 2px 12px var(--accent-glow); } .pill-btn:hover:not(.active) { color: var(--text); } /* =========================== TIMER =========================== */ .timer-display { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); letter-spacing: 1px; transition: opacity 0.3s; } .timer-display.hidden-timer { opacity: 0.15; } /* =========================== CARD / STAT CHIP =========================== */ .card { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--shadow); } .stat-chip { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius-md); padding: 6px 10px; text-align: center; } .stat-chip .label { font-size: 9px; color: var(--text-dim); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; } .stat-chip .value { font-size: 14px; font-weight: 700; margin-top: 1px; } /* =========================== TOOL BUTTON (icon + label) =========================== */ .tool-btn { display: flex; flex-direction: column; align-items: center; gap: 3px; border: none; border-radius: var(--radius-md); background: var(--card); color: var(--text); padding: 8px 14px; cursor: pointer; transition: all 0.15s; border: 1px solid var(--card-border); font-size: 11px; font-weight: 600; min-width: 58px; } .tool-btn .tool-icon { font-size: 18px; } .tool-btn:hover { background: var(--btn-hover); transform: translateY(-1px); } .tool-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); } /* =========================== TOGGLE CHIP (settings) =========================== */ .toggle-chip { display: flex; align-items: center; gap: 5px; background: var(--card); border: 1px solid var(--card-border); border-radius: 20px; padding: 4px 12px; cursor: pointer; font-size: 11px; font-weight: 600; color: var(--text-dim); transition: all var(--transition); user-select: none; } .toggle-chip:hover { border-color: var(--accent); color: var(--text); } .toggle-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; } .toggle-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-dim); transition: background var(--transition); } .toggle-chip.on .dot { background: #fff; } /* =========================== NUMBER PAD (for number-based games) =========================== */ .number-pad { display: grid; grid-template-columns: repeat(9, 1fr); gap: 5px; } .num-btn { aspect-ratio: 1; border: none; border-radius: var(--radius-md); background: var(--card); color: var(--text); font-size: clamp(15px, 3.2vw, 22px); font-weight: 700; cursor: pointer; transition: all 0.15s; border: 1px solid var(--card-border); position: relative; } .num-btn:hover { background: var(--btn-hover); transform: translateY(-2px); } .num-btn:active { transform: translateY(0); } .num-btn.completed { opacity: 0.25; pointer-events: none; } .num-btn .count { position: absolute; top: 2px; right: 4px; font-size: 8px; font-weight: 600; color: var(--text-dim); } /* =========================== MODAL =========================== */ .modal-overlay { position: fixed; inset: 0; background: var(--modal-overlay); display: none; align-items: center; justify-content: center; z-index: 100; backdrop-filter: blur(6px); animation: fadeIn 0.2s ease; } .modal-overlay.visible { display: flex; } .modal { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius-xl); padding: 28px; max-width: 380px; width: 90%; text-align: center; box-shadow: var(--shadow); animation: slideUp 0.3s ease; position: relative; } .modal-close { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; border: none; border-radius: 50%; background: var(--btn-bg); color: var(--text-dim); font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--transition), color var(--transition); } .modal-close:hover { background: var(--btn-hover); color: var(--text); } .modal h2 { font-size: 22px; margin-bottom: 6px; } .modal p { color: var(--text-dim); margin-bottom: 16px; font-size: 13px; line-height: 1.5; } .modal .time-result { font-size: 38px; font-weight: 800; background: linear-gradient(135deg, var(--accent), var(--accent2)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin: 10px 0; } .modal .best-badge { display: inline-block; background: linear-gradient(135deg, #ffb347, #ff6b6b); color: #fff; padding: 4px 14px; border-radius: 20px; font-size: 12px; font-weight: 700; margin-bottom: 10px; } .modal-btn { border: none; border-radius: var(--radius-md); padding: 10px 24px; font-size: 14px; font-weight: 700; cursor: pointer; transition: all 0.15s; margin: 4px; } .modal-btn.primary { background: var(--accent); color: #fff; } .modal-btn.primary:hover { filter: brightness(1.15); transform: translateY(-1px); } .modal-btn.secondary { background: var(--btn-bg); color: var(--text); } .modal-btn.secondary:hover { background: var(--btn-hover); } /* =========================== STATS GRID (reusable for any game stats) =========================== */ .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; } .stats-card { background: var(--cell-bg); border-radius: var(--radius-md); padding: 12px; } .stats-card .s-label { font-size: 10px; color: var(--text-dim); font-weight: 600; text-transform: uppercase; } .stats-card .s-value { font-size: 20px; font-weight: 800; margin-top: 3px; } /* =========================== CONFETTI (shared win celebration) =========================== */ .confetti-piece { position: fixed; z-index: 200; pointer-events: none; animation: confettiFall linear forwards; } /* =========================== AD SLOTS =========================== */ .ad-slot { width: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; } .ad-slot::before { content: 'Advertisement'; position: absolute; top: 4px; left: 50%; transform: translateX(-50%); font-size: 9px; font-weight: 600; color: var(--text-dim); opacity: 0.5; letter-spacing: 0.5px; text-transform: uppercase; pointer-events: none; z-index: 1; } .ad-slot.ad-filled::before { display: none; } /* In-content — top 468x60 banner */ .ad-content { min-height: 70px; padding: 8px 16px; } .ad-slot iframe { max-width: 100% !important; } /* Bottom — 300x250 medium rectangle */ .ad-bottom { min-height: 260px; padding: 8px 16px; } /* =========================== SITE FOOTER (every page) =========================== */ .site-footer { width: 100%; text-align: center; padding: 24px 16px 20px; font-size: 12px; color: var(--text-dim); } .site-footer a { color: var(--text-dim); text-decoration: none; transition: color var(--transition); } .site-footer a:hover { color: var(--text); } .site-footer .footer-sep { margin: 0 8px; opacity: 0.4; } /* =========================== PAGE SUBTITLE (top-of-page TLDR under H1) =========================== */ .page-subtitle { width: 100%; max-width: 560px; margin: 0 auto 8px; padding: 0 16px; color: var(--text-dim); font-size: 13px; line-height: 1.5; text-align: center; } /* =========================== GLOSSARY (definition list used on technical info pages) =========================== */ .glossary { margin: 12px 0 16px; padding: 0; } .glossary dt { font-weight: 700; color: var(--text); margin-top: 14px; font-size: 14px; } .glossary dt:first-child { margin-top: 0; } .glossary dd { margin: 4px 0 0; color: var(--text-dim); font-size: 14px; line-height: 1.55; } .glossary code { background: var(--btn-bg); padding: 1px 6px; border-radius: 4px; font-size: 12.5px; color: var(--accent); font-family: Consolas, 'Courier New', monospace; } /* =========================== RELATED LINKS (sibling discovery, above footer) =========================== */ .related-links { width: 100%; max-width: 560px; margin: 24px auto 8px; padding: 0 16px; box-sizing: border-box; } .related-links h2 { font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.6px; margin: 0 0 12px; text-align: center; font-weight: 700; } .related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .related-card { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px 8px; background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius-md); text-decoration: none; color: var(--text); transition: transform var(--transition), border-color var(--transition); min-height: 64px; } .related-card:hover { border-color: var(--accent); transform: translateY(-2px); } .related-card .r-icon { font-size: 22px; line-height: 1; } .related-card .r-name { font-size: 12px; font-weight: 600; text-align: center; line-height: 1.2; } /* =========================== PAGE ABOUT (SEO content below footer) =========================== */ .page-about { width: 100%; max-width: 560px; padding: 24px 16px; margin: 0 auto; color: var(--text-dim); font-size: 12px; } .page-about h2 { font-size: 12px; font-weight: 700; margin: 16px 0 8px; } .page-about h2:first-child { margin-top: 0; } .page-about p { line-height: 1.7; margin-bottom: 8px; } /* =========================== ANIMATIONS =========================== */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes confettiFall { 0% { opacity: 1; } 100% { opacity: 0; transform: translateY(100vh) rotate(720deg); } } @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } } @keyframes pop { 0% { transform: scale(1); } 50% { transform: scale(1.15); } 100% { transform: scale(1); } } /* =========================== RESPONSIVE =========================== */ @media (max-width: 400px) { .pill-btn { padding: 4px 8px; font-size: 11px; } .tool-btn { padding: 6px 10px; min-width: 50px; font-size: 10px; } .toggle-chip { padding: 3px 8px; font-size: 10px; } } @media (max-height: 700px) and (orientation: portrait) { .game-header { padding: 8px 16px 0; } .timer-display { font-size: 18px; } .game-header .logo { font-size: 22px; } } /* =========================== FAQ ACCORDIONS =========================== */ .faq-section { margin: 24px 0; } .faq-item { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--radius-md); margin-bottom: 8px; overflow: hidden; transition: var(--transition); } .faq-item summary { cursor: pointer; padding: 14px 16px; font-weight: 600; font-size: 15px; color: var(--text); list-style: none; position: relative; padding-right: 40px; transition: var(--transition); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: '+'; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--accent); transition: var(--transition); } .faq-item[open] summary::after { transform: translateY(-50%) rotate(45deg); } .faq-item summary:hover { background: var(--btn-hover); } .faq-item[open] { border-color: var(--accent); } .faq-item .faq-answer { padding: 0 16px 16px; color: var(--text-dim); font-size: 14px; line-height: 1.6; margin: 0; } /* =========================== KEY TAKEAWAYS =========================== */ .key-takeaways { background: var(--card); border: 1px solid var(--card-border); border-left: 4px solid var(--accent); border-radius: var(--radius-md); padding: 16px 20px; margin: 28px 0 16px; } .key-takeaways h2 { margin: 0 0 8px; font-size: 16px; color: var(--accent); text-transform: uppercase; letter-spacing: 0.5px; } .key-takeaways ul { margin: 0; padding-left: 20px; } .key-takeaways li { color: var(--text); font-size: 14px; line-height: 1.6; margin-bottom: 6px; } .key-takeaways li:last-child { margin-bottom: 0; } /* =========================== INFO PAGE FIGURES =========================== */ .info-figure { margin: 16px 0 24px; text-align: center; } .info-figure img { max-width: 100%; height: auto; border-radius: var(--radius-md); border: 1px solid var(--card-border); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } .info-figure figcaption { margin-top: 8px; font-size: 13px; color: var(--text-dim); font-style: italic; }