/* ---- Fruit Frenzy ---- */
/* A self-contained palette for the game screen, independent of the site's own light/dark theme -
same approach LuckySlots takes with its per-machine [data-theme] palettes (see luckySlots.css).
Unlike LuckySlots (one fixed palette per machine, user-selected), FruitFrenzy's scene changes
every level via #ffGameHolder's [data-difficulty] attribute (set by updateLevelDisplay() in
fruitFrenzy.js) - cottage/meadow for Easy up through a lava fortress for Very Hard - so the
panel/text/frame variables below are overridden per difficulty further down, not just the
background image. Root values here are the pre-difficulty-known fallback (first paint, before
JS runs) and double as the Easy palette. */
:root { --ff-panel: linear-gradient(180deg, #fff9ea, #d9f2c4); --ff-panel-border: rgba(58,110,36,0.4); --ff-panel-shadow: 0 3px 0 rgba(58,110,36,0.32), 0 6px 14px rgba(30,60,15,0.18); --ff-panel-shadow-active: 0 0 0 rgba(58,110,36,0.32), 0 2px 6px rgba(30,60,15,0.18); --ff-wood-dark: #3d6b28; --ff-text: #24421a; --ff-gold-dark: #4a8a2e; --ff-frame-bg: linear-gradient(180deg, rgba(0,0,0,0.55), rgba(0,0,0,0.3)); --ff-frame-border: rgba(0,0,0,0.25); --ff-frame-shadow: 0 10px 26px rgba(30,60,15,0.22), inset 0 1px 0 rgba(0,0,0,0.75); --ff-pill-bg: rgba(255,255,255,0.75); --ff-pill-bg-hover: rgba(255,255,255, 1.0); }
/* The illustrated scene behind the whole game screen (board tray, header, buttons all sit on top
of it). It lives on the site's own shared .inner-container (see updateLevelDisplay() in
fruitFrenzy.js, which mirrors #ffGameHolder's [data-difficulty] onto it) rather than on
#ffGameHolder itself, so the scene fills the whole ~800px page content column instead of being
cropped to this game card's own ~500px width. #ffGameHolder drops its default site-card chrome
(background/border/shadow) entirely so that wider scene shows through it uninterrupted - the
only remaining "panel" boundaries on screen are the header/goal chips and the board tray below,
each already themed to their own [data-difficulty] palette (see variables below). */
#ffGameHolder.section-item { background: none !important; border: none !important; backdrop-filter: blur(10px) !important; }
#ffGameHolder .section-padding { position: relative; }
/* background-attachment: fixed pins the image's cover-sizing to the viewport instead of
.inner-container's own box - without it, "cover" would scale against min-height:90%-and-grows-
with-content (the game panel plus Help/Watch/About below it, several screens tall on mobile),
stretching the image to an absurd zoom to cover that whole scrollable height instead of just
filling what's actually on screen at once. */
.body-background[data-difficulty] { background-size: cover; background-position: top center; background-repeat: no-repeat; background-attachment: fixed; transition: background-image 0.25s ease; }
.body-background[data-difficulty="easy"] { background-image: url(../../Assets/Games/Images/fruit-easy.jpg); }
.body-background[data-difficulty="medium"] { background-image: url(../../Assets/Games/Images/fruit-medium.jpg); }
.body-background[data-difficulty="hard"] { background-image: url(../../Assets/Games/Images/fruit-hard.jpg); }
.body-background[data-difficulty="veryhard"] { background-image: url(../../Assets/Games/Images/fruit-veryhard.jpg); }
#go-to-top { display: none !important; }
#ffGameHolder::before { display: none !important; }
/* Medium - sunlit tropical cove: sandy cream/orange panels on dark driftwood-brown text, echoing
the beach and the scene's own orange "MEDIUM" badge. Still light-on-light like Easy. */
#ffGameHolder.section-item[data-difficulty="medium"] { --ff-panel: linear-gradient(180deg, #fff3d9, #ffcd85); --ff-panel-border: rgba(170,85,10,0.42); --ff-panel-shadow: 0 3px 0 rgba(170,85,10,0.32), 0 6px 14px rgba(90,45,5,0.2); --ff-panel-shadow-active: 0 0 0 rgba(170,85,10,0.32), 0 2px 6px rgba(90,45,5,0.2); --ff-wood-dark: #a3550a; --ff-text: #4a2e0d; --ff-gold-dark: #d9660a; --ff-frame-bg: linear-gradient(180deg, rgba(112, 123, 183, 0.5), rgba(105, 107, 176, 0.56)); --ff-frame-border: rgba(255,255,255,0.7); --ff-frame-shadow: 0 10px 26px rgba(90,45,5,0.24), inset 0 1px 0 rgba(255,255,255,0.75); --ff-pill-bg: rgba(255,255,255,0.5); --ff-pill-bg-hover: rgba(255,255,255,0.75); }
/* Hard - moonlit haunted graveyard: the scene goes dark, so the chrome flips to glowing violet
glass on pale lavender text instead of trying to keep dark text readable over a night sky. */
#ffGameHolder.section-item[data-difficulty="hard"] { --ff-panel: linear-gradient(180deg, rgba(84,52,138,0.88), rgba(46,24,84,0.92)); --ff-panel-border: rgba(206,168,255,0.5); --ff-panel-shadow: 0 3px 0 rgba(20,8,42,0.5), 0 6px 16px rgba(0,0,0,0.4), 0 0 18px rgba(160,110,255,0.25); --ff-panel-shadow-active: 0 0 0 rgba(20,8,42,0.5), 0 2px 8px rgba(0,0,0,0.4), 0 0 10px rgba(160,110,255,0.2); --ff-wood-dark: #caa8ff; --ff-text: #f1e8ff; --ff-gold-dark: #ff8fd8; --ff-frame-bg: linear-gradient(180deg, rgba(40,22,70,0.55), rgba(20,10,40,0.4)); --ff-frame-border: rgba(190,150,255,0.4); --ff-frame-shadow: 0 10px 28px rgba(0,0,0,0.45), inset 0 1px 0 rgba(220,190,255,0.25); --ff-pill-bg: rgba(30,16,54,0.55); --ff-pill-bg-hover: rgba(30,16,54,0.8); }
/* Very Hard - the lava fortress: darkest scene, so chrome goes to charcoal-ember glass with a
fiery orange-red glow instead of violet, matching the heat rather than the previous theme's
moonlight. */
#ffGameHolder.section-item[data-difficulty="veryhard"] { --ff-panel: linear-gradient(180deg, rgba(120,30,20,0.88), rgba(58,14,10,0.92)); --ff-panel-border: rgba(255,150,90,0.5); --ff-panel-shadow: 0 3px 0 rgba(30,6,4,0.55), 0 6px 16px rgba(0,0,0,0.45), 0 0 20px rgba(255,110,40,0.3); --ff-panel-shadow-active: 0 0 0 rgba(30,6,4,0.55), 0 2px 8px rgba(0,0,0,0.45), 0 0 12px rgba(255,110,40,0.25); --ff-wood-dark: #ffb37a; --ff-text: #ffe9d6; --ff-gold-dark: #ff5f3c; --ff-frame-bg: linear-gradient(180deg, rgba(60,16,12,0.55), rgba(25,6,4,0.42)); --ff-frame-border: rgba(255,140,70,0.42); --ff-frame-shadow: 0 10px 28px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,180,120,0.25); --ff-pill-bg: rgba(45,12,8,0.55); --ff-pill-bg-hover: rgba(45,12,8,0.8); }
/* ---- Panel transitions (mirrors nm-panel-in/out) ---- */
@keyframes ffPanelIn {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes ffPanelOut {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(-8px); }
}
.ff-panel-in { animation: ffPanelIn 0.22s ease-out both; }
.ff-panel-out { animation: ffPanelOut 0.15s ease-in both; pointer-events: none; }
#ffGameHolder .page-title-text { padding-top: 0; }
#btnHowToPlay { display: inline-block; margin-left: 10px; background-image: url(../../Assets/Games/Images/help.png); background-repeat: no-repeat; background-position: center center; background-size: 24px; cursor: pointer; position: relative; top: 5px; width: 24px; height: 24px; opacity: 0.7; transition: all .2s ease-in-out; }
#btnHowToPlay:hover { opacity: 1.0; }
#btnHowToPlay:active { transform: scale(0.9); }
#ffGameHolder .page-title-text { color: #FFF !important; text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5); }
/* ---- Level header ---- */
/* Both stat panels share the same chunky "parchment plank" treatment - warm gradient fill, a
defined border, and a two-layer shadow (a hard offset sliver plus a soft blur) that reads as a
raised, pressable block rather than a flat modern chip. */
#ffLevelHolder { float: right; text-align: center; min-width: 74px; background: var(--ff-panel); border: 2px solid var(--ff-panel-border); border-radius: 16px; padding: 8px 16px 10px; box-shadow: var(--ff-panel-shadow); transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
#ffLevelLabel { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ff-wood-dark); margin-bottom: 2px; }
#ffLevel { font-size: 26px; font-weight: 800; line-height: 1; color: var(--ff-text); }
.ff-difficulty-badge { display: inline-block; margin-top: 4px; padding: 2px 9px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; border-radius: 10px; }
.ff-difficulty-easy { background: rgba(52,199,89,0.22); color: #257A3A; }
.ff-difficulty-medium { background: rgba(255,204,0,0.28); color: #8C6300; }
.ff-difficulty-hard { background: rgba(255,149,0,0.26); color: #9C5600; }
.ff-difficulty-veryhard { background: rgba(255,59,48,0.22); color: #B02318; }
/* Hard/Very Hard's badge classes only ever appear on their own matching (dark) #ffGameHolder
panel - brighter fill + light text instead of the light-panel-tuned colors above, which would
go muddy and low-contrast sitting on the dark violet/ember glass those two themes use. */
#ffGameHolder[data-difficulty="hard"] .ff-difficulty-hard { background: rgba(255,143,216,0.28); color: #ffd6f2; }
#ffGameHolder[data-difficulty="veryhard"] .ff-difficulty-veryhard { background: rgba(255,95,60,0.32); color: #ffd9c9; }
footer { background: rgba(0, 0, 0, 0.35) !important; }
footer p, footer a { color: #FFF !important; }
#ffHelpHolder, #ffSpectateHolder { backdrop-filter: blur(10px); border-radius: 15px; }
#ffHelpHolder .section-item, #ffSpectateHolder .section-item { background-color: transparent !important; }
#ffHelpHolder .section-item::before, #ffSpectateHolder .section-item::before { display: none !important; }
body[data-theme="Default"] #ffHelpHolder, body[data-theme="Default"] #ffSpectateHolder { background: rgba(255, 255, 255, 0.5); }
body[data-theme="Dark"] #ffHelpHolder, body[data-theme="Dark"] #ffSpectateHolder { background: rgba(0, 0, 0, 0.5); }
body[data-mode="spa"] .title-section-bar { margin-bottom: 5px; }
body[data-mode="spa"] #ffLevelHolder { display: flex; gap: 10px; }
body[data-mode="spa"] #ffLevelLabel { line-height: 26px; margin-bottom: 0; }
body[data-mode="spa"] #ffLevel { font-size: 20px; line-height: 24px; }
body[data-mode="spa"] .ff-difficulty-badge { line-height: 22px; margin-top: 0; }
/* ---- Coins ---- */
#ffCoinsHolder { float: left; display: flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 800; padding: 5px 18px; border-radius: 18px; background: var(--ff-panel); border: 2px solid var(--ff-panel-border); box-shadow: var(--ff-panel-shadow); color: var(--ff-gold-dark); transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease; }
#ffCoinsIcon::before { content: "\1FA99"; font-size: 18px; line-height: 1; }
/* ---- Level goal / moves remaining ---- */
#ffGoalRow { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; font-size: 13px; gap: 10px; flex-wrap: wrap; }
#ffMovesText { display: inline-flex; align-items: center; gap: 10px; color: var(--ff-gold-dark); flex-wrap: wrap; vertical-align: middle; border: 2px solid var(--ff-panel-border); padding: 10px 16px; border-radius: 18px; background: var(--ff-panel); box-shadow: var(--ff-panel-shadow); transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
#ffGoalsHolder { display: inline-flex; align-items: center; gap: 20px; flex-wrap: wrap; vertical-align: middle; border: 2px solid var(--ff-panel-border); padding: 10px 16px; border-radius: 18px; background: var(--ff-panel); box-shadow: var(--ff-panel-shadow); transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
.ff-goal-chip { display: inline-flex; align-items: center; transition: opacity 0.25s ease; }
.ff-goal-chip .ff-goal-icon, .ff-goal-chip svg { width: 24px; height: 24px; vertical-align: middle; margin: -6px 5px 0 2px; transition: filter 0.25s ease, opacity 0.25s ease; }
.ff-goal-chip .ff-goal-count { color: var(--ff-gold-dark); font-size: 15px; }
/* A completed objective (within a multi-objective level, before the others are also done) reads
as "done" at a glance - its fruit dims out and the count is replaced by a green checkmark,
rather than continuing to look identical to the objectives still being chased. */
.ff-goal-chip.ff-goal-done { opacity: 0.6; }
.ff-goal-chip.ff-goal-done .ff-goal-icon, .ff-goal-chip.ff-goal-done svg { opacity: 0.7; }
.ff-goal-chip.ff-goal-done .ff-goal-count { color: #2E9E4C; font-weight: 700; }
#ffMovesText strong { font-size: 15px; }
#ffMovesText.ff-moves-low strong { color: #FF3333; }
/* Flies a copy of a just-cleared objective-color ball from its cell up to the goal icon */
.ff-collect-fly { position: fixed; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 999; transition: transform 0.5s cubic-bezier(0.3, 0.6, 0.4, 1), opacity 0.5s ease-in 0.15s; }
.ff-collect-fly img, .ff-collect-fly svg { width: 78%; height: 78%; object-fit: contain; }
.ff-goal-chip .ff-goal-count.ff-goal-pulse { display: inline-block; animation: ffGoalPulse 0.4s ease-out; }
@keyframes ffGoalPulse {
0% { transform: scale(1); }
40% { transform: scale(1.35); color: var(--ff-gold-dark); }
100% { transform: scale(1); }
}
/* ---- Game canvas ---- */
/* The board itself stays a calm, plain frosted-glass slab rather than carrying its own busy
illustration - the scene image lives on #ffGameHolder behind everything (see above), and the
pieces need a quiet backdrop to actually read clearly against. canvas.parentElement is what
sizeCanvasToViewport() (see fruitFrenzy.js) measures for available width, so this frame's own
padding is automatically accounted for with no JS changes needed. */
#ffBoardFrame { background: var(--ff-frame-bg); backdrop-filter: blur(6px); border: 2px solid var(--ff-frame-border); border-radius: 26px; padding: 14px; margin-bottom: 20px; transition: background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
#ffCanvas { display: flex; flex-direction: column; gap: 4px; position: relative; padding-top: 6px; overflow: visible; min-height: 275px; }
.ff-row { display: flex; gap: 4px; }
.ff-cell { flex: 1; aspect-ratio: 1; border-radius: 9px; cursor: pointer; transition: transform 0.12s ease, filter 0.12s ease; position: relative; display: flex; align-items: center; justify-content: center; container-type: inline-size; touch-action: none; user-select: none; }
.ff-empty { cursor: default; background: transparent !important; box-shadow: none !important; }
.ff-emoji { font-size: 60cqw; line-height: 1; user-select: none; pointer-events: none; filter: drop-shadow(0 1px 1px rgba(0,0,0,0.35)); text-align: center; }
#ffCanvas .ff-cell:not(.ff-empty):hover { transform: scale(1.08); z-index: 1; }
.ff-cell.ff-hover { transform: scale(1.1); filter: brightness(1.2); z-index: 1; }
.ff-cell.ff-shake { animation: ffShake 0.35s ease-in-out; }
.ff-cell.ff-clearing { animation: ffPop 0.22s ease-out forwards; pointer-events: none; }
.ff-cell.ff-swap-flash { animation: ffSwapFlash 0.7s ease-out; }
.ff-cell.ff-bomb-clearing { animation: ffBombPop 0.3s ease-out forwards; pointer-events: none; }
/* Rocket-swept cells fly onward in the sweep's own travel direction (right for a row, down for a
column) instead of just shrinking in place - reads as "pushed through" rather than a generic pop.
Each cell's animation-delay is set inline in JS, proportional to its position along the row/column,
so cells visibly clear in roughly the order the flying rocket sprite actually passes over them. */
.ff-cell.ff-rocket-clearing-h { animation: ffRocketPopHorizontal 0.28s ease-in forwards; pointer-events: none; }
.ff-cell.ff-rocket-clearing-v { animation: ffRocketPopVertical 0.28s ease-in forwards; pointer-events: none; }
/* Clear Board's cells pop in a diagonal wipe from the top-left corner (animation-delay set inline
in JS, proportional to row+col) instead of every cell on the board popping in perfect unison -
befitting a paid, whole-board effect rather than looking identical to a small bomb clear. */
.ff-cell.ff-clearboard-clearing { animation: ffClearBoardPop 0.32s ease-out forwards; pointer-events: none; }
.ff-cell.ff-hint { animation: ffHintPulse 0.6s ease-in-out 2; z-index: 2; }
.ff-cell.ff-powerup { overflow: hidden; box-shadow: 0 0 0 2px rgba(255,255,255,0.85); animation: ffPowerupGlow 1.6s ease-in-out infinite; background: radial-gradient(circle at 35% 30%, #4A4949, #111 55%, #000) !important; }
.ff-cell.ff-powerup .ff-emoji img, .ff-cell.ff-powerup .ff-emoji svg { display: none; }
/* rocket.svg's art points straight up by default - rotated 90deg on its side here so a
horizontal/row-clear rocket reads as unmistakably different from the upright vertical one at
a glance (a mirrored diagonal was tried first and was too subtle to tell apart quickly). */
.ff-cell.ff-powerup .ff-emoji::before { content: ""; display: inline-block; width: 42px; height: 42px; background-image: url(../../Assets/Games/Fruits/PowerUps/rocket.svg); background-size: contain; background-repeat: no-repeat; background-position: center center; transform: rotate(90deg); }
.ff-cell.ff-powerup-vertical .ff-emoji::before { transform: rotate(0deg); }
.ff-cell.ff-powerup-created { animation: ffPowerupBorn 0.24s ease-out; }
/* Rotated 90deg (pointing right, matching the art's default "points up" plus a quarter turn) so it
noses forward while flying left-to-right across the row, same reasoning as the resting icon above. */
.ff-rocket-flight { position: absolute; left: -12%; transform: rotate(90deg); background-image: url(../../Assets/Games/Fruits/PowerUps/rocket.svg); background-size: contain; background-repeat: no-repeat; background-position: center; pointer-events: none; z-index: 5; filter: drop-shadow(0 0 8px rgba(255,255,255,0.9)) drop-shadow(0 0 16px rgba(255,180,60,0.7)); animation: ffRocketFlight 0.3s linear forwards; }
/* Same asset/flight timing as the horizontal flight, just travelling bottom-to-top up the
power-up's column instead of left-to-right across its row. No rotation override needed - the
art already points straight up by default, and a rocket launches nose-first in the direction
it's pointing, so it flies upward rather than plunging down nose-first. */
.ff-rocket-flight-vertical { left: auto; top: 104%; animation-name: ffRocketFlightVertical; }
@keyframes ffRocketFlight {
0% { left: -12%; opacity: 1; }
100% { left: 104%; opacity: 1; }
}
@keyframes ffRocketFlightVertical {
0% { top: 104%; opacity: 1; }
100% { top: -12%; opacity: 1; }
}
@keyframes ffShake {
0%,100% { transform: translateX(0); }
25% { transform: translateX(-5px); }
75% { transform: translateX(5px); }
}
@keyframes ffPop {
0% { transform: scale(1); opacity: 1; }
40% { transform: scale(1.25); opacity: 0.9; }
100% { transform: scale(0); opacity: 0; }
}
@keyframes ffSwapFlash {
0% { box-shadow: 0 0 0 0 rgba(0,148,255,0.8); }
50% { box-shadow: 0 0 0 6px rgba(0,148,255,0.35); }
100% { box-shadow: 0 0 0 0 rgba(0,148,255,0); }
}
@keyframes ffBombPop {
0% { transform: scale(1) rotate(0deg); opacity: 1; filter: brightness(1); }
35% { transform: scale(1.35) rotate(8deg); opacity: 1; filter: brightness(2.2) saturate(2); }
100% { transform: scale(0) rotate(20deg); opacity: 0; }
}
/* Expanding ring spawned at the detonation cell (see spawnBombShockwave) so the explosion reads as
radiating outward from a specific point, not just every cell independently flashing at once. */
.ff-bomb-shockwave { position: absolute; border-radius: 50%; border: 4px solid rgba(255,180,60,0.9); box-shadow: 0 0 18px 4px rgba(255,120,40,0.6); pointer-events: none; z-index: 6; animation: ffBombShockwave 0.4s ease-out forwards; }
@keyframes ffBombShockwave {
0% { transform: scale(0.2); opacity: 1; }
100% { transform: scale(1); opacity: 0; }
}
@keyframes ffRocketPopHorizontal {
0% { transform: translateX(0) scale(1); opacity: 1; }
100% { transform: translateX(65%) scale(0.25); opacity: 0; }
}
@keyframes ffRocketPopVertical {
0% { transform: translateY(0) scale(1); opacity: 1; }
100% { transform: translateY(-65%) scale(0.25); opacity: 0; }
}
@keyframes ffClearBoardPop {
0% { transform: scale(1) rotate(0deg); opacity: 1; filter: brightness(1); }
45% { transform: scale(1.2) rotate(-10deg); opacity: 1; filter: brightness(1.8) saturate(1.6); }
100% { transform: scale(0) rotate(-25deg); opacity: 0; }
}
@keyframes ffHintPulse {
0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,215,0,0); }
50% { transform: scale(1.15); box-shadow: 0 0 16px 5px rgba(255,215,0,0.85); }
}
@keyframes ffPowerupGlow {
0%, 100% { box-shadow: 0 0 0 2px rgba(255,255,255,0.85), 0 0 8px 2px rgba(255,215,0,0.55); }
50% { box-shadow: 0 0 0 2px rgba(255,255,255,0.95), 0 0 14px 5px rgba(255,215,0,0.9); }
}
@keyframes ffPowerupBorn {
0% { transform: scale(1); filter: brightness(1); }
50% { transform: scale(1.3); filter: brightness(2) saturate(1.5); }
100% { transform: scale(1); filter: brightness(1); }
}
/* Row collapse animation */
.ff-row-collapsing { animation: ffRowCollapse 0.38s ease-in forwards; transform-origin: bottom; overflow: hidden; }
@keyframes ffRowCollapse {
0% { transform: scaleY(1); opacity: 1; }
60% { transform: scaleY(0.4); opacity: 0.3; }
100% { transform: scaleY(0); opacity: 0; }
}
/* Ball colors - radial gradient for 3D sphere look */
/* Each ff-cN is keyed to window.FRUITS[N] in file order: apple, banana, cacao, cherry, grape,
limon, mango, melao, orange, peach, pear, pineapple, plum, strawberry, watermelon (see
FruitFrenzyController's Directory.GetFiles enumeration, which returns alphabetically on this
host - adding/removing a fruit file shifts every index after it, so the whole list gets
renumbered together rather than just appending new ones at the end). Colors stay in each
fruit's general family but are spread apart in hue/saturation/lightness so all the balls stay
tellable apart at a glance (e.g. limon pushed neon-chartreuse and mango/pear/watermelon spread
from yellow to green, apple/cherry/strawberry spread across the red range, cacao/melao given
their own brown/tan territory nothing else uses), rather than all being sampled 1:1 from each
SVG's exact fill. Each box-shadow is still a darkened version of its own dark stop. */
.ff-c0 { background: radial-gradient(circle at 35% 30%, #FF8F6E, #D83419 55%, #7A1A0A); box-shadow: 0 3px 8px rgba(122,26,10,0.4); }
/* apple */
.ff-c1 { background: radial-gradient(circle at 35% 30%, #FBC000, #DDB65A 55%, #A77400); box-shadow: 0 3px 8px rgba(179,125,0,0.35); }
/* banana */
.ff-c2 { background: radial-gradient(circle at 35% 30%, #E8B37A, #A8672E 55%, #5C3315); box-shadow: 0 3px 8px rgba(92,51,21,0.4); }
/* cacao */
.ff-c3 { background: radial-gradient(circle at 35% 30%, #FF6B7A, #E01B3D 55%, #7A0316); box-shadow: 0 3px 8px rgba(122,3,22,0.4); }
/* cherry */
.ff-c4 { background: radial-gradient(circle at 35% 30%, #E3B8FF, #A020F0 55%, #5C0099); box-shadow: 0 3px 8px rgba(92,0,153,0.35); }
/* grape */
.ff-c5 { background: radial-gradient(circle at 35% 30%, #FCD700, #E2FF00 55%, #949871); box-shadow: 0 3px 8px rgba(140,158,0,0.35); }
/* limon */
.ff-c6 { background: radial-gradient(circle at 35% 30%, #6BD300, #9EB03D 55%, #446526); box-shadow: 0 3px 8px rgba(168,93,0,0.35); }
/* mango */
.ff-c7 { background: radial-gradient(circle at 35% 30%, #FFCB8A, #E0932E 55%, #8C5410); box-shadow: 0 3px 8px rgba(140,84,16,0.35); }
/* melao */
.ff-c8 { background: radial-gradient(circle at 35% 30%, #FFB067, #FF7A00 55%, #B34D00); box-shadow: 0 3px 8px rgba(179,77,0,0.35); }
/* orange */
.ff-c9 { background: radial-gradient(circle at 35% 30%, #FFD9C2, #FF8F70 55%, #B33D1E); box-shadow: 0 3px 8px rgba(179,61,30,0.35); }
/* peach */
.ff-c10 { background: radial-gradient(circle at 35% 30%, #D4F0A0, #7CB518 55%, #3F5C0A); box-shadow: 0 3px 8px rgba(63,92,10,0.35); }
/* pear */
.ff-c11 { background: radial-gradient(circle at 35% 30%, #FFF6D0, #E8C547 55%, #8C6A10); box-shadow: 0 3px 8px rgba(140,106,16,0.35); }
/* pineapple */
.ff-c12 { background: radial-gradient(circle at 35% 30%, #A7B8F0, #2E4FA3 55%, #101A47); box-shadow: 0 3px 8px rgba(16,26,71,0.4); }
/* plum */
.ff-c13 { background: radial-gradient(circle at 35% 30%, #FF9C86, #E8402A 55%, #7A1D0F); box-shadow: 0 3px 8px rgba(122,29,15,0.4); }
/* strawberry */
.ff-c14 { background: radial-gradient(circle at 35% 30%, #A8E063, #3E8E1F 55%, #1B4D0C); box-shadow: 0 3px 8px rgba(27,77,12,0.35); }
/* watermelon */
.ff-emoji img, .ff-emoji svg { width: 78%; height: 78%; object-fit: contain; display: inline-block; }
#hide-search-hints { cursor: pointer; opacity: 0.7; float: right; width: 20px; height: 20px; margin-top: -5px; border-radius: 25px; transition: all .2s ease-in-out; }
#hide-search-hints::before { content: ""; display: block; width: 20px; height: 20px; background-image: url(../../Assets/icons/cancel.png); background-repeat: no-repeat; background-position: center center; filter: var(--search-image-filter); }
#hide-search-hints:hover { opacity: 1.0; }
#hide-search-hints:active { transform: scale(0.9); }
/* ---- Buttons ---- */
/* Two tiers instead of one crowded float-packed row: ffActionsPrimary holds the two in-game power
moves (Bomb/Clear Board, each with their own live counter) as bigger, visually weightier chips;
ffActionsSecondary holds the lighter navigation/utility actions as plain text links underneath.
Both are plain flexbox rows (wrapping on narrow screens) instead of the old float:left/right +
clear-space div layout, which is what made the row feel cramped/fragile at small widths. */
#ffButtons { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
#ffActionsPrimary { display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap; }
#ffActionsSecondary { display: flex; justify-content: center; align-items: center; gap: 4px; flex-wrap: wrap; }
/* The two "power move" actions get the same chunky pressable-plank treatment as the header
panels above - a hard offset shadow that visibly compresses on :active, like a real button
being pushed in, rather than the flat hover-lift used elsewhere on the site. */
#ffBombBtn, #ffClearBoardBtn, #ffDailyBonusBtn { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; user-select: none; line-height: 18px; color: var(--ff-text); padding: 10px 18px; text-decoration: none; font-size: 14px; font-weight: 700; border-radius: 16px; background: var(--ff-panel); border: 2px solid var(--ff-panel-border); box-shadow: var(--ff-panel-shadow); transition: all .12s ease-in-out; }
#ffBombBtn:hover, #ffClearBoardBtn:hover, #ffDailyBonusBtn:hover { filter: brightness(1.04); }
#ffBombBtn:active, #ffClearBoardBtn:active, #ffDailyBonusBtn:active { transform: translateY(3px); box-shadow: var(--ff-panel-shadow-active); }
#ffBombBtn #ffBombCount { margin-left: 5px; }
/* Daily Bonus - a free once-a-day claim, so it gets its own gift icon and a gentle glow/pulse
while unclaimed to draw the eye (unlike Bomb/Clear Board, there's no in-game action that makes
the player naturally notice it's available). Once claimed today, it just dims flat like Clear
Board's disabled state - no need to keep drawing attention to something there's nothing left to
do with until tomorrow. */
#ffDailyBonusBtn::before { content: "\1F381"; display: inline-block; margin-right: 5px; font-size: 14px; }
#ffDailyBonusBtn:not(.ff-dailybonus-claimed) { animation: ffDailyBonusPulse 2s ease-in-out infinite; }
#ffDailyBonusBtn.ff-dailybonus-claimed { opacity: 0.4; cursor: default; animation: none; }
#ffDailyBonusBtn.ff-dailybonus-claimed:hover { filter: none; }
@keyframes ffDailyBonusPulse {
0%, 100% { box-shadow: var(--ff-panel-shadow); }
50% { box-shadow: var(--ff-panel-shadow), 0 0 12px 2px var(--ff-gold-dark); }
}
/* Lighter navigation/utility links - a small frosted pill so they stay legible sitting directly
on the illustrated scene background instead of on a plain page background. */
#ffNewGameBtn, #ffMuteBtn, #ffSpectateBtn { cursor: pointer; display: inline-flex; backdrop-filter: blur(10px); align-items: center; user-select: none; line-height: 18px; color: var(--ff-text); padding: 6px 12px; text-decoration: none; font-size: 13px; border-radius: 20px; background-color: var(--ff-pill-bg); transition: all .2s ease-in-out; }
#ffNewGameBtn:hover, #ffMuteBtn:hover, #ffSpectateBtn:hover { opacity: 1; background-color: var(--ff-pill-bg-hover); }
#ffNewGameBtn:active, #ffMuteBtn:active, #ffSpectateBtn:active { transform: scale(0.92); }
#ffNewGameBtn::before { content: "↺"; display: inline-block; margin-right: 4px; font-size: 14px; }
#ffMuteBtn::before { content: "\266A"; display: inline-block; margin-right: 4px; font-size: 14px; }
#ffMuteBtn.muted::before { content: "\2205"; font-size: 13px; }
#ffMuteBtn.muted { opacity: 0.45; }
#ffBombBtn::before { content: "\1F4A3"; display: inline-block; margin-right: 5px; font-size: 13px; }
#ffBombBtn.ff-bomb-armed { background: #FF3333; color: #FFF; box-shadow: 0 0 0 2px rgba(255,51,51,0.35); }
#ffBombBtn.ff-bomb-armed:hover { background: #FF3333; color: #FFF; }
#ffBombBtn.ff-bomb-earned { animation: ffBombEarned 0.6s ease-out; }
#ffBombBtn.ff-bomb-capped { color: #FF3333; box-shadow: inset 0 0 0 1.5px rgba(255,51,51,0.5); }
#ffBombBtn.ff-bomb-capped:hover { background: rgba(255,51,51,0.12); }
#ffBombBtn.ff-bomb-empty { opacity: 0.4; }
@keyframes ffBombEarned {
0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,51,51,0); }
35% { transform: scale(1.35); box-shadow: 0 0 14px 6px rgba(255,51,51,0.7); }
100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,51,51,0); }
}
#ffClearBoardBtn::before { content: "\1F9F9"; display: inline-block; margin-right: 5px; font-size: 13px; }
#ffClearBoardBtn #ffClearBoardCost::before { content: "\1FA99"; display: inline-block; margin-left: 4px; font-size: 11px; }
#ffClearBoardBtn.ff-clearboard-disabled { opacity: 0.4; }
#ffCanvas.ff-bomb-targeting { cursor: crosshair; }
#ffCanvas.ff-bomb-targeting .ff-cell:not(.ff-empty) { box-shadow: 0 0 0 2px rgba(255,51,51,0.4) inset; }
/* Spectator button */
#ffSpectateBtn::before { content: "\25B6"; display: inline-block; color: green; margin-right: 4px; font-size: 12px; }
#ffSpectatableBtn { cursor: pointer; display: inline-flex; align-items: center; font-size: 13px; padding: 5px 10px; border-radius: 20px; color: var(--ff-text); opacity: 0.75; background-color: var(--ff-pill-bg); border: 1px solid var(--ff-panel-border); transition: opacity .2s; }
#ffSpectatableBtn:hover { opacity: 1; }
#ffMyWatcherCount { font-size: 13px; color: var(--ff-text); opacity: 0.85; display: block; }
#ffMyWatcherCount::before { content: "\1F441"; color: #97B8FF; display: inline-block; font-size: 18px; vertical-align: middle; margin-right: 4px; line-height: 11px; margin-top: -3px; }
/* ---- Back buttons (matches #backFromHelpBtn in NM) ---- */
#ffBackFromHelpBtn, #ffBackFromSpectateBtn { cursor: pointer; text-decoration: none !important; display: inline-block; user-select: none; font-weight: bold; line-height: 18px; padding: 8px 18px; margin-bottom: 14px; font-size: 13px; border-radius: 20px; border: 1.5px solid #766BFF; border: 1.5px solid var(--input-button-background-color); color: #766BFF; color: var(--input-button-background-color); background-color: transparent; transition: all .2s ease-in-out; }
#ffBackFromHelpBtn:hover, #ffBackFromSpectateBtn:hover { background-color: #766BFF; background-color: var(--input-button-background-color); color: #FFF; color: var(--input-button-text-color); box-shadow: 0 4px 12px rgba(118,107,255,0.35); }
#ffBackFromHelpBtn:active, #ffBackFromSpectateBtn:active { transform: scale(0.95); }
#ffBackFromHelpBtn::before, #ffBackFromSpectateBtn::before { content: ""; display: inline-block; float: left; background-image: url(../../Assets/icons/back.png); background-repeat: no-repeat; background-position: center center; background-size: contain; margin-top: 2px; margin-right: 5px; width: 14px; height: 14px; filter: var(--formcontrol-field-image-filter); transition: filter .2s ease-in-out; }
#ffBackFromHelpBtn:hover::before, #ffBackFromHelpBtn:active::before, #ffBackFromSpectateBtn:hover::before, #ffBackFromSpectateBtn:active::before { filter: grayscale(1) invert(1) brightness(100); }
#ff-help-header-actions { display: block; }
#ff-help-header-actions::after { content: ""; display: block; clear: both; }
#ffRetakeTutorialBtn { cursor: pointer; float: right; text-decoration: none; display: inline-block; user-select: none; line-height: 18px; padding: 8px 18px; font-size: 13px; font-weight: 500; border-radius: 20px; border: 1.5px solid #766BFF; border: 1.5px solid var(--input-button-background-color); background: #766BFF; background: var(--input-button-background-color); color: #FFF !important; color: var(--input-button-text-color) !important; transition: all .2s ease-in-out; }
#ffRetakeTutorialBtn:hover { opacity: 0.85; box-shadow: 0 4px 12px rgba(118,107,255,0.4); }
#ffRetakeTutorialBtn:active { transform: scale(0.95); }
/* Collapsible "About" block under the board. Deliberately quiet - a rule and reduced opacity keep it
clearly secondary to the game above it, since nobody arrives here to read. Matches .help-section's own
type scale so the two read as the same voice. Same treatment as .nm-about-game on Number Connect. */
.ff-about-game { clear: both; margin-top: 28px; padding-top: 18px; border-top: 1px solid #EEE; border-top: 1px solid var(--top-search-border-color); opacity: 0.85; }
/* The default disclosure triangle is replaced with one on the heading itself - list-style covers
Firefox/Chrome, the -webkit- pseudo-element covers older WebKit. */
.ff-about-game > summary { cursor: pointer; list-style: none; }
.ff-about-game > summary::-webkit-details-marker { display: none; }
.ff-about-game > summary:focus-visible { outline: 2px solid var(--input-button-background-color); outline-offset: 3px; }
.ff-about-game h2 { display: inline-block; font-size: 16px; font-weight: bold; margin: 0 0 6px; }
.ff-about-game h2::after { content: "\25BE"; display: inline-block; margin-left: 7px; font-size: 13px; transition: transform .2s ease-in-out; }
.ff-about-game[open] h2::after { transform: rotate(180deg); }
.ff-about-lede { display: block; font-size: 14px; line-height: 1.7; max-width: 70ch; }
.ff-about-game p { font-size: 14px; margin: 10px 0 0; line-height: 1.7; max-width: 70ch; }
@media (prefers-reduced-motion: reduce) {
.ff-about-game h2::after { transition: none; }
}
/* ---- Help panel content ---- */
.ff-help-content { max-width: 560px; margin: 0 auto; }
.help-section { margin-bottom: 22px; }
.help-section-title { font-size: 15px; font-weight: bold; margin-bottom: 8px; padding-bottom: 4px; border-bottom: 1px solid #EEE; border-bottom: 1px solid var(--top-search-border-color); }
.help-section p { font-size: 14px; margin: 0 0 8px; line-height: 1.7; }
.help-section ul { margin-left: 20px; line-height: 1.7; }
.help-section li { margin-bottom: 3px; }
/* Gameplay screenshots in the About tab - a plain flex row so more shots can be dropped in later
(each just an ![]()
+ pair) without touching this CSS. No sitewide "content image"
class exists yet to reuse (see lazyLoadImages() in booster.js, which is built for .lazyload/
data-src content scrolling into view, not a display:none help panel), so this is purpose-built. */
.ff-about-gallery { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; }
.ff-about-shot { margin: 0; max-width: 90%; flex: 1 1 260px; }
.ff-about-shot img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 6px 18px rgba(0,0,0,0.2); }
.ff-about-shot figcaption { font-size: 12px; opacity: 0.65; margin-top: 6px; text-align: center; }
.ff-board-message { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 17px; font-weight: 700; text-align: center; white-space: nowrap; color: #FFF; background: rgba(112, 110, 146, 0.85); border: 1px solid rgba(73, 69, 144, 0.9); backdrop-filter: blur(5px); padding: 20px 35px; border-radius: 20px; box-shadow: 0 6px 20px rgba(0,0,0,0.4); animation: ffBoardMessage 1.6s ease-out forwards; z-index: 4; }
.ff-board-message .coin-img::before { content: "\1FA99"; font-size: 18px; line-height: 1; margin-right: 2px; }
@keyframes ffBoardMessage {
0% { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
15% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
80% { opacity: 1; }
100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}
/* ---- Shared end-of-attempt button/text styles (reused by both Level Complete and Level Failed) ---- */
.ff-end-title { font-size: 24px; font-weight: 800; margin-bottom: 6px; color: #766BFF; color: var(--input-button-background-color); }
.ff-end-sub { font-size: 13px; opacity: 0.6; margin-bottom: 18px; }
.ff-end-btn { cursor: pointer; padding: 12px 32px; font-size: 15px; font-weight: 700; border-radius: 24px; border: none; background: #766BFF; background: var(--input-button-background-color); color: #FFF; color: var(--input-button-text-color); transition: all .2s ease-in-out; }
.ff-end-btn:hover { opacity: 0.85; box-shadow: 0 6px 16px rgba(118,107,255,0.4); }
.ff-end-btn:active { transform: scale(0.96); }
.ff-lc-stats { display: flex; justify-content: space-between; gap: 12px; margin: 18px 0 24px; }
.ff-lc-stat { flex: 1; min-width: 0; }
.ff-lc-stat-label { font-size: 10px; font-weight: 600; color: #FFF; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; white-space: nowrap; }
.ff-lc-stat-label.coins-earned::before { content: "\1FA99"; font-size: 18px; line-height: 1; float: left; margin-top: -3px; margin-right: 2px; }
.ff-lc-stat-value { font-size: 20px; font-weight: 800; color: #FFF; line-height: 1; }
.ff-lc-stat-value.ff-lc-coins { color: #FFC517; }
/* ---- Level complete - clears the board in place and celebrates right in the canvas ---- */
.ff-cell.ff-level-clear-wave { animation: ffPop 0.3s ease-out forwards; pointer-events: none; }
.ff-level-complete-inline { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 16px; animation: ffLcPanelIn 0.3s ease-out both; }
.ff-lc-title { font-size: 28px; font-weight: 800; color: #FFF; animation: ffLcTitleBounce 0.65s cubic-bezier(0.34,1.56,0.64,1) 0.1s both; }
.ff-level-complete-inline .ff-lc-stats { margin: 14px 0 24px; animation: ffLcFadeUp 0.45s ease-out 0.35s both; }
.ff-level-complete-inline .ff-end-btn { animation: ffLcFadeUp 0.45s ease-out 0.5s both; box-shadow: 0 4px 18px rgba(118,107,255,0.45); }
@keyframes ffLcPanelIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes ffLcTitleBounce {
0% { transform: scale(0.2); opacity: 0; }
60% { transform: scale(1.2); opacity: 1; }
80% { transform: scale(0.95); }
100% { transform: scale(1); opacity: 1; }
}
@keyframes ffLcFadeUp {
from { opacity: 0; transform: translateY(12px); }
to { opacity: 1; transform: translateY(0); }
}
.ff-lc-confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; }
.ff-confetti-piece { position: absolute; top: -8%; width: 8px; height: 8px; border-radius: 2px; animation-name: ffConfettiFall; animation-timing-function: cubic-bezier(0.4, 0.1, 0.6, 1); animation-fill-mode: forwards; }
@keyframes ffConfettiFall {
0% { transform: translateY(0) rotate(0deg); opacity: 1; }
85% { opacity: 1; }
100% { transform: translateY(480px) rotate(560deg); opacity: 0; }
}
/* ---- Level failed - same in-canvas treatment as Level Complete, but dark/red and jarring instead of celebratory ---- */
.ff-cell.ff-fail-clear-wave { animation: ffFailPop 0.3s ease-out forwards; pointer-events: none; }
@keyframes ffFailPop {
0% { transform: scale(1); opacity: 1; filter: brightness(1) saturate(1); }
40% { transform: scale(1.15); opacity: 0.9; filter: brightness(0.5) saturate(0.2) hue-rotate(-20deg); }
100% { transform: scale(0); opacity: 0; filter: brightness(0.3) saturate(0); }
}
#ffCanvas.ff-fail-shake { animation: ffFailScreenShake 0.5s ease-in-out; }
@keyframes ffFailScreenShake {
0%, 100% { transform: translateX(0); }
10% { transform: translateX(-10px) rotate(-1deg); }
20% { transform: translateX(9px) rotate(1deg); }
30% { transform: translateX(-7px); }
40% { transform: translateX(7px); }
50% { transform: translateX(-5px); }
60% { transform: translateX(5px); }
70% { transform: translateX(-3px); }
80% { transform: translateX(3px); }
90% { transform: translateX(-1px); }
}
.ff-fail-flash { position: absolute; inset: 0; background: rgba(200,0,0,0.4); z-index: 4; pointer-events: none; animation: ffFailFlash 0.5s ease-out forwards; }
@keyframes ffFailFlash {
0% { opacity: 1; }
100% { opacity: 0; }
}
.ff-level-failed-inline { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 16px; animation: ffLcPanelIn 0.3s ease-out both; }
.ff-fail-title { font-size: 28px; font-weight: 800; color: #FC5656; text-shadow: 0 0 20px rgba(118,52,52,0.65); animation: ffFailTitleSlam 0.5s cubic-bezier(0.36,0.07,0.19,0.97) both; }
.ff-fail-sub { font-size: 14px; color: #FFF; margin: 10px 0 24px; max-width: 260px; animation: ffLcFadeUp 0.4s ease-out 0.3s both; }
@keyframes ffFailTitleSlam {
0% { transform: scale(2.2) rotate(-4deg); opacity: 0; }
50% { transform: scale(0.9) rotate(2deg); opacity: 1; }
70% { transform: scale(1.08) rotate(-1deg); }
100% { transform: scale(1) rotate(0deg); opacity: 1; }
}
.ff-fail-btn { background: #FF3333 !important; box-shadow: 0 4px 18px rgba(255,51,51,0.45); animation: ffLcFadeUp 0.45s ease-out 0.45s both; }
.ff-fail-btn:hover { box-shadow: 0 6px 20px rgba(255,51,51,0.55); }
.ff-fail-debris { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; }
.ff-debris-piece { position: absolute; top: -8%; border-radius: 1px; animation-name: ffConfettiFall; animation-timing-function: cubic-bezier(0.4, 0.1, 0.6, 1); animation-fill-mode: forwards; }
/* ---- Standalone app link (mirrors #btnStandaloneApp in NM) ---- */
#ffFooterLinks { display: block; justify-content: space-between; align-items: center; gap: 10px; margin: 4px 0 15px; flex-wrap: wrap; }
#ffFooterLinks::after { content: ""; display: block; clear: both; }
#btnFfStandaloneApp, #backToGameListBtn { float: right; cursor: pointer; display: inline-flex; align-items: center; line-height: 18px; color: #34363E; color: var(--body-text-color); padding: 5px 10px; text-decoration: none; font-size: 12px; border-radius: 15px; backdrop-filter: blur(5px); transition: all .2s ease-in-out; }
#btnFfStandaloneApp:hover, #backToGameListBtn:hover { background-color: rgba(0,0,0,0.1); background-color: var(--link-hover-background-color); box-shadow: rgba(0,0,0,0.4) 0 2px 4px !important; }
#btnFfStandaloneApp:active, #backToGameListBtn:active { transform: scale(0.9); }
#btnFfStandaloneApp[data-type="browser"]::before { content: ""; display: inline-block; margin-right: 5px; width: 18px; height: 18px; background-image: url(../../Assets/icons/desktopview.png); background-size: contain; background-repeat: no-repeat; background-position: center center; }
#btnFfStandaloneApp[data-type="app"]::before { content: ""; display: inline-block; margin-right: 5px; width: 18px; height: 18px; background-image: url(../../Assets/icons/appview.png); background-size: contain; background-repeat: no-repeat; background-position: center center; }
body[data-theme="Default"] #btnFfStandaloneApp, body[data-theme="Default"] #backToGameListBtn { background: rgba(255, 255, 255, 0.5); }
body[data-theme="Dark"] #btnFfStandaloneApp, body[data-theme="Dark"] #backToGameListBtn { background: rgba(0, 0, 0, 0.5); }
#backToGameListBtn { float: left !important; }
#backToGameListBtn::before { content: ""; float: left; width: 18px; height: 18px; margin-top: -1px; margin-right: 5px; background-image: url(../../Assets/Games/Logos/GamesApp.png); background-repeat: no-repeat; background-position: center center; background-size: 18px; }
/* ---- About section ---- */
#ffAboutSection { clear: both; }
#ffAboutSection h2 { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
#ffAboutSection p, #ffAboutSection ul { font-size: 14px; line-height: 1.7; margin-bottom: 8px; }
#ffAboutSection ul { padding-left: 18px; }
#ffAboutSection li { margin-bottom: 3px; }
/* ---- Loading / empty states (shared by Watch's active-games list) ---- */
.activity-loading { opacity: 0.5; font-size: 14px; padding: 10px 0; }
.activity-empty { opacity: 0.65; font-size: 14px; padding: 10px 0; }
.activity-photo { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
/* ---- Active games / watch list ---- */
.active-games-list { display: flex; flex-direction: column; gap: 2px; }
.active-game-item { display: flex; align-items: center; padding: 10px 0; border-bottom: 1px solid #EEE; border-bottom: 1px solid var(--top-search-border-color); gap: 10px; }
.active-game-item:last-child { border-bottom: none; }
.active-game-info { display: flex; flex-direction: column; flex: 1; font-size: 13px; }
.active-game-stats { font-size: 11px; opacity: 0.6; margin-top: 1px; }
.watch-btn { cursor: pointer; font-size: 12px; font-weight: 600; padding: 5px 14px; border-radius: 20px; color: #FFF; color: var(--input-button-text-color); background: #766BFF; background: var(--input-button-background-color); transition: all .2s ease-in-out; white-space: nowrap; }
.watch-btn:hover { opacity: 0.85; transform: translateY(-1px); }
/* ---- Spectator board ---- */
#spectatorBoardHeader { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
#spectatorBoardStats { margin-bottom: 10px; }
#spectatorBoardStats::after { content: ""; display: block; clear: both; }
.spectator-game-num { display: block; font-size: 11px; opacity: 0.65; float: left; }
.spectator-watcher-count { display: block; float: right; font-size: 11px; opacity: 0.8; margin-top: 2px; }
.spectator-watcher-count::before { content: "\1F441"; color: #97B8FF; display: inline-block; font-size: 18px; vertical-align: middle; margin-right: 4px; line-height: 11px; margin-top: -3px; }
#spectatorBoardCanvas { display: flex; flex-direction: column; gap: 4px; position: relative; max-width: 480px; margin: 0 auto; }
#spectatorBoardCanvas .ff-cell { cursor: default; pointer-events: none; }
.spectator-win-msg { text-align: center; padding: 0 20px 20px 20px; font-size: 22px; font-weight: 700; color: #766BFF; color: var(--input-button-background-color); }
.spectator-win-msg::before, .spectator-win-msg::after { content: ""; display: inline-block; position: relative; margin-bottom: -12px; background-image: url(../../Assets/icons/congratulations.png); background-size: contain; background-repeat: no-repeat; background-position: center; width: 48px; height: 48px; }
.spectator-win-msg::before { margin-right: 10px; transform: scaleX(-1); }
.spectator-win-msg::after { margin-left: 10px; }
.spectator-win-msg.no-celebration { margin-top: 5px; }
.spectator-win-msg.no-celebration::before, .spectator-win-msg.no-celebration::after { display: none; }
#stopWatchingBtn { cursor: pointer; display: inline-block; line-height: 18px; margin-top: 14px; padding: 8px 18px; font-size: 13px; font-weight: bold; border-radius: 20px; border: 1.5px solid #766BFF; border: 1.5px solid var(--input-button-background-color); color: #766BFF; color: var(--input-button-background-color); background-color: transparent; transition: all .2s ease-in-out; }
#stopWatchingBtn:hover { background-color: #766BFF; background-color: var(--input-button-background-color); color: #FFF; color: var(--input-button-text-color); box-shadow: 0 4px 12px rgba(118, 107, 255, 0.35); }
#stopWatchingBtn:active { transform: scale(0.95); }
#stopWatchingBtn::before { content: "\25A0"; display: inline-block; margin-right: 6px; margin-top: -3px; color: #ff6666; font-size: 14px; }
@media screen and (max-width: 480px) {
#ffLevel { font-size: 22px; }
#ffCoinsHolder { font-size: 15px; padding: 5px 10px; }
#ffCanvas { gap: 3px; }
#spectatorBoardCanvas { gap: 3px; }
.ff-row { gap: 3px; }
#ffRetakeTutorialBtn { padding: 7px 14px; }
}
@media screen and (max-width: 360px) {
#ffRetakeTutorialBtn { float: none; display: block; margin-bottom: 8px; }
}
/* ---- First-time tutorial (mirrors NumbersMatchup's nm-tutorial-*) ---- */
body.ff-tutorial-open { overflow: hidden; }
#ff-tutorial-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 2000; }
#ff-tutorial-card { position: fixed; left: 50%; transform: translateX(-50%); z-index: 2002; width: 340px; max-width: calc(100vw - 32px); max-height: calc(100vh - 32px); overflow-y: auto; background: #FFF; background: var(--section-background-color); border-radius: 18px; box-shadow: 0 12px 40px rgba(0,0,0,0.35); padding: 22px 24px; }
#ff-tutorial-card.ff-card-bottom { bottom: 70px; top: auto; }
#ff-tutorial-card.ff-card-top { top: 16px; bottom: auto; }
#ff-tutorial-progress { display: flex; gap: 6px; margin-bottom: 16px; }
.ff-tutorial-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(0,0,0,0.15); transition: all .25s ease; }
.ff-tutorial-dot.active { width: 18px; border-radius: 4px; background: #766BFF; background: var(--input-button-background-color); }
#ff-tutorial-title { font-size: 16px; font-weight: 700; margin-bottom: 8px; color: #766BFF; color: var(--input-button-background-color); }
#ff-tutorial-text { font-size: 15px; line-height: 1.5; color: #34363E; color: var(--body-text-color); margin-bottom: 16px; }
#ff-tutorial-actions { display: flex; justify-content: space-between; align-items: center; }
#ff-tutorial-skip { font-size: 14px; color: #34363E; color: var(--body-text-color); opacity: 0.4; cursor: pointer; padding: 4px 0; transition: opacity .2s; }
#ff-tutorial-skip:hover { opacity: 0.7; }
#ff-tutorial-next { cursor: pointer; padding: 9px 22px; font-size: 13px; font-weight: 600; border-radius: 20px; background: #766BFF; background: var(--input-button-background-color); color: #FFF; color: var(--input-button-text-color); transition: all .2s ease-in-out; user-select: none; }
#ff-tutorial-next:hover { opacity: 0.85; box-shadow: 0 4px 12px rgba(118,107,255,0.4); }
#ff-tutorial-next:active { transform: scale(0.95); }
.ff-tutorial-target { position: relative !important; z-index: 2001 !important; border-radius: 8px; animation: ffTutorialPulse 1.8s ease-in-out infinite; }
@keyframes ffTutorialPulse {
0%, 100% { outline: 3px solid rgba(118,107,255,0.9); outline-offset: 6px; box-shadow: 0 0 0 0 rgba(118,107,255,0.4); }
50% { outline: 3px solid rgba(118,107,255,0.9); outline-offset: 6px; box-shadow: 0 0 0 8px rgba(118,107,255,0); }
}
@media screen and (max-width: 800px) {
#ff-tutorial-card { width: 100%; max-width: 100%; max-height: 80vh; left: 0; transform: none; border-radius: 18px; padding: 18px 18px 16px; }
#ff-tutorial-card.ff-card-bottom { box-sizing: border-box; bottom: 0; border-radius: 18px 18px 0 0; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
#ff-tutorial-card.ff-card-top { box-sizing: border-box; top: 0; border-radius: 0 0 18px 18px; }
#ff-tutorial-title { font-size: 17px; }
#ff-tutorial-text { font-size: 16px; margin-bottom: 12px; }
#ff-tutorial-next { padding: 8px 18px; font-size: 15px; }
}