/* Bobble — multiplayer word-rack game. Mobile-first. Shares look-and-feel with Wordwright but is otherwise standalone. */ :root { --bg: #0e1118; --surface-1: #161a23; --surface-2: #1d2230; --text: #e6e9f2; --text-dim: #8d93a8; --border: #2a3142; --accent: #7aa2ff; --accent-2: #a7c0ff; --good: #5ad07e; --warn: #ffb347; --bad: #ff6b6b; --you: #ffd166; --radius-md: 12px; --radius-sm: 8px; /* Text colour that sits on top of the accent (buttons, brand mark). */ --on-accent: #0e1118; /* Page-background gradient stop. Darker than --bg so the top of the page gets a subtle radial tint. */ --bg-accent: #1c2540; } /* Light theme — applied when is set by the early script in lib/layout.php. Mirrors the palette structure so any component referencing var(--text) etc. doesn't need its own override. */ :root[data-theme="light"] { --bg: #f5f7fb; --surface-1: #ffffff; --surface-2: #eef1f9; --text: #1a1f2e; --text-dim: #5a6378; --border: #d3d9e6; --accent: #4a6fdc; --accent-2: #6e8ee5; --good: #2a9d4f; --warn: #b97a16; --bad: #d83c3c; --you: #b48400; --on-accent: #ffffff; --bg-accent: #dde5f6; } * { box-sizing: border-box; } html, body { margin: 0; /* Slight gradient instead of a flat colour so the page already feels less spreadsheet-y before the floating blobs even render. The gradient stop is theme-driven so light mode gets a soft pale-blue, dark gets the original deep midnight. */ background: radial-gradient(ellipse at 30% 0%, var(--bg-accent) 0%, var(--bg) 60%); color: var(--text); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -webkit-text-size-adjust: 100%; line-height: 1.45; min-height: 100vh; overflow-x: hidden; } /* ===================== Animated background =========================== Three blurred coloured discs that drift around the viewport, sitting behind the container. GPU-accelerated transforms and opacity only, so they're cheap. pointer-events:none so they never steal taps. */ .bb-bg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } .bb-blob { position: absolute; width: 60vmin; height: 60vmin; border-radius: 50%; /* Halved the blur radius (60→30 px) and dropped opacity 0.30→0.20 to cut the compositor cost — on weaker phones this had been the single biggest source of touch lag because the blur shader ran every frame of the blob's drift animation. The visual delta is barely perceptible; the latency improvement is not. */ filter: blur(30px); opacity: 0.20; will-change: transform, opacity; } /* Auto-applied by bobble.js when navigator.deviceMemory < 2 GB, hardwareConcurrency < 4, or prefers-reduced-motion is set. Hides the animated background entirely so the GPU has nothing competing with the game's input + render. */ body.bb-perf-low .bb-bg { display: none; } .bb-blob-1 { background: var(--accent); top: -10vmin; left: -10vmin; animation: blob-1 22s ease-in-out infinite; } .bb-blob-2 { background: var(--decryp, #b58cf2); bottom: -15vmin; right: -10vmin; animation: blob-2 28s ease-in-out infinite; } .bb-blob-3 { background: var(--good); top: 40vh; left: 30vw; animation: blob-3 34s ease-in-out infinite; opacity: 0.18; } @keyframes blob-1 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(15vw, 18vh) scale(1.15); } } @keyframes blob-2 { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(-12vw, -22vh) scale(1.1); } } @keyframes blob-3 { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(-25vw, 8vh) scale(1.2); } 66% { transform: translate(20vw, -16vh) scale(0.9); } } @media (prefers-reduced-motion: reduce) { .bb-blob { animation: none; } } /* Pressure vignette: dormant by default, glows red as time runs out. The live game JS adds `body.low-time` then `body.crunch-time` to crank intensity. inset box-shadow keeps it from intercepting taps. */ .bb-vignette { position: fixed; inset: 0; z-index: -1; pointer-events: none; box-shadow: inset 0 0 0 rgba(255, 107, 107, 0); transition: box-shadow .4s ease; } body.low-time .bb-vignette { box-shadow: inset 0 0 70px rgba(255, 107, 107, 0.55); } body.crunch-time .bb-vignette { box-shadow: inset 0 0 110px rgba(255, 107, 107, 0.85); animation: vignette-pulse 0.6s ease-in-out infinite alternate; } @keyframes vignette-pulse { from { box-shadow: inset 0 0 100px rgba(255, 107, 107, 0.55); } to { box-shadow: inset 0 0 160px rgba(255, 107, 107, 0.95); } } @media (prefers-reduced-motion: reduce) { body.crunch-time .bb-vignette { animation: none; } } .container { max-width: 720px; margin: 0 auto; padding: 14px 14px 40px; } header.top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; } .brand { display: flex; align-items: center; gap: 10px; } .brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; background: var(--accent); color: var(--on-accent); font-weight: 800; font-size: 18px; } h1 { margin: 0; font-size: 22px; font-weight: 700; } h2 { margin: 12px 0 6px; font-size: 18px; } h3 { margin: 8px 0 4px; font-size: 16px; } p { margin: 6px 0; } a { color: var(--accent); } a:hover { color: var(--accent-2); } .muted { color: var(--text-dim); } .tag-time { color: var(--text-dim); font-size: 13px; font-variant-numeric: tabular-nums; } hr.divider { border: none; border-top: 1px solid var(--border); margin: 14px 0; } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; min-height: 42px; border-radius: var(--radius-sm); background: var(--accent); color: var(--on-accent); border: 1px solid var(--accent); font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; touch-action: manipulation; } .btn:hover { background: var(--accent-2); border-color: var(--accent-2); } .btn.secondary { background: transparent; color: var(--text); border: 1px solid var(--border); } .btn.secondary:hover { color: var(--text); background: var(--surface-2); } .btn:disabled { opacity: 0.55; cursor: not-allowed; } .row { display: flex; gap: 8px; align-items: center; } .row.center { justify-content: center; } .row.between { justify-content: space-between; } .row.wrap { flex-wrap: wrap; } /* Forms */ .input, select.input { width: 100%; background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; min-height: 42px; font: inherit; } .input.large { font-size: 22px; letter-spacing: 4px; text-transform: uppercase; text-align: center; } .label { font-size: 12px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; } /* Round-length slider on the lobby's host card. Track + thumb are styled explicitly because the WebKit and Firefox defaults look quite different, especially in dark mode. */ .duration-value { color: var(--text); font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; } .duration-ticks { display: flex; justify-content: space-between; font-size: 11px; color: var(--text-dim); padding: 0 6px; margin-top: 2px; font-variant-numeric: tabular-nums; } input[type=range].slider { -webkit-appearance: none; appearance: none; width: 100%; height: 28px; background: transparent; margin: 6px 0 0; padding: 0; touch-action: manipulation; } input[type=range].slider:focus { outline: none; } input[type=range].slider::-webkit-slider-runnable-track { height: 6px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 3px; } input[type=range].slider::-moz-range-track { height: 6px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 3px; } input[type=range].slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface-2); margin-top: -9px; cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.3); } input[type=range].slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); border: 2px solid var(--surface-2); cursor: pointer; box-shadow: 0 1px 3px rgba(0,0,0,0.3); } input[type=range].slider:focus::-webkit-slider-thumb { background: var(--accent-2); } input[type=range].slider:focus::-moz-range-thumb { background: var(--accent-2); } /* Generic "checkbox + label-block" toggle, used by the hard-mode option on the host card. The label wraps the input so the whole row is clickable on mobile. */ .bb-toggle { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; user-select: none; } .bb-toggle input[type=checkbox] { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); cursor: pointer; } .bb-toggle > span { flex: 1; } /* Compact HARD MODE badge shown on lobby + play when game.hard_mode = 1. Sits next to the timer / game-code line. The `display: inline-block` below overrides the user-agent `[hidden] { display: none }` rule on specificity grounds, so we add an explicit `[hidden]` override to keep the HTML attribute working as expected. */ .bb-hard-badge { display: inline-block; background: rgba(255, 107, 107, 0.18); color: var(--bad); border: 1px solid var(--bad); border-radius: 999px; padding: 2px 10px; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; margin-left: 6px; vertical-align: middle; } .bb-hard-badge[hidden] { display: none !important; } /* Cards */ .card { background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; margin: 12px 0; } .card + .card { margin-top: 14px; } /* Game code badge */ .code-badge { display: inline-block; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 32px; font-weight: 800; letter-spacing: 6px; background: var(--surface-2); color: var(--accent-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 16px; margin: 8px 0; user-select: all; } /* Player score bars (top of play / lobby pages) */ .scoreboard { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 12px; } .score-row { display: grid; grid-template-columns: minmax(70px, 1fr) auto; align-items: center; gap: 8px; font-size: 14px; } .score-row .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 600; } .score-row.me .name { color: var(--you); } .score-row .pts { font-family: ui-monospace, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; color: var(--text); font-weight: 700; } .bar-track { grid-column: 1 / -1; height: 6px; background: var(--surface-2); border-radius: 3px; overflow: hidden; border: 1px solid var(--border); } .bar-fill { height: 100%; background: var(--accent); width: 0%; transition: width .25s ease; } .score-row.me .bar-fill { background: var(--you); } /* Heartbeat dot next to a player's name */ .heartbeat { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--good); margin-right: 6px; vertical-align: middle; box-shadow: 0 0 0 0 rgba(90,208,126,0.7); animation: hb-pulse 2s ease-in-out infinite; } .heartbeat.stale { background: var(--warn); animation: none; box-shadow: none; } .heartbeat.dead { background: var(--bad); animation: none; box-shadow: none; opacity: 0.7; } @keyframes hb-pulse { 0% { box-shadow: 0 0 0 0 rgba(90,208,126,0.55); } 70% { box-shadow: 0 0 0 6px rgba(90,208,126,0); } 100% { box-shadow: 0 0 0 0 rgba(90,208,126,0); } } .score-row.stale .name, .score-row.dead .name { color: var(--text-dim); } /* Inline "kick" button next to a player's row (host-only) */ .kick-btn { background: transparent; border: 1px solid var(--border); color: var(--text-dim); border-radius: 999px; padding: 2px 8px; font: inherit; font-size: 11px; cursor: pointer; margin-left: 6px; } .kick-btn:hover { color: var(--bad); border-color: var(--bad); } /* Reaction strip (play page bottom bar) */ .reaction-strip { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; margin: 10px 0 4px; } .reaction-btn { background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; padding: 4px 12px; font-size: 20px; line-height: 1; cursor: pointer; touch-action: manipulation; } .reaction-btn:hover { background: var(--surface-1); } .reaction-btn:active { transform: scale(0.92); } .reaction-btn:disabled { opacity: 0.4; cursor: not-allowed; } /* Floating-up reactions over each player's row */ .score-row { position: relative; } .float-reactions { position: absolute; right: 0; top: 0; bottom: 0; pointer-events: none; display: flex; align-items: center; gap: 4px; padding-right: 4px; } .float-emoji { position: relative; font-size: 18px; line-height: 1; animation: float-up 1.4s ease-out forwards; will-change: transform, opacity; } @keyframes float-up { 0% { transform: translateY(8px) scale(.85); opacity: 0; } 15% { transform: translateY(0) scale(1); opacity: 1; } 100% { transform: translateY(-28px) scale(1.1); opacity: 0; } } /* Letter rack — Scrabble-ish tiles with depth, a subtle gradient and a bouncy pop-in on first render. Tiles squash on tap so they feel physical. */ .rack { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 14px 0; } .tile { display: inline-flex; align-items: center; justify-content: center; position: relative; width: 54px; height: 64px; background: linear-gradient(180deg, #2a3142 0%, #1d2230 100%); color: var(--text); border: 1px solid #3a455e; border-radius: 10px; font-weight: 800; font-size: 28px; letter-spacing: 0.5px; user-select: none; touch-action: manipulation; box-shadow: 0 3px 0 #0a0d14, 0 6px 12px rgba(0,0,0,0.35); cursor: pointer; transition: transform 0.08s ease, box-shadow 0.08s ease; animation: tile-pop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both; } .tile:hover { transform: translateY(-1px); } .tile:active { transform: translateY(2px); box-shadow: 0 1px 0 #0a0d14, 0 3px 6px rgba(0,0,0,0.4); } /* Tile is currently "spent" — its letter sits in the player's in-progress word. Visually flattened and click-locked. Removing the last letter (Del / Backspace) restores it. */ .tile.used { opacity: 0.25; pointer-events: none; box-shadow: none; transform: none; } .tile.used .pip { opacity: 0; } .tile .pip { position: absolute; right: 5px; bottom: 4px; font-size: 11px; color: var(--accent-2); font-weight: 700; opacity: 0.9; } @keyframes tile-pop { 0% { transform: scale(0.4) rotate(-8deg); opacity: 0; } 60% { transform: scale(1.08) rotate(2deg); opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } } /* A tile that's currently part of the in-progress word: dimmed, no shadow, pointer-events off so it can't be re-tapped. Del/Clear restores it. */ .tile.used { background: var(--surface-2); color: var(--text-dim); border-color: var(--border); box-shadow: none; opacity: 0.35; pointer-events: none; transform: none; } .tile.used .pip { opacity: 0.4; } @media (prefers-reduced-motion: reduce) { .tile { animation: none; } } /* Found-word pills */ .pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; } .pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; font-size: 13px; } .pill .pts { color: var(--accent); font-weight: 700; } /* Toasts */ .toast { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); background: var(--surface-1); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 14px; font-size: 14px; z-index: 50; pointer-events: none; opacity: 0; transition: opacity .15s; } .toast.show { opacity: 1; } .toast.good { border-color: var(--good); } .toast.bad { border-color: var(--bad); } /* Results */ .results-table { width: 100%; border-collapse: collapse; font-size: 14px; } .results-table th, .results-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); } .results-table th { color: var(--text-dim); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; } .results-table td.num { text-align: right; font-variant-numeric: tabular-nums; } .results-table tr.me td { color: var(--you); font-weight: 700; } .winner-line { text-align: center; font-size: 22px; font-weight: 800; margin: 6px 0 14px; color: var(--good); } /* Answer reveal rows */ .answer-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: baseline; padding: 6px 10px; border-bottom: 1px solid var(--border); font-size: 14px; } .answer-row .word { font-weight: 700; letter-spacing: 1px; } .answer-row .finders { color: var(--text-dim); font-size: 13px; } .answer-row.found .word { color: var(--good); } .answer-row.missed .word { color: var(--text-dim); } .answer-row .pts { color: var(--accent); font-weight: 700; font-variant-numeric: tabular-nums; } /* Timer — big, monospace, with a pulsing red flash in the final seconds. Lives in the play-page header. */ .timer { display: inline-flex; align-items: center; gap: 6px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 22px; font-weight: 800; color: var(--text); letter-spacing: 1px; text-shadow: 0 0 0 transparent; transition: color .2s, transform .2s, text-shadow .2s; } .timer.warn { color: var(--warn); text-shadow: 0 0 12px rgba(255, 179, 71, 0.6); } .timer.bad { color: var(--bad); font-size: 26px; text-shadow: 0 0 18px rgba(255, 107, 107, 0.8); animation: timer-tick 1s ease-in-out infinite; } @keyframes timer-tick { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } } @media (prefers-reduced-motion: reduce) { .timer.bad { animation: none; } } /* Footer */ .foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; color: var(--text-dim); font-size: 12px; } /* Stats summary */ .stats-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0; } .stat { flex: 1 1 100px; min-width: 100px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; } .stat .l { font-size: 11px; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.5px; } .stat .v { font-size: 20px; font-weight: 700; line-height: 1.15; margin-top: 2px; } /* Lobby chat */ .chat-log { height: 180px; overflow-y: auto; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; font-size: 14px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 4px; } .chat-row { line-height: 1.35; word-wrap: break-word; padding: 2px 6px; border-radius: 6px; } /* Your own messages get a soft accent tint so you can spot your contributions at a glance — keeps the chat feeling like a conversation. */ .chat-row.mine { background: rgba(122, 162, 255, 0.10); } /* Incoming messages from other players briefly flash so people notice new chat activity even when they're focused on something else. */ .chat-row.flash { animation: chat-flash 1.2s ease-out; } @keyframes chat-flash { 0% { background: rgba(122, 162, 255, 0.45); } 100% { background: transparent; } } @media (prefers-reduced-motion: reduce) { .chat-row.flash { animation: none; } } .chat-name { font-weight: 700; color: var(--accent-2); } .chat-text { color: var(--text); } .chat-form { display: flex; gap: 6px; } .chat-form .input { flex: 1; } .chat-form .btn { flex: 0 0 auto; } /* PWA update banner — appears when the service worker has a new version waiting. Modal (not banner) so the player has to acknowledge it before continuing — either Update now (reload) or Close. The backdrop is pointer-events:all so taps on the rest of the page are blocked. */ .bb-update-modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(0, 0, 0, 0.65); pointer-events: all; } .bb-update-modal[hidden] { display: none !important; } .bb-update-modal-box { width: 100%; max-width: 400px; background: var(--surface-1); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 22px 22px 18px; box-shadow: 0 12px 32px rgba(0,0,0,0.45); text-align: center; } .bb-update-modal-box h2 { margin: 0 0 8px; font-size: 18px; color: var(--accent); } .bb-update-modal-box p { margin: 0 0 16px; font-size: 14px; color: var(--text-dim); } .bb-update-modal-buttons { display: flex; gap: 10px; } .bb-update-modal-buttons .btn { flex: 1; } /* ===================== Game-feel polish ============================= */ /* Header mute toggle. The two emoji glyphs are stacked; CSS hides the inactive one so the button stays a single line. */ .bb-iconbtn { background: transparent; border: 1px solid var(--border); color: var(--text); border-radius: 999px; width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 18px; line-height: 1; transition: transform .08s, background .15s, border-color .15s; } .bb-iconbtn:hover { background: var(--surface-2); border-color: var(--accent); } .bb-iconbtn:active { transform: scale(0.92); } /* As a link (e.g. the help "?" button) it should not inherit hyperlink colour. */ a.bb-iconbtn { color: var(--text); text-decoration: none; } a.bb-iconbtn:hover { color: var(--text); } /* Mute icon swap: speaker → muted-speaker. */ .bb-iconbtn .bb-mute-off { display: none; } .bb-iconbtn.is-muted .bb-mute-on { display: none; } .bb-iconbtn.is-muted .bb-mute-off { display: inline; color: var(--text-dim); } /* Theme icon swap: moon (currently-dark, tap to go light) / sun (currently -light, tap to go dark). `is-light` is toggled by lib/layout.php's inline script + Bb.theme; CSS just picks the right glyph. */ .bb-iconbtn .bb-theme-sun { display: none; } .bb-iconbtn.is-light .bb-theme-moon { display: none; } .bb-iconbtn.is-light .bb-theme-sun { display: inline; } /* Title-block goosing. Bigger, more chunky, vaguely arcade-y. */ h1 { font-weight: 900; letter-spacing: -0.5px; text-shadow: 0 2px 0 rgba(0,0,0,0.35); } .brand-mark { background: linear-gradient(135deg, var(--accent) 0%, var(--decryp, #b58cf2) 100%); box-shadow: 0 2px 0 #0a0d14, 0 4px 10px rgba(122, 162, 255, 0.4); } /* Primary buttons get a press-down feel with a hard shadow that disappears when active — feels like a physical key. */ .btn { box-shadow: 0 3px 0 rgba(0,0,0,0.4), 0 4px 12px rgba(122, 162, 255, 0.25); transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.15s; } .btn:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0,0,0,0.4), 0 2px 4px rgba(122, 162, 255, 0.2); } .btn.secondary { box-shadow: 0 2px 0 rgba(0,0,0,0.3); } .btn.secondary:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0,0,0,0.3); } /* The word-being-built display. Glows in accent colour while there's content; ghosted hint when empty. */ #pl-word { background: linear-gradient(180deg, #1d2230 0%, #161a23 100%); color: var(--text); font-weight: 800; text-shadow: 0 0 12px rgba(122, 162, 255, 0.35); border-color: #3a455e; letter-spacing: 8px; } #pl-word:not(:placeholder-shown) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 24px rgba(122, 162, 255, 0.3); } /* Player score bars: ditch the boring flat fills for a glowing gradient. */ .bar-fill { background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%); box-shadow: 0 0 12px rgba(122, 162, 255, 0.5); } .score-row.me .bar-fill { background: linear-gradient(90deg, var(--you) 0%, #ffe69b 100%); box-shadow: 0 0 12px rgba(255, 209, 102, 0.5); } /* Found-words pills get a satisfying pop-in. */ .pill { animation: pill-pop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); border-color: rgba(122, 162, 255, 0.35); } @keyframes pill-pop { 0% { transform: scale(0.5); opacity: 0; } 60% { transform: scale(1.1); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .pill { animation: none; } } /* Shake animation for invalid submissions / time-up warnings. */ .bb-shake { animation: bb-shake 0.32s cubic-bezier(0.36, 0.07, 0.19, 0.97); } @keyframes bb-shake { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } } /* Toast — slightly more dramatic so it reads as game feedback, not a form-validation notice. */ .toast { background: var(--surface-1); border-width: 2px; font-weight: 700; font-size: 15px; padding: 10px 18px; border-radius: 999px; box-shadow: 0 4px 20px rgba(0,0,0,0.5); } .toast.good { background: rgba(90, 208, 126, 0.18); color: var(--good); } .toast.bad { background: rgba(255, 107, 107, 0.18); color: var(--bad); } /* Confetti container + pieces (Bb.fx.confetti). The pieces fall under custom-property-driven keyframes so each one has unique drift/rot/fall. */ .bb-confetti-wrap { position: fixed; inset: 0; pointer-events: none; z-index: 70; overflow: hidden; } .bb-confetti { position: absolute; width: 10px; height: 14px; border-radius: 2px; opacity: 0.95; animation: confetti-fall 1.6s ease-in forwards; transform-origin: center; will-change: transform, opacity; } @keyframes confetti-fall { 0% { transform: translate(0, 0) rotate(0deg); opacity: 1; } 100% { transform: translate(var(--drift), var(--fall)) rotate(var(--rot)); opacity: 0; } } /* Winner line — make winning feel like winning. */ .winner-line { font-size: 26px; text-shadow: 0 0 20px rgba(90, 208, 126, 0.6); animation: winner-glow 2s ease-in-out infinite alternate; } @keyframes winner-glow { from { text-shadow: 0 0 10px rgba(90, 208, 126, 0.4); } to { text-shadow: 0 0 24px rgba(90, 208, 126, 0.8); } } @media (prefers-reduced-motion: reduce) { .winner-line { animation: none; } } /* Code badge — make it feel important. */ .code-badge { background: linear-gradient(135deg, var(--surface-2) 0%, #2d3450 100%); border-color: var(--accent); box-shadow: 0 4px 16px rgba(122, 162, 255, 0.3); letter-spacing: 8px; font-size: 36px; } /* ===================== Reveal overlay (countdown) ===================== Full-screen modal-ish layer shown while seconds_to_start > 0. The play UI sits underneath untouched — once the overlay closes, the rack animates its letters into place. */ .reveal-overlay { position: fixed; inset: 0; z-index: 80; /* Bumped to 97% opaque from 94% so the look survives without backdrop-filter. The blur was the single most expensive shader on the page during the reveal window — dropping it gives input latency a noticeable boost on weaker phones. */ background: rgba(14, 17, 24, 0.97); display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: all; } /* The HTML5 `hidden` attribute applies `display: none` via the user-agent stylesheet, which the `display: flex` above beats on specificity. Without this override the overlay is visible by default and shows its static initial "3" content even when startReveal() never runs. */ .reveal-overlay[hidden] { display: none !important; } .reveal-overlay.fading { animation: reveal-fade-out 0.5s ease forwards; } .reveal-count { font-size: clamp(120px, 30vmin, 220px); font-weight: 900; line-height: 1; letter-spacing: -2px; color: var(--accent); text-shadow: 0 0 60px rgba(122, 162, 255, 0.7), 0 0 20px rgba(122, 162, 255, 0.9); } /* The `.pop` class is removed and re-added each time the digit changes, so the entrance bounce fires once per number rather than just on first mount. */ .reveal-count.pop { animation: reveal-pop 0.8s cubic-bezier(0.34, 1.56, 0.64, 1); } .reveal-count.go { color: var(--good); text-shadow: 0 0 60px rgba(90, 208, 126, 0.8); } .reveal-label { color: var(--text-dim); font-size: 18px; text-transform: uppercase; letter-spacing: 4px; margin-top: 18px; } @keyframes reveal-pop { 0% { transform: scale(0.2); opacity: 0; } 35% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } @keyframes reveal-fade-out { to { opacity: 0; transform: scale(0.95); } } @media (prefers-reduced-motion: reduce) { .reveal-count { animation: none; } .reveal-overlay.fading { animation: none; opacity: 0; } } /* Tile scrambling: dim and shimmering while the slot-machine cycles random letters. The pip is hidden so it doesn't read as a real score yet. */ .tile.tile-scrambling { color: var(--text-dim); background: linear-gradient(180deg, #1d2230 0%, #161a23 100%); box-shadow: 0 1px 0 #0a0d14, 0 2px 4px rgba(0,0,0,0.2); animation: tile-shimmer 0.5s ease-in-out infinite alternate; } .tile.tile-scrambling .pip { opacity: 0; } /* tile-pop-in is re-applied each time a tile locks to its final letter, giving each lock a separate bounce. */ .tile.tile-pop-in { animation: tile-lock 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); } /* tile-locked is the steady post-lock state; no animation, but a brief accent-outlined flash so the player notices it just landed. */ .tile.tile-locked { border-color: var(--accent); box-shadow: 0 3px 0 #0a0d14, 0 0 16px rgba(122, 162, 255, 0.5); } @keyframes tile-shimmer { from { filter: brightness(0.85); } to { filter: brightness(1.05); } } @keyframes tile-lock { 0% { transform: scale(1) rotate(0); } 40% { transform: scale(1.30) rotate(-4deg); } 70% { transform: scale(0.92) rotate(3deg); } 100% { transform: scale(1) rotate(0); } } /* Body class while the reveal animation runs. Dims background slightly so the foreground tiles feel focal. */ body.bb-revealing .bb-bg { opacity: 0.4; } @media (prefers-reduced-motion: reduce) { .tile.tile-scrambling { animation: none; } .tile.tile-pop-in { animation: none; } }