/* Bibi — daily clear-the-board puzzle. Grayscale palette; one green accent on the wordmark + gameplay highlights. Mobile-first; the layout never needs to grow past a phone column. */ :root { --white: #ffffff; --cell-white: var(--white); /* empty board cells; overridden in dark for contrast */ --g50: #f4f4f3; --g100: #e4e4e2; --g200: #c9c9c5; --g400: #9a9a95; --g600: #6b6b66; --g700: #454542; --g800: #262625; --black: #0f0f0e; --accent: #0f9251; /* green; darkened to clear AA large-text on the light bg */ --accent-soft: rgba(15, 146, 81, 0.42); /* faded accent for the line-clear preview */ --nofit-stripe: rgba(255, 255, 255, 0.6); /* hatch over a held piece's bad cells */ --gap: 4px; --radius: 5px; --tray-cell: 26px; --preview-cell: calc(var(--tray-cell) * 0.66); /* solution-replay tray: ~66% size, fits one line */ --maxw: 460px; } /* Dark mode: the whole UI reads from the variables above, so we only restate the palette here. Warm-tinted grayscale, inverted: surfaces are the lightest dark tones (cells/pieces pop off the page), text climbs toward white, and the green accent brightens for the dark background. Set on by the no-flash head script and toggled in Settings. */ :root[data-theme="dark"] { --white: #211f1c; /* raised surfaces: sheets, buttons, inputs */ --cell-white: #37342f; /* empty board cells: lifted for contrast vs the bg */ --g50: #141312; /* page background (darkest) */ --g100: #1c1b18; /* board tray, inset hairlines, spent dots */ --g200: #35332f; /* borders, dividers, disabled */ --g400: #7c7a73; /* muted icons / hints */ --g600: #9c9a92; /* secondary text */ --g700: #c7c5be; /* body text */ --g800: #e8e6e0; /* headings, filled cells, piece blocks */ --black: #f7f5f1; /* maximum-contrast text */ --accent: #34c97d; /* brighter green for the dark background */ --accent-soft: rgba(52, 201, 125, 0.4); --nofit-stripe: rgba(15, 15, 14, 0.55); /* dark hatch: the held block is near-white here */ } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--g50); color: var(--g700); font-family: "Nunito", "Segoe UI", system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; } .wrap { max-width: var(--maxw); margin: 0 auto; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; padding: 14px 14px 0; } /* ---- header ---- */ .topbar { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 10px; } .brand { line-height: 1; } .wordmark { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; color: var(--accent); /* the one saturated element (green) */ } .tagline { font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--g400); margin-top: 3px; } /* settings gear lives in the bottom-right of the footer */ .settings-btn { appearance: none; border: none; background: transparent; color: var(--g400); padding: 4px; margin: 0 -4px 0 0; /* nudge the glyph flush to the right content edge */ line-height: 0; border-radius: 8px; cursor: pointer; flex: 0 0 auto; } .settings-btn:hover { color: var(--g700); } .settings-btn:active { background: var(--g100); } .settings-btn svg { display: block; } .stats { text-align: right; line-height: 1.2; } .stat-row { font-size: 12px; color: var(--g400); } #level-value { font-size: 20px; font-weight: 800; color: var(--g800); display: block; white-space: nowrap; } #streak { font-size: 12px; color: var(--g600); min-height: 14px; } .chances { display: flex; gap: 6px; justify-content: flex-end; margin-top: 6px; } .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--g200); } .dot.live { background: var(--g800); } .dot.spent { background: var(--g100); box-shadow: inset 0 0 0 1px var(--g200); } /* untracked play (admin): no chances/streak in the header */ body.freeplay #chances, body.freeplay #streak { display: none; } /* ---- admin level/puzzle picker (/habibi/admin) ---- */ /* A control strip at the very top, divided off, so everything below reads like the real app. */ .admin-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 2px 0 14px; margin-bottom: 14px; border-bottom: 1px solid var(--g200); font-size: 13px; color: var(--g600); } .admin-bar select { font: inherit; font-size: 14px; padding: 6px 8px; border: 1px solid var(--g200); border-radius: 8px; background: var(--white); color: var(--g800); } /* ---- board ---- */ #board { display: grid; grid-template-columns: repeat(8, 1fr); grid-auto-rows: 1fr; gap: var(--gap); width: 100%; aspect-ratio: 1 / 1; padding: var(--gap); background: var(--g100); border-radius: 12px; touch-action: none; user-select: none; } .cell { background: var(--cell-white); border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--g100); transition: background 0.12s ease, transform 0.12s ease; } .cell.filled { background: var(--g800); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18); } /* the piece just placed in a View Solution replay, until the next one lands */ .cell.sol-current { background: var(--accent); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.18); } .cell.preview-ok { background: var(--g400); } .cell.preview-bad { background: repeating-linear-gradient( 45deg, var(--g200), var(--g200) 3px, transparent 3px, transparent 6px ); } /* a row/column this drop would complete: existing cells solid accent... */ .cell.preview-line { background: var(--accent); } /* ...and the piece's new cells shown faded so you see what's being added */ .cell.preview-line-new { background: var(--accent-soft); } .cell.just-placed { animation: pop 0.22s ease; } .cell.cleared { animation: clear 0.36s ease; } @keyframes pop { 0% { transform: scale(0.6); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } } @keyframes clear { 0% { background: var(--g800); transform: scale(1); } 40% { background: var(--cell-white); transform: scale(1.12); } 100% { background: var(--cell-white); transform: scale(0.4); opacity: 0.2; } } /* victory celebration: a rainbow wave ripples diagonally across the board on a completed puzzle. Brief and colorful by design — the one moment grayscale lifts. Hue + start delay are set per-cell in JS (keyed to r+c). */ .cell.wave { animation: rainbow-wave 0.85s ease var(--wave-delay, 0ms); position: relative; z-index: 1; } @keyframes rainbow-wave { 40% { background-color: hsl(var(--wave-hue, 0), 85%, 58%); box-shadow: 0 0 14px 2px hsl(var(--wave-hue, 0), 90%, 62%); transform: scale(1.16); z-index: 2; } } @media (prefers-reduced-motion: reduce) { .cell.wave { animation: none; } } #board.locked { opacity: 0.92; } /* ---- status line ---- */ .status { text-align: center; font-size: 14px; color: var(--g700); margin: 12px 4px 8px; min-height: 40px; } .status.good { color: var(--g800); } .status.warn { color: var(--g700); } .status.muted { color: var(--g400); } .status b { color: var(--g800); } .muted { color: var(--g400); } /* ---- tray ---- */ #tray { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px; min-height: calc(var(--tray-cell) * 3 + 12px); padding: 0 0 32px 0; } .piece { display: grid; gap: 3px; border-radius: 10px; cursor: grab; touch-action: none; } /* upcoming pieces shown during a solution replay — half size (so they fit on one line), tighter, and not draggable */ #tray.solver { gap: 8px; margin-top: 32px; } .piece.preview { cursor: default; padding: 3px; gap: 2px; } .piece.preview .pblk { border-radius: 2px; } /* tighter corners at half size */ .pblk { width: 100%; height: 100%; background: var(--g800); border-radius: 4px; box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.18); } .pgap { width: 100%; height: 100%; } /* dragging ghost */ .ghost { position: fixed; display: grid; gap: var(--gap); padding: 0; background: transparent; box-shadow: none; z-index: 1000; pointer-events: none; opacity: 0; } .ghost.active { opacity: 0.95; } .ghost .pblk { box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.22); } /* a block of the held piece that wouldn't fit where it's hovering */ .ghost .pblk.nofit { background: repeating-linear-gradient( 45deg, var(--nofit-stripe), var(--nofit-stripe) 2px, transparent 2px, transparent 5px ), var(--g800); } /* ---- controls ---- */ .controls { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; padding: 4px 0 10px; } .btn { appearance: none; border: 1px solid var(--g200); background: var(--white); color: var(--g700); font: inherit; font-weight: 700; font-size: 14px; padding: 10px 18px; border-radius: 999px; cursor: pointer; } .btn:active { background: var(--g50); } .btn.solid { background: var(--g800); color: var(--white); border-color: var(--g800); } a.btn { display: inline-block; text-decoration: none; } .btn:disabled { opacity: 0.5; cursor: default; } .hidden { display: none !important; } /* ---- solution scrubber ---- */ #scrubber { display: flex; align-items: center; gap: 10px; padding: 4px 2px 12px; } #scrub-play { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--g200); background: var(--white); color: var(--g800); /* themed glyph — UA button text is ~black, invisible in dark mode */ font-size: 16px; cursor: pointer; } #scrub-range { flex: 1 1 auto; accent-color: var(--g700); } #scrub-close { flex: 0 0 auto; } .scrub-hint { text-align: center; font-size: 13px; color: var(--g400); padding: 0 4px 14px; } .scrub-hint.hidden { display: none; } /* ---- footer ---- */ .footer { margin-top: auto; padding: 12px 0 16px; font-size: 12px; color: var(--g400); display: flex; align-items: center; justify-content: space-between; gap: 10px; } .footer-credit { text-align: left; } .footer a { color: var(--g600); text-decoration: none; font-weight: 700; } .footer a:hover { color: var(--g800); } /* ---- info pane (bottom sheet) + forfeit modal ---- */ [data-info] { cursor: pointer; } .backdrop { position: fixed; inset: 0; background: rgba(15, 15, 14, 0.38); z-index: 1050; } .backdrop.hidden { display: none; } .sheet { position: fixed; left: 0; right: 0; bottom: 0; max-width: var(--maxw); margin: 0 auto; background: var(--white); border-top-left-radius: 18px; border-top-right-radius: 18px; box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.2); padding: 26px 20px calc(28px + env(safe-area-inset-bottom)); max-height: 84vh; overflow-y: auto; -webkit-overflow-scrolling: touch; transform: translateY(110%); transition: transform 0.28s ease; z-index: 1100; } .sheet.open { transform: translateY(0); } .sheet-close { position: absolute; top: 8px; right: 10px; width: 38px; height: 38px; border: none; background: transparent; font-size: 26px; line-height: 1; color: var(--g400); cursor: pointer; } .sheet-text h3 { margin: 0 0 8px; font-size: 18px; color: var(--g800); } .sheet-text p { margin: 0 0 10px; font-size: 15px; line-height: 1.5; color: var(--g700); } .sheet-text p:last-child { margin-bottom: 0; } .sheet-text b { color: var(--g800); } .sheet-rule { border: none; border-top: 1px solid var(--g200); margin: 18px 0 12px; } .sheet-btn { display: block; width: 100%; margin-top: 4px; } /* ---- settings sheet ---- */ .setting-row { margin: 0 0 22px; } .setting-row:last-child { margin-bottom: 0; } .setting-label { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--g600); margin-bottom: 10px; } .segmented { display: flex; width: 100%; border: 1px solid var(--g200); border-radius: 999px; background: var(--white); overflow: hidden; } .segmented button { appearance: none; flex: 1 1 0; border: none; background: transparent; font: inherit; font-weight: 700; font-size: 14px; padding: 10px 8px; color: var(--g600); cursor: pointer; } .segmented button + button { border-left: 1px solid var(--g200); } .segmented button.active { background: var(--g800); color: var(--white); } /* p.setting-note (not .setting-note) to beat .sheet-text p on specificity */ p.setting-note { font-size: 13px; color: var(--g400); margin: 10px 0 0; min-height: 18px; } .modal-overlay { display: flex; align-items: center; justify-content: center; padding: 24px; z-index: 1200; } .modal-overlay.hidden { display: none; } .modal { width: 100%; max-width: 340px; background: var(--white); border-radius: 16px; padding: 22px 20px 18px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25); } .modal-text h3 { margin: 0 0 8px; font-size: 18px; color: var(--g800); } .modal-text p { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--g700); } .modal-text p:last-child { margin-bottom: 0; } .modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; } @media (max-width: 360px) { :root { --tray-cell: 22px; } .wordmark { font-size: 26px; } }