@import url("/styles/tokens.css"); /* Bubbles. Tokens mirror public/styles/main.css so the game reads as part of the site rather than a bolted-on app. */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { /* House tokens live in /styles/tokens.css; the short names below are aliases so this stylesheet reads the same as before. Room-specific tokens follow. */ --bg: var(--noir-bg); --panel: var(--noir-panel); --panel-strong: var(--noir-panel-strong); --panel-border: var(--noir-border); --text: var(--noir-text); --muted: var(--noir-muted); --muted-bright: var(--noir-muted-bright); --accent: var(--noir-accent); --accent-strong: var(--noir-accent-strong); --gold: var(--noir-gold); --danger: var(--noir-danger); --shadow: var(--noir-shadow); } /* The gradient below is background-attachment: fixed, so it only ever paints the viewport. Without a solid colour on , anything scrolled past the first screenful (the level list) renders on white. */ html { background: #050913; } html, body { height: 100%; } body.bb-body { min-height: 100%; font-family: var(--noir-font-sans); color: var(--text); background: radial-gradient(circle at 50% 18%, rgba(79, 116, 255, 0.16), rgba(79, 116, 255, 0) 38%), linear-gradient(180deg, #060a13 0%, #08111c 46%, #04070e 100%); background-attachment: fixed; -webkit-font-smoothing: antialiased; } .bb-sub { color: var(--muted); font-size: 0.85rem; line-height: 1.5; } .bb-label { color: var(--muted); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; } .bb-back { color: var(--muted-bright); text-decoration: none; font-size: 0.82rem; padding: 6px 10px; border-radius: 9px; transition: background 0.2s, color 0.2s; white-space: nowrap; } .bb-back:hover, .bb-back:focus-visible { background: rgba(120, 160, 255, 0.12); color: var(--text); } /* ------------------------------------------------------------------ buttons */ .bb-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 15px; border-radius: 11px; cursor: pointer; font: 500 0.85rem "Sora", sans-serif; color: var(--text); text-decoration: none; background: var(--panel); border: 1px solid var(--panel-border); transition: background 0.18s, border-color 0.18s, transform 0.18s, opacity 0.18s; } .bb-btn:hover:not(:disabled), .bb-btn:focus-visible:not(:disabled) { background: rgba(120, 160, 255, 0.16); border-color: rgba(154, 190, 255, 0.34); transform: translateY(-1px); outline: none; } .bb-btn:disabled { opacity: 0.35; cursor: not-allowed; } .bb-btn--primary { background: rgba(78, 124, 255, 0.28); border-color: rgba(136, 182, 255, 0.5); } .bb-btn--quiet { background: none; border-color: transparent; color: var(--muted); font-size: 0.78rem; } .bb-btn--quiet:hover { color: var(--text); background: rgba(120, 160, 255, 0.12); } #btn-reset:hover { color: var(--danger); background: rgba(232, 92, 106, 0.1); } /* The recycle button lights up on its own when the evaluator reports that neither dealt colour can do anything — teaches the mechanic without a tutorial step. */ .bb-btn.urgent { border-color: rgba(241, 213, 156, 0.75); background: rgba(241, 213, 156, 0.16); animation: bb-nudge 1.5s ease-in-out infinite; } @keyframes bb-nudge { 50% { box-shadow: 0 0 0 5px rgba(241, 213, 156, 0.1); } } kbd { font: 500 0.68rem "IBM Plex Mono", monospace; color: var(--muted-bright); background: rgba(0, 0, 0, 0.34); border: 1px solid var(--panel-border); border-radius: 5px; padding: 1px 5px; } .bb-count { font: 500 0.72rem "IBM Plex Mono", monospace; background: rgba(0, 0, 0, 0.32); border-radius: 20px; padding: 1px 7px; } .bb-icon { width: 38px; height: 38px; flex: none; border-radius: 50%; cursor: pointer; background: var(--panel); border: 1px solid var(--panel-border); color: var(--muted-bright); font-size: 0.7rem; letter-spacing: 1px; } .bb-icon:hover { background: rgba(120, 160, 255, 0.16); color: var(--text); } /* -------------------------------------------------------------------- stars */ .bb-stars { display: inline-flex; gap: 3px; } .star { color: rgba(255, 255, 255, 0.14); font-size: 1rem; line-height: 1; transition: color 0.3s, text-shadow 0.3s; } .star.lit { color: var(--gold); text-shadow: 0 0 10px rgba(241, 213, 156, 0.45); } .bb-stars--big .star { font-size: 2rem; } /* --------------------------------------------------------------- play screen */ .bb-play { overflow: hidden; } .bb-shell { height: 100dvh; max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); } .bb-topbar { display: flex; align-items: center; gap: 12px; } .bb-titles { flex: 1; min-width: 0; text-align: center; } .bb-titles h1 { font-size: 1rem; font-weight: 600; letter-spacing: 0.01em; } .bb-titles .bb-sub { font-size: 0.72rem; } .bb-hud { display: flex; align-items: center; gap: 14px; padding: 9px 14px; border-radius: 13px; background: var(--panel); border: 1px solid var(--panel-border); } .bb-stat { display: flex; flex-direction: column; gap: 1px; min-width: 62px; } .bb-stat--right { margin-left: auto; text-align: right; } .bb-stat b { font: 600 1.15rem "IBM Plex Mono", monospace; } .bb-combo { font: 600 0.78rem "IBM Plex Mono", monospace; color: var(--gold); opacity: 0; transition: opacity 0.25s; } .bb-combo.on { opacity: 1; } .bb-stage-wrap { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; } /* Size is set from JS (see renderer.resize) — the canvas backing store defines the element's intrinsic size, so CSS alone cannot fit it correctly. */ #stage { display: block; border-radius: 16px; touch-action: none; cursor: crosshair; border: 1px solid var(--panel-border); box-shadow: var(--shadow); } #stage:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .bb-controls { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; } /* -------------------------------------------------------------------- modals */ .bb-modal { position: fixed; inset: 0; z-index: 10; display: grid; place-items: center; padding: 20px; background: rgba(4, 7, 14, 0.78); backdrop-filter: blur(7px); } .bb-modal[hidden] { display: none; } .bb-card { width: min(420px, 100%); display: flex; flex-direction: column; gap: 14px; align-items: center; text-align: center; padding: 26px 24px; border-radius: 18px; background: var(--panel-strong); border: 1px solid var(--panel-border); box-shadow: var(--shadow); } .bb-card h2 { font-size: 1.35rem; font-weight: 600; } .bb-final b { font: 600 1.5rem "IBM Plex Mono", monospace; margin-left: 8px; } .bb-card-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; } .bb-card-actions [hidden] { display: none; } .bb-keys { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; text-align: left; font-size: 0.8rem; color: var(--muted-bright); width: 100%; } .bb-keys dt { white-space: nowrap; } .bb-keys dd { color: var(--muted); } /* --------------------------------------------------------------- menu screen */ .bb-menu { max-width: 640px; margin: 0 auto; padding: 40px 18px 60px; display: flex; flex-direction: column; gap: 20px; } .bb-menu-head { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } .bb-menu-head h1 { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.01em; margin-top: 6px; } .bb-menu-head .bb-sub { max-width: 46ch; } .bb-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .bb-mode { display: flex; flex-direction: column; gap: 5px; text-align: left; cursor: pointer; padding: 13px 15px; border-radius: 13px; color: var(--text); font-family: inherit; background: var(--panel); border: 1px solid var(--panel-border); transition: background 0.18s, border-color 0.18s; } .bb-mode b { font-size: 0.95rem; font-weight: 600; } .bb-mode span { font-size: 0.74rem; color: var(--muted); line-height: 1.45; } .bb-mode:hover { border-color: rgba(154, 190, 255, 0.3); } .bb-mode.on { background: rgba(78, 124, 255, 0.2); border-color: rgba(136, 182, 255, 0.5); } .bb-progress { font: 500 0.76rem "IBM Plex Mono", monospace; color: var(--muted); } .bb-levels { list-style: none; display: flex; flex-direction: column; gap: 7px; } .bb-level { display: grid; align-items: center; gap: 4px 14px; grid-template-columns: 34px 1fr auto auto; grid-template-areas: "n name stars best" "n meta stars best"; padding: 11px 15px; border-radius: 12px; text-decoration: none; color: var(--text); background: var(--panel); border: 1px solid var(--panel-border); transition: background 0.18s, border-color 0.18s, transform 0.18s; } a.bb-level:hover, a.bb-level:focus-visible { background: rgba(120, 160, 255, 0.14); border-color: rgba(154, 190, 255, 0.32); transform: translateX(2px); outline: none; } .bb-level.locked { opacity: 0.35; cursor: not-allowed; } .bb-level-n { grid-area: n; font: 600 1.1rem "IBM Plex Mono", monospace; color: var(--muted); } .bb-level-name { grid-area: name; font-weight: 600; font-size: 0.92rem; } .bb-level-meta { grid-area: meta; font-size: 0.7rem; color: var(--muted); } .bb-level .bb-stars { grid-area: stars; } .bb-level-best { grid-area: best; font: 500 0.78rem "IBM Plex Mono", monospace; color: var(--muted); min-width: 44px; text-align: right; } .bb-menu-foot { display: flex; justify-content: center; margin-top: 6px; } /* ------------------------------------------------------------------ narrow */ @media (max-width: 520px) { .bb-modes { grid-template-columns: 1fr; } .bb-menu { padding: 26px 14px 44px; } .bb-hud { gap: 10px; padding: 8px 11px; } .bb-stat { min-width: 52px; } .bb-stat b { font-size: 1rem; } .bb-btn { padding: 8px 11px; font-size: 0.78rem; } .bb-titles h1 { font-size: 0.9rem; } .bb-titles .bb-sub { display: none; } /* On a phone the combo readout would push the ammo counter off the row. */ .bb-combo { display: none; } } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ------------------------------------------------------------ chapters */ .bb-chapter { margin-bottom: 26px; } .bb-chapter.locked { opacity: 0.55; } .bb-chapter-head { display: flex; align-items: baseline; gap: 12px; padding-bottom: 6px; margin-bottom: 4px; border-bottom: 1px solid var(--panel-border); } .bb-chapter-head h2 { font-size: 1rem; font-weight: 600; flex: 1; } .bb-chapter-stars { font: 500 0.76rem "IBM Plex Mono", monospace; color: var(--gold); } .bb-chapter-lock { font: 500 0.72rem "IBM Plex Mono", monospace; color: var(--muted); } .bb-chapter-blurb { font-size: 0.76rem; color: var(--muted); margin-bottom: 10px; line-height: 1.5; } /* -------------------------------------------------------------- endless */ /* Endless has no stars and no ammo — the HUD slot becomes a depth counter. */ body.bb-endless .bb-hud .bb-stars { display: none; } /* Deliberately quieter than a level row and placed after the chapters: the campaign is the main event, endless is the side door. */ .bb-endless { display: flex; flex-direction: column; gap: 4px; padding: 12px 15px; border-radius: 12px; text-decoration: none; color: var(--text); background: var(--panel); border: 1px solid var(--panel-border); opacity: 0.82; transition: opacity 0.18s, border-color 0.18s, background 0.18s; } .bb-endless:hover, .bb-endless:focus-visible { opacity: 1; background: rgba(120, 160, 255, 0.12); border-color: rgba(154, 190, 255, 0.32); outline: none; } .bb-endless-head { display: flex; align-items: baseline; gap: 12px; } .bb-endless-head b { font-size: 0.9rem; font-weight: 600; flex: 1; } .bb-endless-best { font: 500 0.72rem "IBM Plex Mono", monospace; color: var(--muted); } .bb-endless-blurb { font-size: 0.72rem; color: var(--muted); line-height: 1.45; } /* --------------------------------------------------------- polish pass */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .bb-btn:active:not(:disabled), .bb-icon:active { transform: translateY(1px) scale(0.98); } .bb-control-note { color: var(--gold); font-size: 0.68rem; } .bb-star-progress { display: none; align-items: center; gap: 6px; min-width: 0; flex: 1; } /* .bb-pressure and .bb-star-progress are turned on by layout rules below, so a plain [hidden] (a UA rule) would lose to them. The game hides both by attribute — endless has no stars — so the attribute has to win. */ .bb-pressure[hidden], .bb-star-progress[hidden], .bb-gesture-hint[hidden], .bb-blocker-tip[hidden], .bb-btn[hidden], .bb-icon[hidden] { display: none !important; } .bb-star-progress b { font: 500 0.66rem "IBM Plex Mono", monospace; color: var(--muted-bright); white-space: nowrap; } .bb-progress-track, .bb-pressure-track { display: block; overflow: hidden; height: 5px; flex: 1; min-width: 30px; border-radius: 99px; background: rgba(255, 255, 255, 0.11); } .bb-progress-track i, .bb-pressure-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--gold); transition: width 0.2s ease; } .bb-pressure { display: flex; align-items: center; gap: 8px; padding: 0 3px; min-height: 20px; color: var(--muted-bright); font: 500 0.68rem "IBM Plex Mono", monospace; } .bb-pressure small { color: var(--muted); font: 400 0.68rem "Sora", sans-serif; } .bb-pressure.imminent .bb-pressure-track i { background: var(--danger); } .bb-pressure.imminent { color: #ffc0c7; } .bb-gesture-hint, .bb-blocker-tip { text-align: center; color: var(--muted-bright); font-size: 0.72rem; line-height: 1.25; } .bb-gesture-hint { color: var(--gold); } .bb-status { position: fixed; z-index: 20; left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); bottom: calc(64px + env(safe-area-inset-bottom)); margin: auto; text-align: center; color: var(--muted-bright); font-size: 0.75rem; pointer-events: none; } .bb-status:not(:empty) { max-width: 460px; padding: 7px 12px; border-radius: 10px; background: rgba(5,9,19,0.92); } .bb-play .bb-status, .bb-play .bb-status:not(:empty) { position: static; margin: 0; max-width: none; padding: 0 4px; background: none; flex: 0 0 30px; height: 30px; font-size: 0.68rem; line-height: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .bb-modal { overflow-y: auto; } .bb-card { margin: auto; } .bb-reduced-motion * { animation: none !important; transition: none !important; } .bb-settings { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; } .bb-settings .bb-btn[aria-pressed="true"] { color: var(--text); border-color: rgba(136, 182, 255, 0.45); background: rgba(78, 124, 255, 0.18); } .bb-input-help span { display: none; } .bb-card > p { max-width: 40ch; line-height: 1.5; } .bb-load-error { margin: 20px 0; } .bb-quick-start { display: flex; } .bb-continue { min-height: 44px; width: 100%; } @media (pointer: fine) { .bb-mouse-help { display: inline !important; } } @media (pointer: coarse) { .bb-touch-help { display: inline !important; } .bb-controls kbd { display: none; } .bb-btn, .bb-icon, .bb-mode { min-height: 44px; } .bb-icon { width: 44px; height: 44px; } } @media (any-hover: none) { .bb-btn:hover:not(:disabled), .bb-icon:hover { transform: none; background: var(--panel); } } @media (max-width: 520px) { .bb-shell { gap: 6px; padding: calc(7px + env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left)); } .bb-topbar { gap: 5px; } .bb-back { font-size: 0.72rem; padding: 6px 4px; } .bb-icon { width: 44px; height: 44px; } .bb-hud { min-height: 50px; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; gap: 3px 7px; padding: 6px 9px; } .bb-hud > .bb-stat:first-child { grid-column: 1; grid-row: 1 / 3; } .bb-hud > .bb-stars { grid-column: 2; grid-row: 1; } .bb-hud > .bb-combo { grid-column: 3; grid-row: 1; } .bb-hud > .bb-star-progress { grid-column: 2 / 4; grid-row: 2; } .bb-hud > .bb-stat--right { grid-column: 4; grid-row: 1 / 3; } .bb-stat { min-width: 47px; } .bb-stars { gap: 1px; } .star { font-size: 0.9rem; } .bb-combo { display: block; margin-left: auto; font-size: 0.65rem; white-space: nowrap; } .bb-stat--right { margin-left: 0; } .bb-star-progress { display: flex; } .bb-star-progress .bb-label { display: none; } .bb-pressure { gap: 6px; min-height: 18px; } .bb-pressure small { display: none; } .bb-controls { gap: 6px; flex-wrap: wrap; } .bb-controls .bb-btn { min-height: 44px; flex: 1; padding: 7px 8px; white-space: nowrap; } .bb-controls #btn-aim-hint { flex: 1 0 100%; } .bb-gesture-hint, .bb-blocker-tip { min-height: 0; } .bb-stage-wrap { min-height: 0; } } @media (max-width: 360px) { .bb-control-note { display: none; } .bb-controls .bb-btn { font-size: 0.71rem; padding-inline: 6px; } .bb-hud { gap: 5px; } .bb-combo { max-width: 56px; overflow: hidden; text-overflow: ellipsis; } } @media (orientation: landscape) and (max-height: 640px) { .bb-play { overflow: hidden; } .bb-shell { max-width: 1060px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(190px, 250px); grid-template-rows: auto minmax(0, 1fr) auto auto auto; column-gap: 10px; row-gap: 6px; padding: calc(6px + env(safe-area-inset-top)) calc(10px + env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) calc(10px + env(safe-area-inset-left)); } .bb-topbar { grid-column: 1 / -1; grid-row: 1; } .bb-stage-wrap { grid-column: 1; grid-row: 2 / 6; } .bb-hud { grid-column: 2; grid-row: 2; align-self: start; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 9px; } .bb-hud > .bb-stat:first-child, .bb-hud > .bb-stars, .bb-hud > .bb-stat--right { grid-column: auto; grid-row: auto; } .bb-hud > .bb-combo, .bb-hud > .bb-star-progress { grid-column: 1 / -1; grid-row: auto; } .bb-stat--right { margin-left: 0; } .bb-hud .bb-stars { justify-content: end; } .bb-combo { grid-column: 1 / -1; text-align: center; } /* Landscape hides the threshold triplet in the topbar, so the bar is the only remaining read on star progress. */ .bb-star-progress { grid-column: 1 / -1; display: flex; } .bb-play .bb-status { grid-column: 2; grid-row: 3; align-self: center; } .bb-pressure { grid-column: 2; grid-row: 4; align-self: center; } .bb-pressure small { display: none; } .bb-controls { grid-column: 2; grid-row: 5; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .bb-controls .bb-btn { min-height: 44px; padding-inline: 7px; } .bb-icon { width: 44px; height: 44px; } .bb-controls #btn-aim-hint { grid-column: 1 / -1; } .bb-gesture-hint, .bb-blocker-tip { display: none; } .bb-topbar .bb-sub { display: none; } }