/* ---- Fruit Frenzy ---- */

#ffGameHolder { max-width: 500px; margin: 0 auto; }
#ffGameHolder .section-padding { position: relative; }

/* ---- 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; }

/* ---- Level header ---- */
#ffHeader { display: flex; justify-content: center; align-items: center; gap: 24px; margin-bottom: 14px; }
#ffLevelHolder { text-align: center; min-width: 70px; }
#ffLevelLabel { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.5; margin-bottom: 2px; }
#ffLevel { font-size: 26px; font-weight: 700; line-height: 1; }
.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.18); color: #2E9E4C; }
.ff-difficulty-medium { background: rgba(255,204,0,0.2); color: #B38600; }
.ff-difficulty-hard { background: rgba(255,149,0,0.2); color: #C46E00; }
.ff-difficulty-veryhard { background: rgba(255,59,48,0.18); color: #D6321F; }

/* ---- Coins ---- */
#ffCoinsHolder { display: flex; align-items: center; gap: 6px; font-size: 18px; font-weight: 700; padding: 6px 14px; border-radius: 20px; background: rgba(255,193,7,0.14); color: #B38600; }
#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: 10px; font-size: 13px; opacity: 0.8; }
#ffGoalText strong { color: #766BFF; color: var(--numbers-matchup-totalpoints-color); font-size: 15px; }
#ffGoalIcon { width: 28px; height: 28px; vertical-align: middle; margin: -4px 2px 0 2px; }
#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; }
#ffGoalCount.ff-goal-pulse { display: inline-block; animation: ffGoalPulse 0.4s ease-out; }
@keyframes ffGoalPulse { 0% { transform: scale(1); } 40% { transform: scale(1.35); color: #766BFF; color: var(--input-button-background-color); } 100% { transform: scale(1); } }

/* ---- Game canvas ---- */
#ffCanvas { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; position: relative; padding-top: 6px; overflow: hidden; min-height: 275px; }

.ff-row { display: flex; gap: 4px; }
.ff-cell { flex: 1; aspect-ratio: 1; border-radius: 5px; 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; }
.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; }
    .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(45deg); }

.ff-cell.ff-powerup-created { animation: ffPowerupBorn 0.24s ease-out; }
.ff-rocket-flight { position: absolute; left: -12%; 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; }
@keyframes ffRocketFlight { 0% { left: -12%; opacity: 1; } 100% { left: 104%; 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); opacity: 1; filter: brightness(1); } 35% { transform: scale(1.35); opacity: 1; filter: brightness(2.2) saturate(2); } 100% { transform: scale(0); 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: banana, cherry, grape, limon, mango,
   orange, peach, pear, pineapple, plum, strawberry, watermelon (see FruitFrenzyController's
   Directory.GetFiles enumeration) - colors stay in each fruit's general family but are spread
   apart in hue/saturation/lightness so 12 balls stay tellable apart at a glance (e.g. limon
   pushed neon-chartreuse and mango/pear/watermelon spread from yellow to green to keep them
   from collapsing into the same yellow-green), 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%, #FBC000, #DDB65A 55%, #A77400); box-shadow: 0 3px 8px rgba(179,125,0,0.35); } /* banana */
.ff-c1 { background: radial-gradient(circle at 35% 30%, #FF6B7A, #E01B3D 55%, #7A0316); box-shadow: 0 3px 8px rgba(122,3,22,0.4); } /* cherry */
.ff-c2 { background: radial-gradient(circle at 35% 30%, #E3B8FF, #A020F0 55%, #5C0099); box-shadow: 0 3px 8px rgba(92,0,153,0.35); } /* grape */
.ff-c3 { background: radial-gradient(circle at 35% 30%, #FCD700, #E2FF00 55%, #949871); box-shadow: 0 3px 8px rgba(140,158,0,0.35); } /* limon */
.ff-c4 { background: radial-gradient(circle at 35% 30%, #6BD300, #9EB03D 55%, #446526); box-shadow: 0 3px 8px rgba(168,93,0,0.35); } /* mango */
.ff-c5 { background: radial-gradient(circle at 35% 30%, #FFB067, #FF7A00 55%, #B34D00); box-shadow: 0 3px 8px rgba(179,77,0,0.35); } /* orange */
.ff-c6 { background: radial-gradient(circle at 35% 30%, #FFD9C2, #FF8F70 55%, #B33D1E); box-shadow: 0 3px 8px rgba(179,61,30,0.35); } /* peach */
.ff-c7 { background: radial-gradient(circle at 35% 30%, #D4F0A0, #7CB518 55%, #3F5C0A); box-shadow: 0 3px 8px rgba(63,92,10,0.35); } /* pear */
.ff-c8 { background: radial-gradient(circle at 35% 30%, #FFF6D0, #E8C547 55%, #8C6A10); box-shadow: 0 3px 8px rgba(140,106,16,0.35); } /* pineapple */
.ff-c9 { background: radial-gradient(circle at 35% 30%, #A7B8F0, #2E4FA3 55%, #101A47); box-shadow: 0 3px 8px rgba(16,26,71,0.4); } /* plum */
.ff-c10 { background: radial-gradient(circle at 35% 30%, #FF9C86, #E8402A 55%, #7A1D0F); box-shadow: 0 3px 8px rgba(122,29,15,0.4); } /* strawberry */
.ff-c11 { 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 (mirrors NumbersMatchup button row) ---- */
#ffButtons { display: block; clear: both; text-align: center; }
#ffHelpBtn, #ffNewGameBtn, #ffMuteBtn, #ffBombBtn, #ffClearBoardBtn, #ffSpectateBtn { cursor: pointer; display: inline-block; user-select: none; line-height: 18px; color: #34363E; color: var(--body-text-color); padding: 5px 10px; text-decoration: none; margin: 0 3px; font-size: 14px; border-radius: 20px; background-color: transparent; transition: all .2s ease-in-out; }
    #ffHelpBtn:hover, #ffNewGameBtn:hover, #ffMuteBtn:hover, #ffBombBtn:hover, #ffClearBoardBtn:hover, #ffSpectateBtn: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; }
    #ffHelpBtn:active, #ffNewGameBtn:active, #ffMuteBtn:active, #ffBombBtn:active, #ffClearBoardBtn:active, #ffSpectateBtn:active { transform: scale(0.9); }
#ffHelpBtn { float: left; }
#ffNewGameBtn, #ffSpectateBtn, #ffSpectatableBtn { float: right; }
#ffMuteBtn  { float: right; }
#ffBombBtn  { float: right; }
#ffClearBoardBtn { float: left; }
#ffHelpBtn::before   { content: "?"; display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid currentColor; font-size: 9px; font-weight: bold; margin-right: 4px; vertical-align: middle; margin-top: -2px; }
#ffNewGameBtn::before { content: "↺"; display: inline-block; margin-right: 4px; margin-top: -3px; font-size: 14px; vertical-align: middle; }
#ffMuteBtn::before   { content: "\266A"; display: inline-block; margin-right: 4px; margin-top: -3px; font-size: 14px; vertical-align: middle; }
#ffMuteBtn.muted::before { content: "\2205"; font-size: 13px; }
#ffMuteBtn.muted { opacity: 0.45; }
#ffBombBtn::before { content: "\1F4A3"; display: inline-block; margin-right: 4px; margin-top: -2px; font-size: 13px; vertical-align: middle; }
#ffBombBtn.ff-bomb-armed { background-color: #FF3333; color: #FFF; box-shadow: 0 0 0 2px rgba(255,51,51,0.35); }
    #ffBombBtn.ff-bomb-armed:hover { background-color: #FF3333; color: #FFF; }
#ffBombBtn.ff-bomb-earned { animation: ffBombEarned 0.6s ease-out; }
#ffBombBtn.ff-bomb-capped { color: #FF3333; border: 1.5px solid rgba(255,51,51,0.5); }
    #ffBombBtn.ff-bomb-capped:hover { background-color: 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: 4px; margin-top: -2px; font-size: 13px; vertical-align: middle; }
#ffClearBoardBtn #ffClearBoardCost::before { content: "\1FA99"; display: inline-block; margin-left: 4px; margin-top: -4px; font-size: 11px; vertical-align: middle; }
#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; vertical-align: middle; line-height: 11px; margin-top: -3px; }
#ffSpectatableBtn { cursor: pointer; display: inline-block; font-size: 14px; padding: 2px 8px; border-radius: 10px; opacity: 0.6; border: 1px solid currentColor; margin-top: 6px; margin-right: 5px; transition: opacity .2s; }
    #ffSpectatableBtn:hover { opacity: 1; }
#ffMyWatcherCount { font-size: 13px; opacity: 0.9; margin-top: 15px; display: block; clear: both; }
    #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, #backToGameListBtn { 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, #backToGameListBtn: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, #backToGameListBtn:active { transform: scale(0.95); }
    #ffBackFromHelpBtn::before, #ffBackFromSpectateBtn::before, #backToGameListBtn::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, #backToGameListBtn:hover::before, #backToGameListBtn: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; 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); }

/* ---- 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; }
.help-section ul { margin-left: 20px; }

.ff-board-message { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 15px; font-weight: 700; text-align: center; white-space: nowrap; color: #FFF; background: rgba(52, 54, 62, 0.85); padding: 8px 18px; border-radius: 20px; box-shadow: 0 6px 20px rgba(0,0,0,0.3); animation: ffBoardMessage 1.6s ease-out forwards; z-index: 4; }
@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; text-transform: uppercase; letter-spacing: 0.05em; opacity: 0.45; margin-bottom: 4px; }
.ff-lc-stat-value { font-size: 20px; font-weight: 800; line-height: 1; }
.ff-lc-stat-value.ff-lc-coins { color: #B38600; }

/* ---- 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: #766BFF; color: var(--input-button-background-color); text-shadow: 0 0 18px rgba(118,107,255,0.5); 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: #FF3333; text-shadow: 0 0 20px rgba(255,51,51,0.65); animation: ffFailTitleSlam 0.5s cubic-bezier(0.36,0.07,0.19,0.97) both; }
.ff-fail-sub { font-size: 14px; opacity: 0.75; 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) ---- */
#btnFfStandaloneApp, #btnShowAboutSection { cursor: pointer; display: inline-block; float: left; line-height: 18px; color: #34363E; color: var(--body-text-color); padding: 5px 10px; text-decoration: none; margin: 0 3px 15px; font-size: 12px; border-radius: 15px; background-color: transparent; transition: all .2s ease-in-out; }
    #btnFfStandaloneApp:hover, #btnShowAboutSection: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, #btnShowAboutSection:active { transform: scale(0.9); }
    #btnFfStandaloneApp[data-type="browser"]::before { content: ""; display: inline-block; float: left; 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; float: left; 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; }
#ffWrapper::after { content: ""; display: block; clear: both; }
#btnShowAboutSection { float: right; font-size: 12px; }

/* ---- 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; opacity: 0.75; 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; }
    #ffHeader { gap: 12px; }
    #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; }
}