* { margin: 0; padding: 0; box-sizing: border-box; } .hidden { display: none !important; } /* Base tokens live in ../../themes/tokens.css — this file only uses them. */ html { -webkit-text-size-adjust: 100%; /* Start white so the page never flashes the theme bg before fonts/body have settled. Crossfades to the theme bg in lockstep with the body once JS adds .app-ready to body — the :has() selector below picks that up. */ background-color: #ffffff; transition: background-color 600ms ease 220ms; } html:has(body.app-ready) { background-color: var(--bg); } /* Nav chrome tokens. Defaults render a light pill against any canvas — every theme overrides these via its theme JSON (delivered as inline custom properties on ), so the values below only show through for themes that haven't customised the nav. */ :root { --nav-ink: #050505; --nav-muted: rgba(5, 5, 5, 0.62); --nav-panel: #ffffff; --nav-panel-strong: #ffffff; --nav-line: rgba(5, 5, 5, 0.14); --nav-active: rgba(5, 5, 5, 0.08); --nav-active-ink: #050505; } body { font-family: var(--font-body); /* Start white; body.app-ready (added by JS once fonts are ready) fades the theme bg in via the transition below. The opacity transition still handles the initial unhide so we never paint with stale :root defaults. */ background-color: #ffffff; min-height: 100vh; overflow: hidden; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; opacity: 0; /* Fade opacity first (220ms), then crossfade the bg color from white to the theme bg (600ms after the opacity is done). */ transition: opacity 220ms ease, background-color 600ms ease 220ms; } body.app-ready { opacity: 1; background-color: var(--bg); } #shell { position: relative; display: block; height: 100vh; height: calc(var(--vh, 1vh) * 100); height: 100dvh; width: 100vw; background: var(--bg); } #game-area { position: absolute; inset: 0; background: var(--bg); } #game-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--bg); z-index: 1; } body.tray-active #game-frame { pointer-events: none; } /* Pause backdrop — overlays the game iframe (z-index above the iframe but well below the control bar) when the player pauses. backdrop-filter blurs whatever pixels are behind it, so the navbar pill above stays crisp. Click anywhere on it to resume. */ .game-backdrop { position: absolute; inset: 0; z-index: 1500; margin: 0; padding: 0; border: none; background: rgba(255, 255, 255, 0.65); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity: 0; pointer-events: none; cursor: pointer; transition: opacity 0.22s ease; } .game-backdrop.active { opacity: 1; pointer-events: auto; } /* Error message */ .error-message { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 100; padding: 16px 24px; background: rgba(220, 53, 69, 0.92); border-radius: 12px; color: #fff; text-align: center; font-size: 14px; line-height: 1.5; max-width: 80%; } /* Control Bar ---------- Three pills sharing the exact same visual style — only one is active at a time. State classes on #control-bar drive which pill is up: (no class) → cb-pill-idle [ Play ] .playing → cb-pill-playing [ ⏸ 0:00 💡 ] .paused → cb-pill-paused [ ▶ 📁 🔊 🔁 ℹ ] .completed → cb-pill-playing (timer frozen) Inactive pills are translated below the bar with opacity 0; the transition makes the swap read as one pill animating down + back up. */ #control-bar { position: absolute; left: 0; right: 0; top: 0; height: 68px; padding: 0; background: transparent; border-top: none; box-shadow: none; font-family: var(--font-mono); z-index: 6500; overflow: visible; color: var(--nav-ink); pointer-events: none; } .cb-badge { position: absolute; display: inline-flex; align-items: center; color: var(--ink); font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0.02em; line-height: 1; text-decoration: none; pointer-events: auto; -webkit-tap-highlight-color: transparent; } .cb-badge[hidden] { display: none; } .cb-badge-powered { position: fixed; bottom: 0; left: 0; flex-direction: column; align-items: flex-start; gap: 0; padding: 3px 7px 3px 4px; background: var(--nav-panel); color: var(--nav-ink); border-radius: 0 10px 0 0; font-size: 7px; font-weight: 500; line-height: 1.1; letter-spacing: 0.04em; text-transform: lowercase; opacity: 0.55; transition: opacity 0.18s ease; z-index: 5; } .cb-badge-powered strong { font-weight: 800; font-size: 8.5px; letter-spacing: 0.01em; text-transform: none; } .cb-badge-powered:hover { opacity: 0.95; } /* Shared pill style — every pill is the same height, padding, border-radius, and font-size so the swap-animation looks like one pill morphing. */ .cb-pill { position: absolute; left: 50%; top: 0; height: 28px; padding: 0 4px; border: none; border-radius: 0 0 14px 14px; background: var(--nav-panel); color: var(--nav-ink); display: flex; align-items: center; justify-content: center; gap: 2px; font-family: var(--font-body); font-size: 15px; font-weight: 800; line-height: 1; letter-spacing: 0; text-transform: uppercase; white-space: nowrap; cursor: pointer; box-shadow: none; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); -webkit-tap-highlight-color: transparent; transform: translate(-50%, 0); opacity: 1; pointer-events: auto; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease; will-change: transform, opacity; } /* Idle pill — same shape and size as the playing pill. Three slots: left = play icon + label (a single button so taps anywhere on the pre-play half resolve to "start the game") right = info icon (opens How to Play) The label sits in the same position as the timer in the playing pill, so the swap animation feels like one shape morphing into another. */ .cb-pill-play { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 3px 0 4px; border: none; border-radius: 999px; background: transparent; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background 0.18s ease, opacity 0.18s ease; } .cb-pill-play:active { background: color-mix(in srgb, var(--nav-ink) 14%, transparent); opacity: 0.85; } /* Text-only Start CTA: no leading icon, so balance the padding instead of using the icon-side-only padding that .cb-pill-play assumes. */ #howto-start-btn { padding: 0 18px; } .cb-pill-play-icon { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; /* Optical-center nudge for the play triangle. */ margin-left: 2px; } .cb-pill-play-icon svg { width: 14px; height: 14px; } .cb-pill-favicon { display: inline-block; width: 16px; height: 16px; object-fit: contain; vertical-align: middle; margin-left: 6px; flex-shrink: 0; filter: var(--brand-favicon-filter, brightness(0)); } /* Default visibility: the idle pill (How to Play) is the resting state and shows by default. The other pills tuck above the viewport until their state class flips them in. The slide-from-top on play/pause/etc. comes from translate(-50%, -160%) → translate(-50%, 0). */ .cb-pill-idle { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; } /* First-paint entrance: while body.preload is set, the idle pill sits above the viewport. JS removes .preload (alongside .app-ready) once fonts are ready, and the .cb-pill `transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease` rule slides the pill down into place — same curve and timing as the .playing/.paused state changes, so the entrance reads as a slide instead of a fade. */ body.preload .cb-pill-idle { transform: translate(-50%, -200%); opacity: 0; pointer-events: none; } .cb-pill-playing, .cb-pill-paused, .cb-pill-howto { transform: translate(-50%, -160%); opacity: 0; pointer-events: none; } /* Playing state — idle slides up out of the way, playing slides in. */ #control-bar.playing .cb-pill-idle, #control-bar.completed .cb-pill-idle { transform: translate(-50%, -160%); opacity: 0; pointer-events: none; } #control-bar.playing .cb-pill-playing, #control-bar.completed .cb-pill-playing { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; } /* Paused overrides playing: the playing pill drops out, paused pill rises. */ #control-bar.paused .cb-pill-idle, #control-bar.paused .cb-pill-playing { transform: translate(-50%, -160%); opacity: 0; pointer-events: none; } #control-bar.paused .cb-pill-paused { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; } /* Completed-state pill: same paused pill but stripped to share / archive / restart. Resume and How-to-play don't apply once the round is done; mute swaps out for share. */ #share-btn { display: none; } #control-bar.completed.paused #resume-btn, #control-bar.completed.paused #howto-btn, #control-bar.completed.paused #sound-btn { display: none; } #control-bar.completed.paused #share-btn { display: inline-flex; } /* Howto overrides everything: while the iframe is showing How to Play, all regular pills slide down and the Start CTA rises in their place. JS adds .howto-open to #control-bar in doOpenHowto and removes it on game_howto_closed. */ #control-bar.howto-open .cb-pill-idle, #control-bar.howto-open .cb-pill-playing, #control-bar.howto-open .cb-pill-paused { transform: translate(-50%, -160%); opacity: 0; pointer-events: none; } #control-bar.howto-open .cb-pill-howto { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; } /* Pill internals --------------- Icon buttons sit inside the pill, sized to keep the pill height tight. The timer is plain inline text — it shares the pill's font weight and size so it reads as one continuous label with the icons. */ .cb-pill-icon { width: 24px; height: 24px; border: none; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; transition: background 0.18s ease, opacity 0.18s ease, transform 0.12s ease; } .cb-pill-icon:active { background: color-mix(in srgb, var(--nav-ink) 14%, transparent); transform: scale(0.94); opacity: 0.85; } .cb-pill-icon svg { width: 14px; height: 14px; } .cb-pill-icon.disabled { opacity: 0.32; pointer-events: none; } /* "Disable Pause" mode: swap the pause icon for a gear that opens the settings menu without freezing the game. The default state shows the pause icon and hides the gear. */ #settings-btn { display: none; } #control-bar.no-pause #pause-btn { display: none; } #control-bar.no-pause #settings-btn { display: inline-flex; } .cb-pill-timer { /* Inherit the .cb-pill system sans-serif — using var(--font-body) here pulls the theme's body face (e.g. broadsheet's serif), which sits on a different baseline and reads off-center inside the pill. */ font-family: inherit; font-size: 13px; font-weight: 800; color: inherit; font-variant-numeric: tabular-nums; letter-spacing: 0; padding: 0 6px; text-transform: none; pointer-events: none; } /* Idle-pill label — same size/weight as the timer but keeps the parent's uppercase transform so "Play" reads as a CTA. Inherits the pill's system sans-serif (see .cb-pill-timer note above). */ .cb-pill-label { font-family: inherit; font-size: 13px; font-weight: 800; color: inherit; letter-spacing: 0; padding: 0 4px; pointer-events: none; } /* Per-state pill overrides ------------------------- The playing pill stays compact (28px shell from the .cb-pill base) so the timer reads as a quiet HUD. The paused pill is the menu — it grows to 34px with 28px tap targets and a roomier gap so the 5 icons (resume / archive / sound / restart / how-to) aren't crammed together on mobile. Bottom-rounded since the bar hangs from the top edge. */ .cb-pill-paused { height: 34px; border-radius: 0 0 17px 17px; padding: 0 8px; gap: 6px; } .cb-pill-paused .cb-pill-icon { width: 28px; height: 28px; } .cb-pill-paused .cb-pill-icon svg { width: 16px; height: 16px; } /* Disabled state for the hint icon when the player has spent all hints. */ .cb-hint-btn.disabled { opacity: 0.32; pointer-events: none; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* In-bar trays: archive days + restart confirm. Render as proper pills (same positioning + bg as .cb-pill) so the contents sit on a high-contrast nav-panel surface. Without the bg the white nav-ink contents floated on the iframe's light page bg and read as invisible (the bug user reported on workspace dark nav). */ .cb-tray { position: absolute; left: 50%; top: 0; display: flex; align-items: center; justify-content: center; gap: 6px; /* Drawer sizes to its tallest child (restart confirm = 34px, archive day-pill = 39px) plus tight vertical padding so circular buttons sit fully inside the rounded pill. */ padding: 4px 10px; background: var(--nav-panel); color: var(--nav-ink); border-radius: 0 0 18px 18px; width: max-content; max-width: calc(100% - 24px); transform: translate(-50%, -160%); opacity: 0; pointer-events: none; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease; will-change: transform, opacity; z-index: 2; } #control-bar.archive-mode .cb-archive-tray, #control-bar.restart-mode .cb-restart-tray { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; } /* When a tray (archive picker, restart confirm) is open, drop every pill below the bar so the tray has the row to itself. */ #control-bar.archive-mode .cb-pill, #control-bar.restart-mode .cb-pill { transform: translate(-50%, -160%); opacity: 0; pointer-events: none; } /* Archive pills */ .cb-archive-tray { gap: 4px; padding: 4px 6px; justify-content: center; } .cb-archive-pills { display: flex; gap: 4px; align-items: center; justify-content: center; } .cb-tray-close { width: 32px; height: 32px; border: none; border-radius: 999px; /* Tray is now a colored pill itself; a matching nav-panel here would be invisible. Transparent so just the icon stroke shows. */ background: transparent; color: var(--nav-ink); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; -webkit-tap-highlight-color: transparent; } .cb-tray-close svg { width: 16px; height: 16px; } .cb-tray-close:active { opacity: 0.6; } @media (max-width: 420px) { .cb-archive-pills { gap: 3px; } } .cb-day-pill { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 38px; height: 39px; padding: 0; border: none; border-radius: 999px; background: transparent; color: var(--nav-ink); cursor: pointer; font-family: inherit; -webkit-tap-highlight-color: transparent; flex: 0 0 auto; } .cb-day-pill:active { opacity: 0.6; } .cb-day-pill-label { font-size: 9px; font-weight: 700; color: var(--nav-muted); text-transform: uppercase; letter-spacing: 0.04em; line-height: 1; } .cb-day-pill-num { font-size: 13px; font-weight: 800; line-height: 1; } .cb-day-pill.active, .cb-day-pill.completed { background: var(--nav-active); color: var(--nav-active-ink); } .cb-day-pill.active .cb-day-pill-label, .cb-day-pill.completed .cb-day-pill-label { color: var(--nav-active-ink); opacity: 0.7; } /* Restart tray */ .cb-restart-tray { gap: 10px; } .cb-restart-question { font-family: inherit; font-size: 12px; font-weight: 800; color: var(--nav-ink); text-transform: uppercase; letter-spacing: 0; padding: 0 4px; } .cb-restart-btn { width: 34px; height: 34px; border: none; border-radius: 999px; cursor: pointer; display: flex; align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; } .cb-restart-btn svg { width: 18px; height: 18px; } /* Confirm = primary action; cancel = secondary. Both sit inside a pill whose background is --nav-panel, so we can't use --nav-panel for cancel (it would vanish on dark-nav themes — black on black). Use the existing --nav-active translucent ink for confirm and a transparent cancel that contrasts via its outline. */ .cb-restart-btn-confirm { background: var(--nav-active); color: var(--nav-ink); } .cb-restart-btn-cancel { background: transparent; color: var(--nav-ink); border: 1px solid var(--nav-line); } .cb-restart-btn:active { opacity: 0.75; } /* Modal */ /* Modals must be above endscreen (z-index 6000) */ .modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); display: flex; align-items: center; justify-content: center; z-index: 7000; } .modal-panel { width: min(380px, calc(100vw - 32px)); background: var(--surface); color: var(--ink); border: var(--line-width) solid var(--line-strong); box-shadow: var(--shadow-modal); border-radius: var(--br); overflow: hidden; } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 20px 20px 16px; } .modal-header h2 { font-family: var(--font-display); font-size: 22px; font-weight: var(--display-weight); font-style: var(--display-style); letter-spacing: var(--display-tracking); color: var(--ink); margin: 0; text-transform: var(--display-case); } .modal-close-btn { width: 36px; height: 36px; border: none; background: transparent; color: var(--ink); display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; } .modal-close-btn:active { opacity: 0.5; } .modal-close-btn svg { width: 20px; height: 20px; } .modal-body { padding: 0 20px 20px; } .modal-text-title { font-size: 15px; font-weight: 700; color: var(--ink); } .modal-text-desc { font-size: 14px; color: var(--ink-dim); margin-top: 4px; } .modal-actions { display: flex; gap: 12px; justify-content: flex-end; padding-top: 20px; } .modal-btn { padding: 10px 16px; border: var(--line-width) solid var(--line-strong); border-radius: var(--br-sm); background: var(--surface); color: var(--ink); font-family: var(--font-body); font-weight: 800; font-size: 13px; cursor: pointer; box-shadow: var(--shadow-btn); text-transform: uppercase; letter-spacing: 0.04em; transition: transform 0.05s, box-shadow 0.05s; } .modal-btn:active { box-shadow: none; transform: var(--press-xform, translate(2px, 2px)); } .modal-btn-danger { background: var(--cta-bg); color: var(--cta-fg); border-color: var(--line-strong); } /* Username input */ .username-input-row { display: flex; gap: 8px; margin-top: 12px; } .username-input { flex: 1; min-width: 0; padding: 10px 12px; border: var(--line-width) solid var(--line-strong); border-radius: var(--br-sm); background: var(--surface); font-family: var(--font-body); font-size: 14px; font-weight: 700; color: var(--ink); outline: none; } .username-input:focus { box-shadow: 0 0 0 2px var(--accent-soft); } /* Bottom sheet (archive, restart confirm) */ .bottom-sheet { position: fixed; inset: 0; z-index: 7000; background: rgba(0, 0, 0, 0.45); display: flex; align-items: flex-end; justify-content: center; pointer-events: auto; animation: bottomSheetBackdropIn 0.25s ease; } @keyframes bottomSheetBackdropIn { from { background: rgba(0, 0, 0, 0); } to { background: rgba(0, 0, 0, 0.45); } } .bottom-sheet.hidden { display: none !important; } .bottom-sheet-panel { width: min(420px, 100%); background: var(--surface); color: var(--ink); border-radius: var(--br) var(--br) 0 0; border: var(--line-width) solid var(--line-strong); border-bottom: none; box-shadow: var(--shadow-modal); padding: 10px 18px 22px; display: flex; flex-direction: column; animation: bottomSheetIn 0.28s cubic-bezier(0.22, 1, 0.36, 1); } @keyframes bottomSheetIn { from { transform: translateY(100%); } to { transform: translateY(0); } } .bottom-sheet-close { align-self: flex-end; width: 30px; height: 30px; border: var(--line-width) solid var(--line-strong); border-radius: var(--br-sm); background: var(--surface); color: var(--ink); cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-btn); -webkit-tap-highlight-color: transparent; } .bottom-sheet-close:active { box-shadow: none; transform: var(--press-xform, translate(2px, 2px)); } .bottom-sheet-close svg { width: 16px; height: 16px; } .bottom-sheet-body { display: flex; flex-direction: column; gap: 6px; padding: 0 2px 4px; } .bottom-sheet-title { font-family: var(--font-display); font-size: 20px; font-weight: var(--display-weight); font-style: var(--display-style); letter-spacing: var(--display-tracking); text-transform: var(--display-case); color: var(--ink); margin: 0; } .bottom-sheet-text { font-size: 14px; font-weight: 700; color: var(--ink); margin: 0; } .bottom-sheet-desc { font-size: 13px; color: var(--ink-dim); margin: 0; } .bottom-sheet-actions { display: flex; gap: 10px; justify-content: flex-end; padding-top: 14px; } .archive-days { display: flex; gap: 6px; justify-content: center; overflow-x: auto; scrollbar-width: none; padding: 2px 0; } .archive-days::-webkit-scrollbar { display: none; } .archive-day { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 40px; border: none; background: transparent; cursor: pointer; font-family: var(--font-body); -webkit-tap-highlight-color: transparent; padding: 4px 2px; } .archive-day:active { opacity: 0.5; } .archive-day-label { font-size: 10px; font-weight: 700; color: var(--ink-dim); text-transform: uppercase; } .archive-day-num { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: var(--ink); border: 2px solid transparent; background: var(--chip-bg); } .archive-day.active .archive-day-num { background: var(--cta-bg); color: var(--cta-fg); } .archive-day.completed .archive-day-num { background: var(--correct); border-color: var(--correct); color: var(--on-accent); } .archive-day.completed.active .archive-day-num { background: var(--correct); border-color: var(--cta-bg); outline: 2px solid var(--cta-bg); outline-offset: -2px; } .archive-day.completed .archive-day-num svg { width: 14px; height: 14px; }