.seo-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
/*body[data-mode="spa"] header { background-color: transparent !important; backdrop-filter: none !important; }*/

/* ---- Number Connect background ---------------------------------------------------------------------
   Companion to Word Snaps' background in SecretWord.css - same construction (rgba layers over the
   theme's own --body-background, so one definition covers light and dark, with no image to ship), but a
   deliberately different identity so the two games don't look interchangeable.
   The glows are drawn from the board's own digit colours - --numbers-matchup-number-7/4/6/3-color, the
   purple, green, blue and gold the tiles are painted with - rather than from Word Snaps' rank bands.
   Taken from the variables rather than copied as hex on purpose: the light and dark themes define
   genuinely different digit colours (#5E35B1 vs #A070FF for 7, and so on), so the background shifts
   with the board instead of drifting out of step with it in one theme.
   Deliberately skips digit 1's red and digit 8's pink - at this size they read as an alert state rather
   than decoration - but any digit can be swapped in by changing the variable number.
   Alphas are lower than Word Snaps' because these are saturated tile colours rather than pastels; the
   same numbers would land far heavier here.
   The square grid is intentionally identical to Word Snaps' - same 0deg/90deg lines, same 64px cell,
   same 0.10 alpha - so the grid reads as shared site furniture across the games and only the colour
   tells them apart. (An earlier pass used a 45-degree lattice here to separate them more sharply; it
   made the two look like unrelated pages rather than one family.)
   The class name matches Word Snaps' on purpose: it pairs with the shared ViewBag.CustomBackgroundCss
   hook in _Layout/_LayoutSPA/_LayoutAccount, and per-page stylesheets mean only one definition is ever
   loaded at a time. ---- */
.body-background.custom-background {
    background-color: var(--body-background);
    /* Fallback first, with the light theme's digit values baked in, then the same thing built from the
       variables - the site's usual two-declaration pattern. It matters more than usual here: all six
       layers live in ONE background-image declaration, so if a browser can't parse color-mix the whole
       declaration is dropped and the page would lose its background entirely rather than just its
       colour. */
    background-image:
        radial-gradient(ellipse 62% 55% at 10% 12%, rgba(94, 53, 177, 0.26) 0%, rgba(94, 53, 177, 0.10) 38%, transparent 72%),
        radial-gradient(ellipse 52% 48% at 90% 20%, rgba(61, 170, 88, 0.22) 0%, rgba(61, 170, 88, 0.09) 40%, transparent 70%),
        radial-gradient(ellipse 55% 50% at 85% 86%, rgba(21, 101, 192, 0.22) 0%, rgba(21, 101, 192, 0.09) 38%, transparent 72%),
        radial-gradient(ellipse 46% 42% at 15% 84%, rgba(230, 168, 23, 0.18) 0%, rgba(230, 168, 23, 0.07) 40%, transparent 70%),
        repeating-linear-gradient(0deg, rgba(128, 128, 128, 0.10) 0px, rgba(128, 128, 128, 0.10) 1px, transparent 1px, transparent 64px),
        repeating-linear-gradient(90deg, rgba(128, 128, 128, 0.10) 0px, rgba(128, 128, 128, 0.10) 1px, transparent 1px, transparent 64px);
    background-image:
        radial-gradient(ellipse 62% 55% at 10% 12%, color-mix(in srgb, var(--numbers-matchup-number-7-color) 26%, transparent) 0%, color-mix(in srgb, var(--numbers-matchup-number-7-color) 10%, transparent) 38%, transparent 72%),
        radial-gradient(ellipse 52% 48% at 90% 20%, color-mix(in srgb, var(--numbers-matchup-number-4-color) 22%, transparent) 0%, color-mix(in srgb, var(--numbers-matchup-number-4-color) 9%, transparent) 40%, transparent 70%),
        radial-gradient(ellipse 55% 50% at 85% 86%, color-mix(in srgb, var(--numbers-matchup-number-6-color) 22%, transparent) 0%, color-mix(in srgb, var(--numbers-matchup-number-6-color) 9%, transparent) 38%, transparent 72%),
        radial-gradient(ellipse 46% 42% at 15% 84%, color-mix(in srgb, var(--numbers-matchup-number-3-color) 18%, transparent) 0%, color-mix(in srgb, var(--numbers-matchup-number-3-color) 7%, transparent) 40%, transparent 70%),
        repeating-linear-gradient(0deg, rgba(128, 128, 128, 0.10) 0px, rgba(128, 128, 128, 0.10) 1px, transparent 1px, transparent 64px),
        repeating-linear-gradient(90deg, rgba(128, 128, 128, 0.10) 0px, rgba(128, 128, 128, 0.10) 1px, transparent 1px, transparent 64px);
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat;
    background-size: 170% 170%, 170% 170%, 170% 170%, 170% 170%, auto, auto;
    background-attachment: fixed;
    animation: numberConnectBackgroundDrift 28s ease-in-out infinite;
}

/* Only the four glows drift; the two diagonal layers stay pinned. A moving diagonal lattice is far more
   noticeable than a moving blur and would compete with the board for attention. */
@keyframes numberConnectBackgroundDrift {
    0%   { background-position: 0% 0%, 100% 0%, 100% 100%, 0% 100%, 0 0, 0 0; }
    50%  { background-position: 20% 16%, 80% 14%, 78% 84%, 22% 86%, 0 0, 0 0; }
    100% { background-position: 0% 0%, 100% 0%, 100% 100%, 0% 100%, 0 0, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    .body-background.custom-background { animation: none; }
}
/* Two-option sliding-pill mode switcher, same pattern as Secret Word's #secretWordModeHolder/
   #secretWordModeIndicator (SecretWord.css) - #numbersMatchupModeIndicator is an absolutely-positioned
   pill that slides between the two option slots via transform, toggled by the
   nm-mode-daily-active / nm-mode-battle-active classes (see updateModeUI in numbersMatchup.js). Three
   tabs now (Classic / Daily Challenge / Battle), so 33.333% per option - same as Word Snaps'. */
#numbersMatchupModeHolder { position: relative; display: block; clear: both; margin-bottom: 14px; padding: 4px; border-radius: 18px; background-color: rgba(0, 0, 0, 0.05); background-color: var(--link-hover-background-color); border: 1px solid rgba(0, 0, 0, 0.05); border: 1px solid var(--section-border-color); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05); }
    #numbersMatchupModeIndicator { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(33.333% - 4px); border-radius: 14px; background: linear-gradient(135deg, #8B82FF 0%, #6E79F9 100%); background: linear-gradient(135deg, var(--input-button-background-color) 0%, var(--input-button-hover-background-color) 100%); box-shadow: 0 3px 8px rgba(118, 107, 255, 0.35); transition: transform .25s cubic-bezier(0.4, 0, 0.2, 1); }
    #numbersMatchupModeHolder.nm-mode-daily-active #numbersMatchupModeIndicator { transform: translateX(101%); }
    #numbersMatchupModeHolder.nm-mode-battle-active #numbersMatchupModeIndicator { transform: translateX(201%); }
    .nm-mode-option { display: inline-block; width: 33.333%; height: 34px; float: left; box-sizing: border-box; overflow: hidden; text-overflow: ellipsis; position: relative; z-index: 1; white-space: nowrap; cursor: pointer; user-select: none; text-align: center; padding: 8px 14px; border-radius: 14px; font-size: 14px; font-weight: 600; letter-spacing: 0.1px; color: #34363E; color: var(--body-text-color); opacity: 0.6; transition: color .2s ease-in-out, opacity .2s ease-in-out, transform .15s ease-in-out; }
        .nm-mode-option:hover:not(.nm-mode-active) { opacity: 0.85; }
        .nm-mode-option:active { transform: scale(0.96); }
        .nm-mode-option.nm-mode-active { opacity: 1; color: #FFF; color: var(--input-button-text-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); }
        .nm-mode-option img { height: 20px; display: inline-block; margin-right: 5px; position: relative; bottom: -5px; margin-top: -8px; }

    /* Small badge glyph before each label - plain text/dingbat content (not an image) so it always
       inherits the option's own currentColor/opacity for free, active or not, light or dark theme. */
    .nm-mode-option::before { display: inline-block; margin-right: 5px; font-weight: 800; vertical-align: 1px; }
        .nm-mode-option[data-mode="game"]::before { content: ""; display: inline-block; position: relative; bottom: -5px; margin-top: -8px; width: 20px; height: 20px; background-image: url(../../Assets/Games/Images/classic.png); background-position: center center; background-size: 20px 20px; background-repeat: no-repeat; filter: none !important; }
        .nm-mode-option[data-mode="daily"]::before { content: ""; display: inline-block; position: relative; bottom: -5px; margin-top: -8px; width: 20px; height: 20px; background-image: url(../../Assets/Games/Images/dailychallenge.png); background-position: center center; background-size: 20px 20px; background-repeat: no-repeat; filter: none !important; }
        .nm-mode-option[data-mode="battle"]::before { content: ""; display: inline-block; position: relative; bottom: -5px; margin-top: -8px; width: 20px; height: 20px; background-image: url(../../Assets/Games/Images/battle.png); background-position: center center; background-size: 20px 20px; background-repeat: no-repeat; filter: none !important; }

#numbersGameCanvas { position: relative; width: 100%; margin-bottom: 35px; }
#matchPhrase { display: none; clear: both; text-align: center; padding: 14px 20px; margin-bottom: 10px; font-size: 17px; font-weight: 600; border-radius: 8px; color: #766BFF; color: var(--numbers-matchup-matchphrase-color); background-color: rgba(118, 107, 255, 0.1); }
#numbersGameCanvas svg.match-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
table.numbers-table { width: 100%; table-layout: fixed; clear: both; box-sizing: border-box; box-shadow: 0 1px 7px rgba(0, 0, 0, 0.14); box-shadow: 0 1px 7px var(--section-box-shadow-color); background: #FFF; background: var(--section-background-color); border-spacing: 0; border-collapse: collapse; border: 1px solid #DDD; border: 1px solid var(--top-search-border-color); }
    table.numbers-table tr { transition: all .25s ease-in-out; opacity: 1.0; }
        table.numbers-table tr.collapse-row { opacity: 0; }
        table.numbers-table tr.new-row { animation: rowSlideIn 0.35s ease-out forwards; }
    table.numbers-table td { text-align: center; vertical-align: middle; font-weight: bold; font-size: clamp(16px, 6.0vw, 35px); background: var(--numbers-matchup-table-background-color); color: var(--side-bar-text-color); border: 1px solid var(--numbers-matchup-table-border-color); }
#game_wrapper[data-theme="default"] table.numbers-table td.hoverable { cursor: pointer; /*transition: all .2s ease-in-out;*/ user-select: none; }
#game_wrapper[data-theme="default"] table.numbers-table td.num-1 { color: var(--numbers-matchup-number-1-color); }
#game_wrapper[data-theme="default"] table.numbers-table td.num-2 { color: var(--numbers-matchup-number-2-color); }
#game_wrapper[data-theme="default"] table.numbers-table td.num-3 { color: var(--numbers-matchup-number-3-color); }
#game_wrapper[data-theme="default"] table.numbers-table td.num-4 { color: var(--numbers-matchup-number-4-color); }
#game_wrapper[data-theme="default"] table.numbers-table td.num-5 { color: var(--numbers-matchup-number-5-color); }
#game_wrapper[data-theme="default"] table.numbers-table td.num-6 { color: var(--numbers-matchup-number-6-color); }
#game_wrapper[data-theme="default"] table.numbers-table td.num-7 { color: var(--numbers-matchup-number-7-color); }
#game_wrapper[data-theme="default"] table.numbers-table td.num-8 { color: var(--numbers-matchup-number-8-color); }
#game_wrapper[data-theme="default"] table.numbers-table td.num-9 { color: var(--numbers-matchup-number-9-color); }
#game_wrapper[data-theme="default"] table.numbers-table td.hoverable.selected { background: var(--numbers-matchup-selected-bg); }
#game_wrapper[data-theme="invert"] table.numbers-table td { color: #FFF !important; }
    #game_wrapper[data-theme="invert"] table.numbers-table td.hoverable { cursor: pointer; transition: all .2s ease-in-out; user-select: none; }
    #game_wrapper[data-theme="invert"] table.numbers-table td.num-1 { background: var(--numbers-matchup-number-1-color-invert-theme); }
    #game_wrapper[data-theme="invert"] table.numbers-table td.num-2 { background: var(--numbers-matchup-number-2-color-invert-theme); }
    #game_wrapper[data-theme="invert"] table.numbers-table td.num-3 { background: var(--numbers-matchup-number-3-color-invert-theme); }
    #game_wrapper[data-theme="invert"] table.numbers-table td.num-4 { background: var(--numbers-matchup-number-4-color-invert-theme); }
    #game_wrapper[data-theme="invert"] table.numbers-table td.num-5 { background: var(--numbers-matchup-number-5-color-invert-theme); }
    #game_wrapper[data-theme="invert"] table.numbers-table td.num-6 { background: var(--numbers-matchup-number-6-color-invert-theme); }
    #game_wrapper[data-theme="invert"] table.numbers-table td.num-7 { background: var(--numbers-matchup-number-7-color-invert-theme); }
    #game_wrapper[data-theme="invert"] table.numbers-table td.num-8 { background: var(--numbers-matchup-number-8-color-invert-theme); }
    #game_wrapper[data-theme="invert"] table.numbers-table td.num-9 { background: var(--numbers-matchup-number-9-color-invert-theme); }
    #game_wrapper[data-theme="invert"] table.numbers-table td.hoverable.selected { border-radius: 50px; }
/*table.numbers-table td.hoverable:hover { background-color: rgba(61, 81, 105, 0.2); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22); }*/
table.numbers-table td.hoverable:active, table.numbers-table td.hoverable.selected { box-shadow: none !important; }
table.numbers-table td.hoverable.shake { animation: shake 0.5s ease-in-out; }
table.numbers-table.no-transition tr, table.numbers-table.no-transition td { transition: none !important; }

#go-to-top { display: none !important; }

#totalPoints { float: left; display: block; padding-bottom: 3px; font-size: 18px; text-align: center; color: #766BFF; color: var(--numbers-matchup-totalpoints-color); }
    #totalPoints::before { content: "Score"; display: block; clear: both; margin-bottom: 0; opacity: 0.6; font-size: 13px; font-weight: normal; }
    #totalPoints .points { display: inline-block; }
.updated-flash { animation: popOut 0.4s ease-in-out; }

.NumbersMatchupFilter-holder { float: right; }
    .NumbersMatchupFilter-holder label { display: block; clear: both; text-align: right; margin-bottom: 4px; font-size: 12px; font-weight: bold; }
#highScore { float: right; display: block; padding-bottom: 3px; font-size: 18px; text-align: center; }
    #highScore::before { content: ""; display: inline-block; background-image: url(../../Assets/icons/highscore.png); background-position: center center; background-repeat: no-repeat; background-size: 20px; width: 20px; height: 20px; margin-right: 4px; margin-top: -2px; }
    #highScore .points { display: inline-block; }
#highScoreGameNumber { display: none; clear: both; font-size: 13px; opacity: 0.65; font-weight: normal; margin-top: 1px; }

/* Same layout as #highScore/#highScoreGameNumber above - only one of the two is ever visible at a
   time (toggled by updateDailyModeUI), since continuous mode's all-time best and today's Daily
   Challenge best are different stats. Star icon matches #dailyChallengeBtn's icon for a consistent
   "daily" visual identity, rather than reusing the trophy icon. */
#dailyHighScore { float: right; display: block; padding-bottom: 3px; font-size: 18px; text-align: center; }
    #dailyHighScore::before { content: "\2605"; display: inline-block; color: #766BFF; color: var(--input-button-background-color); font-size: 16px; margin-right: 4px; vertical-align: middle; margin-top: -3px; }
    #dailyHighScore .points { display: inline-block; }
#dailyHighScoreStreak { display: block; clear: both; font-size: 13px; opacity: 0.65; font-weight: normal; margin-top: 1px; }

/* Countdown to the next daily board (server-time midnight) - ticks down locally in
   numbersMatchup.js's startDailyCountdown, same convention as Secret Word's #secretWordDailyCountdown.
   Sits under the mode tabs as its own standalone line (not tucked inside #dailyHighScore) - centered to
   match #matchPhrase right below it, rather than the left-aligned small-print style that made sense
   when it was a sub-line inside a stat box. Only visible/running while Daily Challenge is active. */
#numbersMatchupDailyCountdown { display: block; clear: both; text-align: center; margin-bottom: 8px; font-size: 14px; font-variant-numeric: tabular-nums; opacity: 0.65; white-space: nowrap; }
    .nm-countdown-label { font-weight: 600; margin-right: 4px; opacity: 1; }
    #numbersMatchupDailyCountdown .hours, #numbersMatchupDailyCountdown .minutes, #numbersMatchupDailyCountdown .seconds { font-weight: 700; }

#gameNumber { display: block; clear: both; text-align: center; padding-bottom: 2px; /*font-size: 12px;*/ opacity: 0.6; }

#numbersCleared { display: block; clear: both; text-align: center; padding-bottom: 6px; }
    #numbersCleared::before { content: "Numbers Cleared"; display: none; clear: both; margin-bottom: 2px; opacity: 0.7; font-size: 14px; font-weight: normal; }
    #numbersCleared span { display: inline-block; user-select: none; padding-left: 5px; padding-right: 5px; font-size: 15px; opacity: 1.0; }
        #numbersCleared span.cleared { opacity: 0.35; text-decoration: line-through; }

.guest-user-displayname { display: block; clear: both; font-size: 13px; font-weight: normal; font-style: italic; margin-bottom: 3px; opacity: 0.7; }

#buttons-holder { display: block; clear: both; text-align: center; }
    #buttons-holder #addNewRow { display: inline-block; position: relative; cursor: pointer; width: 50px; height: 50px; text-align: center; background: #766BFF; background: var(--input-button-background-color); border: 1px solid #766BFF; border: 1px solid var(--input-button-border-color); text-decoration: none; box-sizing: border-box; border-radius: 50px; transition: all .2s ease-in-out; }
        #buttons-holder #addNewRow span { user-select: none; position: absolute; top: -5px; right: -5px; width: 20px; font-size: 14px; height: 20px; text-align: center; border-radius: 50px; color: #34363E; color: var(--side-bar-text-color); box-sizing: border-box; box-shadow: 0 1px 7px rgba(0, 0, 0, 0.14); box-shadow: 0 1px 7px var(--section-box-shadow-color); background: #FFF; background: var(--section-background-color); border: 1px solid #DDD; border: 1px solid var(--top-search-border-color); }
        #buttons-holder #addNewRow::after { content: "+"; display: block; font-size: 30px; line-height: 45px; font-weight: 600; color: #FFF; color: var(--input-button-text-color); }
        #buttons-holder #addNewRow:hover { background-color: #4D5577; background-color: var(--input-button-hover-background-color); transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22); }
        #buttons-holder #addNewRow:active { background-color: #4D5577; background-color: var(--input-button-active-background-color); transform: scale(0.95); box-shadow: none; }
        #buttons-holder #addNewRow.disabled { cursor: default; background: #BFBFBF; border: 1px solid #BFBFBF; transform: none !important; box-shadow: none !important; }
        #buttons-holder #addNewRow.pulse { animation: buttonPulse 1.2s ease-in-out infinite; }

#newGame { float: right; }
#muteBtn { float: right; }
#helpBtn { float: left; }
#playNowBtn { float: left; }
#helpBtn::before { content: "?"; display: inline-flex; align-items: center; margin-top: -3px; 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; }
#newGame::before { content: "↺"; display: inline-block; margin-right: 4px; margin-top: -3px; font-size: 14px; vertical-align: middle; }
#muteBtn::before { content: "\266A"; display: inline-block; margin-right: 4px; margin-top: -3px; font-size: 14px; vertical-align: middle; }
#muteBtn.muted::before { content: "\2205"; font-size: 13px; }
#muteBtn.muted { opacity: 0.45; }
#newGame, #muteBtn, #helpBtn, #highScoresBtn, #dailyHighScoresBtn, #spectateBtn, #activityFeedBtn, #backToGameBtn, #backFromHelpBtn, #playNowBtn, #backFromDailyHighScoresBtn { 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-right: 3px; margin-left: 3px; font-size: 14px; border-radius: 20px; background-color: transparent; transition: all .2s ease-in-out; box-shadow: rgba(0, 0, 0, 0.0) 0 0 0; }
    #newGame:hover, #muteBtn:hover, #helpBtn:hover, #highScoresBtn:hover, #dailyHighScoresBtn:hover, #spectateBtn:hover, #activityFeedBtn:hover, #backToGameBtn:hover, #backFromHelpBtn:hover, #backFromDailyHighScoresBtn:hover, #playNowBtn:hover { text-decoration: none; background-color: rgba(0, 0, 0, 0.1); background-color: var(--link-hover-background-color); box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px !important; }
    #newGame:active, #muteBtn:active, #helpBtn:active, #highScoresBtn:active, #dailyHighScoresBtn:active, #spectateBtn:active, #activityFeedBtn:active, #backToGameBtn:active, #backFromHelpBtn:active, #backFromDailyHighScoresBtn:active, #playNowBtn:active { transform: scale(0.9); }
#backFromHelpBtn, #backToGameBtn, #backFromDailyHighScoresBtn { padding: 8px 18px; text-decoration: none !important; font-size: 13px; font-weight: bold; border: 1.5px solid #766BFF; border: 1.5px solid var(--input-button-background-color); color: #766BFF !important; color: var(--input-button-background-color) !important; background-color: transparent !important; margin-bottom: 14px; }
    #backFromHelpBtn:hover, #backToGameBtn:hover, #backFromDailyHighScoresBtn:hover { background-color: #766BFF !important; background-color: var(--input-button-background-color) !important; color: #FFF !important; color: var(--input-button-text-color) !important; box-shadow: 0 4px 12px rgba(118, 107, 255, 0.35) !important; }
    #backFromHelpBtn:active, #backToGameBtn:active, #backFromDailyHighScoresBtn:active { transform: scale(0.95); }
    #backFromHelpBtn::before, #backToGameBtn::before, #backFromDailyHighScoresBtn::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: all .2s ease-in-out; }
    #backFromHelpBtn:hover::before, #backFromHelpBtn:active::before, #backToGameBtn:hover::before, #backToGameBtn:active::before, #backFromDailyHighScoresBtn:hover::before, #backFromDailyHighScoresBtn:active::before { filter: grayscale(1) invert(1) brightness(100); }
#help-header-actions { display: block; }
    #help-header-actions::after { content: ""; display: block; clear: both; }
#retakeTutorialBtn { 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; user-select: none; }
    #retakeTutorialBtn:hover { opacity: 0.85; box-shadow: 0 4px 12px rgba(118,107,255,0.4); }
    #retakeTutorialBtn:active { transform: scale(0.95); }

#activityFeedBtn { float: left; }
#spectateBtn, #spectatableBtn { float: right; }

.help-content { max-width: 560px; margin: 0 auto; }
.help-section { margin-bottom: 22px; }
/* 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. */
.nm-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. */
    .nm-about-game > summary { cursor: pointer; list-style: none; }
        .nm-about-game > summary::-webkit-details-marker { display: none; }
        .nm-about-game > summary:focus-visible { outline: 2px solid var(--input-button-background-color); outline-offset: 3px; }
    .nm-about-game h2 { display: inline-block; font-size: 16px; font-weight: bold; margin: 0 0 6px; }
        .nm-about-game h2::after { content: "\25BE"; display: inline-block; margin-left: 7px; font-size: 13px; transition: transform .2s ease-in-out; }
    .nm-about-game[open] h2::after { transform: rotate(180deg); }
    .nm-about-lede { display: block; font-size: 14px; line-height: 1.7; max-width: 70ch; }
    .nm-about-game p { font-size: 14px; margin: 10px 0 0; line-height: 1.7; max-width: 70ch; }

@media (prefers-reduced-motion: reduce) {
    .nm-about-game h2::after { transition: none; }
}

.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-title > img { height: 20px; float: left; margin-top: -2px; margin-right: 5px; }
.help-section p { font-size: 14px; margin: 0 0 8px; line-height: 1.7; }
.help-section ul { padding-left: 18px; }
.help-section li { margin-bottom: 3px; }
.help-section img.logo { max-width: 100%; margin: 0 auto; display: block; clear: both; margin-bottom: 10px; }
.help-pairs { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; }
.help-pair { display: inline-flex; align-items: center; gap: 5px; font-size: 15px; font-weight: bold; }
.hp { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; font-weight: bold; font-size: 16px; border-radius: 4px; background-color: rgba(118, 107, 255, 0.12); color: #766BFF; color: var(--input-button-background-color); border: 1px solid rgba(118, 107, 255, 0.3); }
.help-example { margin: 14px 0; }
.help-example-label { font-size: 13px; font-weight: bold; margin-bottom: 5px; opacity: 0.8; }
.help-example-desc { font-size: 13px; opacity: 0.65; margin: 5px 0 0; }
.help-grid { display: inline-flex; flex-direction: column; border: 1px solid #DDD; border: 1px solid var(--top-search-border-color); border-radius: 4px; overflow: hidden; }
.help-row { display: flex; }
.hc { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 15px; border: 1px solid #EEE; border: 1px solid var(--top-search-border-color); box-sizing: border-box; color: #34363E; color: var(--side-bar-text-color); }
    .hc.hc-match { background-color: rgba(118, 107, 255, 0.22); color: #766BFF; color: var(--input-button-background-color); }
    .hc.hc-path { background-color: rgba(118, 107, 255, 0.06); }
    .hc.hc-other { opacity: 0.5; }
.help-score-table { border-collapse: collapse; width: 100%; max-width: 320px; margin: 8px 0; }
    .help-score-table td { padding: 5px 8px; border-bottom: 1px solid #EEE; border-bottom: 1px solid var(--top-search-border-color); font-size: 14px; }
.help-score-pts { font-weight: bold; color: #766BFF; color: var(--input-button-background-color); text-align: right; }

#noMovesPopup { display: none; position: fixed; inset: 0; z-index: 900; align-items: center; justify-content: center; /*background-color: rgba(0,0,0,0.35);*/ cursor: pointer; }
    #noMovesPopup.visible { display: flex; animation: noMovesBackdropIn 0.2s ease-out; }
#noMovesPopupInner { text-align: center; padding: 26px 32px; font-size: 18px; font-weight: 600; border-radius: 14px; color: #766BFF; color: var(--numbers-matchup-matchphrase-color); background: #FFF; background: var(--section-background-color); box-shadow: 0 12px 40px rgba(0,0,0,0.28); max-width: 300px; line-height: 1.45; animation: noMovesPopIn 0.25s ease-out; }
    #noMovesPopupInner::after { content: "Tap to dismiss"; display: block; margin-top: 10px; font-size: 12px; font-weight: normal; opacity: 0.7; }

@keyframes noMovesBackdropIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes noMovesPopIn {
    from { transform: scale(0.85); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

#game-completed-holder { text-align: center; padding: 20px; }

#final-points-total { font-weight: bold; display: block; clear: both; padding-bottom: 20px; font-size: 45px; }
    #final-points-total::before { content: "Final Score"; display: block; clear: both; margin-bottom: 2px; opacity: 0.7; font-size: 14px; font-weight: normal; }
#current-points-total { font-weight: bold; display: block; clear: both; font-size: 45px; }
    #current-points-total::before { content: "Current Score"; display: block; clear: both; margin-bottom: 2px; opacity: 0.7; font-size: 14px; font-weight: normal; }

/* Daily Challenge's result panel (#dailyGameCompleted in numbersMatchup.js) - mirrors
   #game-completed-holder/#final-points-total's own layout/label pattern above, plus
   .spectator-win-msg's congratulations-icon treatment for a cleared board specifically (showDailyResultSummary
   toggles the .cleared class based on the same flag that already gates the fireworks). */
#dailyCompletedHolder { text-align: center; padding: 20px; }

#dailyCompletedTitle { font-size: 20px; font-weight: 700; margin-bottom: 6px; }
    #dailyCompletedTitle.cleared { color: #766BFF; color: var(--input-button-background-color); }
    #dailyCompletedTitle.cleared::before, #dailyCompletedTitle.cleared::after { content: ""; display: inline-block; position: relative; margin-bottom: -10px; background-image: url(../../Assets/icons/congratulations.png); background-size: contain; background-repeat: no-repeat; background-position: center; width: 32px; height: 32px; }
    #dailyCompletedTitle.cleared::before { margin-right: 8px; transform: scaleX(-1); }
    #dailyCompletedTitle.cleared::after { margin-left: 8px; }

#dailyCompletedScore { font-weight: bold; display: block; clear: both; padding-bottom: 6px; font-size: 45px; }
    #dailyCompletedScore::before { content: "Today's Score"; display: block; clear: both; margin-bottom: 2px; opacity: 0.7; font-size: 14px; font-weight: normal; }

#dailyCompletedRank { font-size: 14px; opacity: 0.75; margin-bottom: 14px; min-height: 17px; }

#dailyLeaderboardHolder, #dailyLeaderboardHighScoresHolder { text-align: left; margin-top: 4px; }
#dailyCompletedHolder .help-section-title { text-align: left; }

#startNextGame { cursor: pointer; text-align: center; font-size: 14px; font-weight: 700; min-width: 85px; color: #FFF; color: var(--input-button-text-color); height: 50px; background: linear-gradient(to right, #5aaafc 0%, #404768 100%) !important; border: none !important; text-decoration: none; padding: 7px 30px; line-height: 17px; box-sizing: border-box; border-radius: 50px; transition: all .2s ease-in-out; text-shadow: 1px 1px rgba(0, 0, 0, 0.5); }
    #startNextGame:hover { background-color: #6E79F9; background-color: var(--input-button-hover-background-color); }
    #startNextGame:active { background-color: #6E79F9; background-color: var(--input-button-active-background-color); transform: scale(0.9); }

#btnStandaloneApp, #backToGameListBtn { cursor: pointer; display: inline-block; line-height: 18px; color: #34363E; color: var(--body-text-color); padding: 5px 10px; text-decoration: none; margin-right: 3px; margin-left: 3px; font-size: 12px; border-radius: 15px; background-color: transparent; transition: all .2s ease-in-out; box-shadow: rgba(0, 0, 0, 0.0) 0 0 0; }
    #btnStandaloneApp:hover, #backToGameListBtn:hover { text-decoration: none; background-color: rgba(0, 0, 0, 0.1); background-color: var(--link-hover-background-color); box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px !important; }
    #btnStandaloneApp:active, #backToGameListBtn:active { transform: scale(0.9); }
#btnStandaloneApp { float: right; }
    #btnStandaloneApp[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; }
    #btnStandaloneApp[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; }
#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; }
body[data-theme="Default"] #btnStandaloneApp, body[data-theme="Default"] #backToGameListBtn { background: rgba(255, 255, 255, 0.5); }
body[data-theme="Dark"] #btnStandaloneApp, body[data-theme="Dark"] #backToGameListBtn { background: rgba(0, 0, 0, 0.5); }
#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); }

#numberMatchupGameHolder, #numberMatchupHelpHolder, #numberMatchupHighScoresHolder, #numberMatchupActivityHolder, #numberMatchupSpectateHolder { /*backdrop-filter: blur(10px) !important;*/ }
/*body[data-theme="Default"] #numberMatchupGameHolder, body[data-theme="Default"] #numberMatchupHelpHolder .section-item, body[data-theme="Default"] #numberMatchupHighScoresHolder .section-item, body[data-theme="Default"] #numberMatchupActivityHolder .section-item, body[data-theme="Default"] #numberMatchupSpectateHolder .section-item { background: linear-gradient(180deg, rgba(255, 255, 255, 0.8), rgba(236, 239, 255, 0.8)); }
body[data-theme="Dark"] #numberMatchupGameHolder, body[data-theme="Dark"] #numberMatchupHelpHolder .section-item, body[data-theme="Dark"] #numberMatchupHighScoresHolder .section-item, body[data-theme="Dark"] #numberMatchupActivityHolder .section-item, body[data-theme="Dark"] #numberMatchupSpectateHolder .section-item { background: linear-gradient(180deg, rgba(26, 26, 27, 0.8), rgba(12, 13, 18, 0.8)); }*/

@keyframes buttonPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(118, 107, 255, 0.6); }
    50% { box-shadow: 0 0 0 20px rgba(118, 107, 255, 0); }
}

@keyframes popOut {
    0% { transform: scale(1); font-weight: bold; }
    25% { transform: scale(1.2); font-weight: bold; }
    50% { transform: scale(1.7); font-weight: bold; }
    75% { transform: scale(1.2); font-weight: normal; }
    100% { transform: scale(1); font-weight: normal; }
}

@keyframes shake {
    10%, 90% { transform: translate3d(-2px, 0, 0); }
    20%, 80% { transform: translate3d(4px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-6px, 0, 0); }
    40%, 60% { transform: translate3d(6px, 0, 0); }
}

@keyframes rowSlideIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.match-popup { position: absolute; left: 50%; top: 35%; transform: translateX(-50%); pointer-events: none; font-weight: bold; font-size: 22px; color: #766BFF; color: var(--input-button-background-color); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); white-space: nowrap; z-index: 10; animation: matchPopup 1.2s ease-out forwards; }
    .match-popup span { font-size: 16px; opacity: 0.85; }

@keyframes matchPopup {
    0% { opacity: 0; transform: translateX(-50%) translateY(0); }
    15% { opacity: 1; }
    65% { opacity: 1; transform: translateX(-50%) translateY(-35px); }
    100% { opacity: 0; transform: translateX(-50%) translateY(-55px); }
}

.match-line { stroke: #0094FF; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 2000; stroke-dashoffset: 2000; fill: none; animation: matchLineDraw 0.9s ease-in-out forwards; }

@keyframes matchLineDraw {
    0% { stroke-dashoffset: 2000; opacity: 1; }
    45% { stroke-dashoffset: 0; opacity: 1; }
    75% { stroke-dashoffset: 0; opacity: 1; }
    100% { stroke-dashoffset: 0; opacity: 0; }
}

#numberMatchupHighScoresHolder { margin-bottom: 0; }
    #numberMatchupHighScoresHolder table.user-score-table .user-score-small { display: none; }

@media (max-width: 550px) {
    #numberMatchupHighScoresHolder table.user-score-table thead td:nth-child(3),
    #numberMatchupHighScoresHolder table.user-score-table tbody td:nth-child(3) { display: none; }
    #numberMatchupHighScoresHolder table.user-score-table tbody .user-score-image { width: 30px; height: 30px; margin-right: 6px; }
    #numberMatchupHighScoresHolder table.user-score-table tbody .user-score-name { font-size: 12px; height: 30px; padding-left: 5px; }
    #numberMatchupHighScoresHolder table.user-score-table .rank-cell { padding-right: 8px; }
    #numberMatchupHighScoresHolder table.user-score-table .user-score-small { display: block; font-weight: normal; font-style: italic; padding-top: 1px; }
}

/* Activity feed & spectator buttons */
#activityFeedBtn, #spectateBtn { display: block; font-size: 14px; margin-top: 3px; }
    #activityFeedBtn::before { content: "\25C9"; display: inline-block; color: #DF5959; margin-right: 4px; font-size: 14px; vertical-align: middle; line-height: 14px; margin-top: -3px; }
    #spectateBtn::before { content: "\25B6"; display: inline-block; color: green; margin-right: 4px; font-size: 12px; vertical-align: middle; line-height: 11px; margin-top: -3px; }
#spectatableBtn { 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; }
    #spectatableBtn:hover { opacity: 1; }
#myWatcherCount { font-size: 15px; opacity: 0.9; margin-top: 5px; }
    #myWatcherCount::before { content: "\1F441"; color: #97B8FF; display: inline-block; font-size: 18px; vertical-align: middle; margin-right: 4px; line-height: 11px; margin-top: -3px; }
#backFromActivityBtn, #backFromSpectateBtn, #battleBackBtn, #backFromBattleLeaderboardBtn { cursor: pointer; 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; }
    #backFromActivityBtn:hover, #backFromSpectateBtn:hover, #battleBackBtn:hover, #backFromBattleLeaderboardBtn: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); }
    #backFromActivityBtn:active, #backFromSpectateBtn:active, #battleBackBtn:active, #backFromBattleLeaderboardBtn:active { transform: scale(0.95); }
    #backFromActivityBtn::before, #backFromSpectateBtn::before, #battleBackBtn::before, #backFromBattleLeaderboardBtn::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: all .2s ease-in-out; }
    #backFromActivityBtn:hover::before, #backFromSpectateBtn:hover::before, #battleBackBtn:hover::before, #backFromActivityBtn:active::before, #backFromSpectateBtn:active::before, #battleBackBtn:active::before, #backFromBattleLeaderboardBtn:hover::before, #backFromBattleLeaderboardBtn:active::before { filter: grayscale(1) invert(1) brightness(100); }

/* Activity feed */
.activity-loading { opacity: 0.5; font-size: 14px; padding: 10px 0; }
.activity-empty { opacity: 0.65; font-size: 14px; padding: 10px 0; }
.activity-item { display: flex; align-items: flex-start; padding: 10px 0; gap: 10px; }
    .activity-item:last-child { border-bottom: none; }
body[data-theme="Default"] .activity-item { border-bottom: 1px solid rgba(200, 200, 200, 0.8); }
body[data-theme="Dark"] .activity-item { border-bottom: 1px solid rgba(50, 50, 50, 0.8); }
.activity-photo { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.activity-content { display: flex; flex-direction: column; font-size: 15px; line-height: 1.5; }
.activity-name { font-weight: 600; line-height: 18px; }
.activity-text { opacity: 0.85; }
.activity-time { font-size: 14px; opacity: 0.5; margin-top: 2px; }

/* Personal stats bar (High Scores panel) */
.nm-personal-stats { display: flex; gap: 25px 50px; flex-wrap: wrap; background: rgba(118, 107, 255, 0.07); border-radius: 8px; padding: 12px 16px; margin-bottom: 16px; }
    .nm-personal-stats .nm-stat { display: flex; flex-direction: column; }
    .nm-personal-stats .nm-stat-label { font-size: 10px; font-weight: 600; opacity: 0.55; text-transform: uppercase; letter-spacing: 0.4px; }
    .nm-personal-stats .nm-stat-value { font-size: 18px; font-weight: 700; margin-top: 2px; color: #766BFF; color: var(--input-button-background-color); }

/* Active games 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: 13px; 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: 13px; opacity: 0.65; float: left; }
.spectator-total-score { display: block; font-size: 20px; font-weight: 700; color: #766BFF; color: var(--input-button-background-color); }
.spectator-watcher-count { display: block; float: right; font-size: 13px; 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 { position: relative; }
    #spectatorBoardCanvas svg.match-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
    #spectatorBoardCanvas .numbers-table { font-size: clamp(12px, 4.5vw, 26px); }
.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; }
.spectator-win-score { text-align: center; font-size: 32px; font-weight: 700; margin-top: 10px; }
#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; }

#spectatorActivityFeed { margin-top: 22px; }
.spectator-activity-title { font-size: 13px; font-weight: 600; opacity: 0.65; margin-bottom: 10px; padding-bottom: 6px; border-bottom: 1px solid #EEE; border-bottom: 1px solid var(--top-search-border-color); }

#highScoreToast { position: fixed; top: -140px; left: 50%; transform: translateX(-50%); z-index: 950; background: linear-gradient(135deg, #FFD700 0%, #FFA000 100%); color: #333; padding: 16px 28px; border-radius: 16px; box-shadow: 0 8px 32px rgba(0,0,0,0.3); text-align: center; min-width: 220px; max-width: 340px; white-space: nowrap; pointer-events: none; transition: top 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); }
    #highScoreToast.visible { top: 75px; }
#highScoreToastTitle { font-size: 19px; font-weight: 700; }
#highScoreToastSub { font-size: 13px; margin-top: 5px; opacity: 0.8; white-space: pre-wrap; word-wrap: break-word; }

@keyframes nmPanelIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes nmPanelOut {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-8px); }
}

.nm-panel-in { animation: nmPanelIn 0.22s ease-out both; }
.nm-panel-out { animation: nmPanelOut 0.15s ease-in both; pointer-events: none; }

/* These were missing a reduced-motion guard, unlike Word Snaps' equivalent .sw-panel-in - and they now
   fire on far more than the full-page panel swaps they started with (mode tabs, and every battle screen
   change), so honouring the preference matters more than it did. Dropping the animation is safe for
   both: neither element depends on it to end up visible (display is set directly in _switchToPanel, and
   opacity/transform fall back to their normal un-animated values), and the out-transition's timing comes
   from a setTimeout rather than an animation event, so the swap still completes. */
@media (prefers-reduced-motion: reduce) {
    .nm-panel-in, .nm-panel-out { animation: none; }
}

@media screen and (max-width: 585px) {
    .help-section-title { font-size: 16px !important; }
    .help-section p { font-size: 15px !important; }
}

/* ---- First-time tutorial ---- */
#nm-tutorial-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 2000; }
#nm-tutorial-card { position: fixed; left: 50%; transform: translateX(-50%); z-index: 2002; width: 340px; max-width: calc(100vw - 32px); background: #FFF; background: var(--section-background-color); border-radius: 18px; box-shadow: 0 12px 40px rgba(0,0,0,0.35); padding: 22px 24px; backdrop-filter: blur(5px); }
    #nm-tutorial-card.nm-card-bottom { bottom: 70px; top: auto; }
    #nm-tutorial-card.nm-card-top { top: 16px; bottom: auto; }
#nm-tutorial-progress { display: flex; gap: 6px; margin-bottom: 16px; }
.nm-tutorial-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(0,0,0,0.15); transition: all .25s ease; }
    .nm-tutorial-dot.active { width: 18px; border-radius: 4px; background: #766BFF; background: var(--input-button-background-color); }
#nm-tutorial-title { font-size: 16px; font-weight: 700; margin-bottom: 8px; color: #766BFF; color: var(--input-button-background-color); }
#nm-tutorial-text { font-size: 15px; line-height: 1.5; color: #34363E; color: var(--body-text-color); margin-bottom: 16px; }
#nm-tutorial-actions { display: flex; justify-content: space-between; align-items: center; }
#nm-tutorial-skip { font-size: 14px; color: #34363E; color: var(--body-text-color); opacity: 0.4; cursor: pointer; padding: 4px 0; transition: opacity .2s; }
    #nm-tutorial-skip:hover { opacity: 0.7; }
#nm-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; }
    #nm-tutorial-next:hover { opacity: 0.85; box-shadow: 0 4px 12px rgba(118,107,255,0.4); }
    #nm-tutorial-next:active { transform: scale(0.95); }
.nm-tutorial-target { position: relative !important; z-index: 2001 !important; border-radius: 8px; animation: nmTutorialPulse 1.8s ease-in-out infinite; }

@keyframes nmTutorialPulse {
    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); }
}

/* ---- One-time board theme tip ---- */
#nmThemeTip { position: fixed; z-index: 2001; max-width: 230px; background: #FFF; background: var(--account-dropdown-background-color); color: #34363E; color: var(--body-text-color); border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,0.3); padding: 14px 16px; font-size: 13px; line-height: 1.5; text-align: left; backdrop-filter: blur(10px); }
    #nmThemeTip::before { content: ""; position: absolute; top: -8px; right: 20px; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 8px solid #FFF; border-bottom: 8px solid var(--section-background-color); }
    #nmThemeTip .nm-theme-tip-close { display: inline-block; margin-top: 10px; font-weight: 700; color: #766BFF; color: var(--input-button-background-color); cursor: pointer; }
.nm-theme-tip-highlight { position: relative !important; z-index: 2001 !important; animation: nmTutorialPulse 1.8s ease-in-out infinite; }

#classic-mode-text-hint, #daily-mode-text-hint { margin-top: 15px; }
#battle-mode-text-hint { margin-top: 25px; }

@media screen and (max-width: 800px) {
    #nm-tutorial-card { width: 100%; max-width: 100%; left: 0; transform: none; border-radius: 18px; padding: 18px 18px 16px; }
        #nm-tutorial-card.nm-card-bottom { box-sizing: border-box; bottom: 0; border-radius: 18px 18px 0 0; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
        #nm-tutorial-card.nm-card-top { box-sizing: border-box; top: 0; border-radius: 0 0 18px 18px; }
    #nm-tutorial-title { font-size: 17px; }
    #nm-tutorial-text { font-size: 16px; margin-bottom: 12px; }
    #nm-tutorial-next { padding: 8px 18px; font-size: 15px; }
    #retakeTutorialBtn { padding: 7px 14px; }
}

@media screen and (max-width: 390px) {
    #retakeTutorialBtn { float: none; margin-bottom: 5px; }
}
/* ---- Battle mode ----
   Best-of-3 head-to-head. The board itself is the shared #numbersGameCanvas, so nothing here restyles
   it - these are the wrapper screens around it: the lobby (matchmaking + the list of open battles), the
   scoreboard strip that sits above a battle's board, and the waiting/finished panels that replace the
   board when there is nothing to play. Colour comes from the same --numbers-matchup-number-* tokens the
   board's own digits use, so the mode reads as part of this game rather than a bolt-on. */

/* Matches #secretWordVersusLeaderboardBtn - a small underlined link floated to the top right of the
   lobby, with the same trophy glyph. */
/* Header row for battle mode as a whole - Back on the left, leaderboard on the right, over both the
   lobby and an open battle. Mirrors the row at the top of #secretWordVersusHolder. */
#battleTopBar { clear: both; display: block; }
#battleLeaderboardBtn { cursor: pointer; user-select: none; float: right; display: inline-block; line-height: 20px; font-size: 12px; font-weight: 600; opacity: 0.85; text-decoration: underline; }
    #battleLeaderboardBtn::before { content: ""; display: inline-block; float: left; background-image: url(../../Assets/icons/highscore.png); background-position: center center; background-repeat: no-repeat; background-size: 20px; width: 20px; height: 20px; margin-right: 4px; margin-top: -2px; }
    #battleLeaderboardBtn:hover { opacity: 1; }

#battleError { clear: both; text-align: center; padding: 12px 16px; margin-bottom: 14px; border-radius: 10px; font-size: 14px; font-weight: 600; color: #766BFF; color: var(--numbers-matchup-matchphrase-color); background-color: rgba(118, 107, 255, 0.1); }

/* Same outline treatment as Word Snaps' #secretWordVersusNewMatchButtons - flex with a gap and
   flex: 1 1 200px, so the three share a row on desktop and wrap on their own on a phone without needing
   a width breakpoint. */
#battleNewMatchButtons { display: flex; clear: both; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.nm-battle-new-btn { cursor: pointer; user-select: none; flex: 1 1 200px; text-align: center; padding: 14px 18px; font-size: 14px; font-weight: 600; border-radius: 12px; border: 1.5px solid #766BFF; border: 1.5px solid var(--input-button-background-color); background: transparent; color: #766BFF; color: var(--input-button-background-color); transition: all .2s ease-in-out; }
    .nm-battle-new-btn:hover { background-color: rgba(118, 107, 255, 0.1); }
    .nm-battle-new-btn:active { transform: scale(0.98); }
    .nm-battle-new-btn.nm-battle-new-btn-active { background: #766BFF; background: var(--input-button-background-color); color: #FFF; color: var(--input-button-text-color); }
    .nm-battle-new-btn.nm-battle-new-btn-disabled { cursor: default; opacity: 0.6; }
        .nm-battle-new-btn.nm-battle-new-btn-disabled:hover { background-color: transparent; }

/* Opponent-search dropdown, matching #secretWordVersusOpponentResults and its suggestion rows - the
   panel hangs 4px below the input on the dropdown surface token (not the section one), and each row is
   a flex line with a small 24px avatar rather than the 36px one the battle list rows use. */
#battleOpponentSearchWrapper { clear: both; position: relative; margin-bottom: 14px; }
#battleOpponentResults { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20; max-height: 220px; overflow-y: auto; box-sizing: border-box; border-radius: 10px; background: #FFF; background: var(--account-dropdown-background-color); border: 1px solid #DDD; border: 1px solid var(--top-search-border-color); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); box-shadow: 0 4px 14px var(--section-box-shadow-color); }
.nm-battle-suggestion-item { display: flex; align-items: center; padding: 9px 14px; font-size: 14px; cursor: pointer; user-select: none; }
    .nm-battle-suggestion-item:hover { background-color: rgba(118, 107, 255, 0.12); }
.nm-battle-suggestion-avatar { width: 24px; height: 24px; margin-right: 8px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; }

#battleList { display: block; clear: both; }
#battleEmptyState { clear: both; text-align: center; font-size: 13px; opacity: 0.6; padding: 24px 10px; }

/* Battle rows, matching .secret-word-versus-row - a 4px left border carries the row's state, so the
   list can be read down the edge without parsing every status line. */
.nm-battle-row { position: relative; display: block; clear: both; padding: 12px 14px; margin-bottom: 8px; border-radius: 8px; background: #FFF; background: var(--section-background-color); border: 1px solid #DDD; border: 1px solid var(--top-search-border-color); border-left-width: 4px; }
    .nm-battle-row-clickable { cursor: pointer; transition: transform .15s ease-in-out; }
        .nm-battle-row-clickable:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); }
    .nm-battle-row-avatar { float: left; width: 36px; height: 36px; margin-right: 10px; border-radius: 50%; object-fit: cover; }
    .nm-battle-row-info { float: left; max-width: 55%; }
    .nm-battle-row-name { font-weight: 600; text-transform: capitalize; }
    .nm-battle-row-status { font-size: 12px; opacity: 1; margin-top: 2px; }
    .nm-battle-row-score { font-size: 11px; opacity: 1; margin-top: 2px; }
    .nm-battle-row-actions { float: right; }

.nm-battle-row-challenge_received { border-left-color: #5E35B1; border-left-color: var(--numbers-matchup-number-7-color); }
.nm-battle-row-active { border-left-color: #2E9E5B; }
.nm-battle-row-finished { opacity: 0.85; }
.nm-battle-row-challenge_sent, .nm-battle-row-queued { border-left-color: #9AA0A6; }

/* A round waiting on you gets a brighter border and bolder status text so it stands out from rows with
   nothing to do right now; rows waiting on the opponent are dimmed, since there's no action to take. */
.nm-battle-row-active.nm-battle-row-your-round { border-left-width: 6px; background-color: rgba(46, 158, 91, 0.06); }
    .nm-battle-row-active.nm-battle-row-your-round .nm-battle-row-status { color: #2E9E5B; font-weight: 700; opacity: 1; }
.nm-battle-row-active.nm-battle-row-waiting { opacity: 0.9; }

.nm-battle-your-round-badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; background: #2E9E5B; color: #FFF; animation: nmBattleYourRoundPulse 1.8s ease-in-out infinite; }

@keyframes nmBattleYourRoundPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

/* Pill-shaped row actions, matching Word Snaps' .secret-word-versus-row-btn set - filled for the
   affirmative action, outlined for the dismissive ones. */
.nm-battle-action { cursor: pointer; user-select: none; display: inline-block; margin-left: 6px; padding: 5px 14px; border-radius: 14px; font-size: 12px; font-weight: 600; white-space: nowrap; transition: all .2s ease-in-out; }
    .nm-battle-action:active { transform: scale(0.95); }
    .nm-battle-action.nm-battle-play, .nm-battle-action.nm-battle-accept { background: #766BFF; background: var(--input-button-background-color); color: #FFF; color: var(--input-button-text-color); }
        .nm-battle-action.nm-battle-play:hover, .nm-battle-action.nm-battle-accept:hover { background-color: #4D5577; background-color: var(--input-button-hover-background-color); }
    .nm-battle-action.nm-battle-decline, .nm-battle-action.nm-battle-cancel, .nm-battle-action.nm-battle-copy { background: transparent; border: 1px solid #DDD; border: 1px solid var(--top-search-border-color); opacity: 0.75; }
        .nm-battle-action.nm-battle-decline:hover, .nm-battle-action.nm-battle-cancel:hover, .nm-battle-action.nm-battle-copy:hover { opacity: 1; background-color: rgba(0, 0, 0, 0.05); }

/* ---- Open battle: scoreboard strip above the board ---- */

#battleMatchHeader { clear: both; margin-bottom: 16px; }
/* #battleBackBtn takes its whole appearance from the shared back-button rule above (grouped with
   #backFromActivityBtn / #backFromSpectateBtn), which is this game's own copy of the same outline pill
   Word Snaps uses for #secretWordVersusBackBtn - so there's deliberately nothing to restyle here. */

#battleScoreboard { clear: both; display: block; padding: 14px; border-radius: 12px; background: #FFF; background: var(--section-background-color); border: 1px solid #DDD; border: 1px solid var(--top-search-border-color); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.08); box-shadow: 0 1px 5px var(--section-box-shadow-color); }
.nm-battle-side { width: 32%; float: left; text-align: center; }
    .nm-battle-side:last-of-type { float: right; }
    /* Bigger than the list rows' 36px - this is the "who is this battle against" header, not a line in
       a list, so it carries the two faces rather than just labelling them. */
    .nm-battle-avatar { display: block; width: 44px; height: 44px; margin: 0 auto 6px; border-radius: 50%; object-fit: cover; }
.nm-battle-side-name { display: block; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0.8; }
/* The round tally, in the board's own "7" colour so the two sides read as part of the same game. */
.nm-battle-rounds-won { display: block; margin-top: 2px; font-size: 26px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; color: #5E35B1; color: var(--numbers-matchup-number-7-color); }
#battleRoundLabel { width: 36%; float: left; text-align: center; padding-top: 18px; font-size: 14px; font-weight: 700; opacity: 0.85; }

#battleRoundDeadline { clear: both; padding-top: 10px; text-align: center; font-size: 12px; font-weight: 600; opacity: 0.65; }

/* Last round's scores side by side. This is the first and only moment either player sees the other's
   number for a round, so it gets a tinted band of its own rather than being folded into the pips - and a
   left border in the same win/loss colours the pips and the finished breakdown use. */
#battleLastRoundResult { clear: both; margin-top: 12px; padding: 9px 14px; border-radius: 8px; text-align: center; font-size: 13px; background-color: rgba(0, 0, 0, 0.04); background-color: var(--link-hover-background-color); border-left: 3px solid transparent; }
    #battleLastRoundResult.nm-battle-last-round-won { border-left-color: #3DAA58; border-left-color: var(--numbers-matchup-number-4-color); }
    #battleLastRoundResult.nm-battle-last-round-lost { border-left-color: #E53935; border-left-color: var(--numbers-matchup-number-1-color); }
#battleLastRoundLabel { font-weight: 700; opacity: 0.75; margin-right: 8px; }
.nm-battle-last-round-scores { font-weight: 800; font-size: 15px; font-variant-numeric: tabular-nums; }
.nm-battle-last-round-vs { margin: 0 6px; font-size: 11px; font-weight: 600; opacity: 0.5; }
#battleLastRoundOutcome { margin-left: 8px; font-weight: 600; opacity: 0.75; }

/* One pip per round of the best-of-3, filled in with who took it. An undecided round - including the
   one being played - stays blank on purpose: nobody can see that result yet. */
#battleRoundHistory { clear: both; padding-top: 12px; text-align: center; }
.nm-battle-pip { display: inline-block; width: 26px; height: 26px; line-height: 26px; margin: 0 4px; border-radius: 50%; font-size: 12px; font-weight: 700; text-align: center; border: 1px solid #DDD; border: 1px solid var(--top-search-border-color); opacity: 0.5; transition: opacity .2s ease-in-out; }
    .nm-battle-pip.nm-battle-pip-current { opacity: 1; border-color: #766BFF; border-color: var(--numbers-matchup-number-7-color); }
    .nm-battle-pip.nm-battle-pip-won { opacity: 1; color: #FFF; border-color: transparent; background-color: #3DAA58; background-color: var(--numbers-matchup-number-4-color); }
    .nm-battle-pip.nm-battle-pip-lost { opacity: 1; color: #FFF; border-color: transparent; background-color: #E53935; background-color: var(--numbers-matchup-number-1-color); }
    .nm-battle-pip.nm-battle-pip-draw { opacity: 1; }

/* ---- Waiting on the opponent ---- */

#battleWaitingHolder { clear: both; text-align: center; padding: 34px 20px; }
#battleWaitingTitle { font-size: 20px; font-weight: 700; margin-bottom: 8px; }
#battleWaitingScore { font-size: 52px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; color: #5E35B1; color: var(--numbers-matchup-number-7-color); }
#battleWaitingText { max-width: 420px; margin: 12px auto 0; font-size: 14px; line-height: 1.6; opacity: 0.75; }

/* ---- Finished battle ---- */

#battleFinishedHolder { clear: both; text-align: center; padding: 30px 20px; }
#battleFinishedTitle { font-size: 24px; font-weight: 800; margin-bottom: 6px; }
    #battleFinishedTitle.won { color: #3DAA58; color: var(--numbers-matchup-number-4-color); }
    #battleFinishedTitle.lost { opacity: 0.8; }
#battleFinishedSub { font-size: 15px; font-weight: 600; opacity: 0.75; margin-bottom: 18px; }
#battleFinishedRounds { max-width: 340px; margin: 0 auto; }

.nm-battle-round-row { display: block; padding: 9px 14px; margin-bottom: 8px; border-radius: 10px; font-size: 14px; font-weight: 600; background-color: rgba(0, 0, 0, 0.04); background-color: var(--link-hover-background-color); }
.nm-battle-round-num { float: left; opacity: 0.75; }
.nm-battle-round-score { display: inline-block; min-width: 56px; font-variant-numeric: tabular-nums; }
.nm-battle-round-vs { display: inline-block; margin: 0 6px; font-size: 12px; opacity: 0.5; }
.nm-battle-round-row.nm-battle-round-won { box-shadow: inset 3px 0 0 #3DAA58; box-shadow: inset 3px 0 0 var(--numbers-matchup-number-4-color); }
.nm-battle-round-row.nm-battle-round-lost { box-shadow: inset 3px 0 0 #E53935; box-shadow: inset 3px 0 0 var(--numbers-matchup-number-1-color); }

/* Underlined text link, same understatement as Word Snaps' #secretWordVersusLeaveBtn - conceding should
   be findable, not inviting, so it deliberately isn't styled as a button. */
#battleForfeitBtn { cursor: pointer; user-select: none; display: block; clear: both; text-align: center; font-size: 13px; font-weight: 600; padding: 6px 16px; margin-top: 10px; opacity: 0.7; text-decoration: underline; }
    #battleForfeitBtn:hover { opacity: 1; }

#battleDismissBtn { display: inline-block; padding: 9px 20px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; user-select: none; opacity: 0.75; border: 1px solid #DDD; border: 1px solid var(--top-search-border-color); transition: opacity .2s ease-in-out, transform .15s ease-in-out; }
    #battleDismissBtn:hover { opacity: 1; }
    #battleDismissBtn:active { transform: scale(0.97); }

@media screen and (max-width: 700px) {
    /* Same stacking as Word Snaps' versus rows at this width - the info block takes the full line and
       the actions drop below it, rather than the two fighting over a narrow row. */
    .nm-battle-row-info { float: none; max-width: 100%; margin-bottom: 8px; }
    .nm-battle-row-actions { float: none; clear: both; text-align: right; }
    #battleRoundLabel { padding-top: 14px; font-size: 13px; }
    #battleWaitingScore { font-size: 42px; }
}

@media (prefers-reduced-motion: reduce) {
    .nm-battle-new-btn, .nm-battle-action, .nm-battle-row-clickable, .nm-battle-pip, #battleDismissBtn, #battleBackBtn { transition: none; }
    .nm-battle-your-round-badge { animation: none; }
}