/* Standard "sr-only" visually-hidden pattern (Bootstrap/WAI-ARIA) rather than the older clip:rect()
   trick - same visual result (fully invisible, still read by screen readers), but clip-path is the
   pattern crawlers/spam-detection recognize as legitimate accessibility hiding rather than the
   pre-2010s "hide text for SEO" signature the old clip property carries. Same rule as ShellBreach.css'
   .seo-title - kept in sync since both games use the identical hidden-h1 pattern. */
.seo-title { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 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); background-image: var(--nc-background-classic); background-position: center center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; animation: none !important; transition: all .2s ease-in-out; }
    .body-background.custom-background[data-mode="game"] { background-image: var(--nc-background-classic); }
    .body-background.custom-background[data-mode="daily"] { background-image: var(--nc-background-daily); }
    .body-background.custom-background[data-mode="battle"] { background-image: var(--nc-background-battle); }
    .body-background.custom-background[data-mode="daily"] #buttons-holder .clear-space { display: none; }
    .body-background.custom-background[data-mode="battle"] #buttons-holder .clear-space { display: none; }

/* 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); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
    #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: normal; margin-right: 4px; opacity: 1; }
    #numbersMatchupDailyCountdown .hours, #numbersMatchupDailyCountdown .minutes, #numbersMatchupDailyCountdown .seconds { font-weight: 700; }

/* Replaces the countdown on a past day - same centered standalone line, not faded, since it's what
   tells the player this isn't today's board. */
#numbersMatchupDailyViewingDate { display: block; clear: both; text-align: center; margin-bottom: 8px; font-size: 14px; }
#numbersMatchupDailyViewingDateText { font-weight: 700; }
#numbersMatchupDailyBackToToday { margin-left: 10px; font-size: 13px; text-decoration: underline; cursor: pointer; opacity: 0.75; white-space: nowrap; }
    #numbersMatchupDailyBackToToday:hover, #numbersMatchupDailyBackToToday:focus-visible { opacity: 1; }

#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: left; }
#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, #dailyCompletedViewLeaderboardBtn { 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, #dailyCompletedViewLeaderboardBtn: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, #dailyCompletedViewLeaderboardBtn:active { transform: scale(0.9); }
#backFromHelpBtn, #backToGameBtn, #backFromDailyHighScoresBtn, #dailyCompletedViewLeaderboardBtn { 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, #dailyCompletedViewLeaderboardBtn: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); }

#newGameLevelSelect { margin-left: 5px; }
#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 .about-header { display: inline-block; font-size: 16px; font-weight: bold; margin: 0 0 6px; }
        .nm-about-game .about-header::after { content: "\25BE"; display: inline-block; margin-left: 7px; font-size: 13px; transition: transform .2s ease-in-out; }
    .nm-about-game[open] .about-header::after { transform: rotate(180deg); }
    .nm-about-lede, .nm-about-lede h1 { display: block; font-size: 14px; line-height: 1.7; max-width: 70ch; font-weight: normal; }
        .nm-about-lede h1 { display: inline-block; margin: 0; }
    .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 .about-header::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; }
    /* "Your Score" rather than "Today's Score": this panel now also shows a finished PAST board, where
       "today" is simply wrong. The leaderboard heading underneath names the actual date. */
    #dailyCompletedScore::before { content: "Your 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; backdrop-filter: blur(10px); 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; }
}

/* ---- Battle leaderboard "Your Record" column (mirrors Word Snaps' Versus leaderboard) ---- */
/* The viewer's own row, so they can find themselves without reading every name. */
tr.nm-your-row > td { background-color: rgba(118, 107, 255, 0.09); }
    tr.nm-your-row .user-score-name { font-weight: 700; }
/* A dash means the two have never battled, which on a small player base is most of the table -
   dimmed so the rows where there IS a history are the ones that read. Tabular figures keep the
   W-L pairs aligned down the column even though the dash is a different width. */
.user-score.nm-no-record { opacity: 0.35; }
#numberMatchupBattleLeaderboardHolder table.user-score-table .nm-h2h-cell .user-score { font-variant-numeric: tabular-nums; }
#numberMatchupBattleLeaderboardHolder table.user-score-table .user-score-small { display: none; }

@media (max-width: 550px) {
    /* This table is 5-7 columns wide depending on whether Draws and Your Record are showing, so the
       column is hidden by class rather than by position - nth-child would point at a different
       column depending on whether anyone has drawn a battle. Your Record folds under the name. */
    #numberMatchupBattleLeaderboardHolder table.user-score-table .nm-h2h-cell { display: none; }
    #numberMatchupBattleLeaderboardHolder 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.25s 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: 0; }
#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: #766BFF; border-left-color: var(--input-button-background-color); }
.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(118, 107, 255, 0.8); }
    .nm-battle-row-active.nm-battle-row-your-round .nm-battle-row-status { color: #766BFF; color: var(--input-button-background-color); font-weight: 700; opacity: 1; }
.nm-battle-row-active.nm-battle-row-waiting { opacity: 0.9; }

/* A battle you won: gold border and tint, undimmed, with a star beside "You won". */
.nm-battle-row-finished.nm-battle-row-won { opacity: 1; border-left-width: 6px; border-left-color: #2E9E5B; background-color: rgba(46, 158, 91, 0.8); }
    .nm-battle-row-won .nm-battle-row-status { font-weight: 700; }
    .nm-battle-row-star { display: inline-block; vertical-align: -4px; width: 18px; height: 18px; margin-right: 4px; line-height: 0; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25)); animation: nmBattleStarIn .5s ease-out; }
        .nm-battle-row-star svg { width: 100%; height: 100%; fill: #F2B705; }

/* A battle you lost: a muted red edge and tint with a small cross beside the result - quieter than a
   win, and the row keeps the slight dimming every finished battle has. */
.nm-battle-row-finished.nm-battle-row-lost { border-left-color: #D9534F; background-color: rgba(217, 83, 79, 0.8); }
    .nm-battle-row-loss-icon { display: inline-block; vertical-align: -3px; width: 16px; height: 16px; margin-right: 5px; line-height: 0; }
        .nm-battle-row-loss-icon svg { width: 100%; height: 100%; }
            .nm-battle-row-loss-icon circle { fill: #D9534F; }
            .nm-battle-row-loss-icon path { stroke: #FFF; stroke-width: 2.4; stroke-linecap: round; fill: none; }

@keyframes nmBattleStarIn {
    0% { transform: scale(0) rotate(-45deg); }
    70% { transform: scale(1.2) rotate(8deg); }
    100% { transform: scale(1) rotate(0); }
}

.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: #766BFF; background: var(--input-button-background-color); color: #FFF; color: var(--input-button-text-color); 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: var(--section-background-color); 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); }
/* The middle column between the two .nm-battle-side avatars - battleRoundLabel used to carry the
   width/float itself, but renderBattleUI overwrites its innerHTML directly (see numbersMatchup.js), so
   battleRoundHistory now nests inside this wrapper alongside it instead of inside battleRoundLabel,
   which would otherwise wipe it out on every render. */
#battleRoundColumn { width: 36%; float: left; }
#battleRoundLabel { 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. Nested inside
   #battleRoundColumn, below battleRoundLabel, so no clear:both here anymore - there's nothing floated
   inside that column left to clear. */
#battleRoundHistory { 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) {
    #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, .nm-battle-row-star { animation: none; }
}

/* ---- Daily replay calendar -------------------------------------------------------------------------
   A regular Sunday-through-Saturday grid, same as Word Snaps' (see SecretWord.css) - dayOfWeek comes
   straight from the server (GetNumbersMatchupDailyCalendar), so no client-side date math is needed to
   line a date up under its column the way Word Snaps' swDayOfWeek has to. */
#dailyCalendarHolder { display: block; clear: both; margin-top: 18px; padding-top: 14px; border-top: 1px solid #EEE; border-top: 1px solid var(--menu-bar-border-color); }
#dailyCalendarHeader { display: block; clear: both; }
    #dailyCalendarTitle { float: left; font-weight: 600; font-size: 14px; line-height: 24px; }

#dailyCalendarBody { display: block; clear: both; border: 1px solid var(--section-border-color); background: var(--sidebar-background-color); border-radius: 15px; padding: 10px; margin-top: 10px; }
/* Fixed 7 columns, not auto-fill - a regular calendar always reads Sunday through Saturday left to
   right regardless of how narrow the screen is; cells shrink to fit rather than wrapping to a
   different column count. */
#dailyCalendarWeekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 8px; text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 0.3px; text-transform: uppercase; opacity: 0.55; }
#dailyCalendarGrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
#dailyCalendarHint { font-size: 12px; opacity: 0.7; margin-top: 10px; line-height: 1.5; }

/* aspect-ratio, not a fixed height - the grid's column width is fluid (1fr, 7 columns), so a fixed
   height only stayed square at whatever width happened to make 52px square. This keeps every cell
   square at any width instead, mobile included, which is also why the max-width:550px block below no
   longer needs its own override. */
.nm-cal-day { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; user-select: none; aspect-ratio: 1; border-radius: 10px; box-sizing: border-box; border: 1px solid #DEDEDE; border: 1px solid var(--home-news-item-border-bottom-color); background-color: var(--formcontrol-background); transition: all .15s ease-in-out; }
    .nm-cal-day:hover { background-color: rgba(118, 107, 255, 0.1); }
    .nm-cal-day:active { transform: scale(0.97); }
    .nm-cal-day:focus-visible { outline: 2px solid var(--input-button-background-color); outline-offset: 1px; }
    .nm-cal-num { font-size: 18px; font-weight: 700; line-height: 1.1; }
    /* The score on a played day, the month on an unplayed one - tabular so a column of scores lines up. */
    .nm-cal-sub { font-size: 14px; opacity: 0.65; line-height: 1.3; font-variant-numeric: tabular-nums; }

    /* Played is a filled state, cleared adds the accent - so "done" and "done perfectly" are distinct
       at a glance without relying on colour alone (the fill weight differs too). */
    .nm-cal-day.is-played { background-color: rgba(118, 107, 255, 0.09); border-color: rgba(118, 107, 255, 0.35); }
    .nm-cal-day.is-cleared { background-color: rgba(76, 175, 80, 0.14); border-color: rgba(76, 175, 80, 0.5); }
    .nm-cal-day.is-today .nm-cal-num { color: #766BFF; color: var(--input-button-background-color); }
    .nm-cal-day.is-today::after { content: ""; position: absolute; bottom: 5px; width: 4px; height: 4px; border-radius: 50%; background-color: #766BFF; background-color: var(--input-button-background-color); }
    .nm-cal-day.is-selected { border-width: 2px; border-color: #766BFF; border-color: var(--input-button-background-color); }
    /* The padding cells before the earliest day and after the latest one, lining both up under their
       real weekday - same idea as the blank squares before the 1st on a paper calendar. Not just
       display:none: the grid still needs them present to hold their column position. */
    .nm-cal-day.nm-cal-day-empty { cursor: default; pointer-events: none; border-color: transparent; background-color: transparent; }

/* Marks a score that was set after its day had passed - see _NumberMatchupDailyLeaderboard.cshtml. */
/* Overall Daily board (_NumberMatchupDailyOverallLeaderboard) - the day the all-time best was set, as a
   small line under the player's name. */
.nm-overall-best-date { display: block; font-size: 11px; font-weight: normal; opacity: 0.6; margin-top: 2px; }
.nm-replay-tag { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 9px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; opacity: 0.75; background-color: rgba(0, 0, 0, 0.08); }
.nm-daily-leaderboard-date { font-size: 12.5px; opacity: 0.75; margin-bottom: 10px; }

@media screen and (max-width: 575px) {
    #dailyCalendarWeekdays, #dailyCalendarGrid { gap: 6px; }
    #dailyCalendarWeekdays { font-size: 9px; }
    .nm-cal-num { font-size: 14px; }
    .nm-cal-sub { font-size: 11px; }
}

@media screen and (max-width: 400px) {
    /* 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; }
        .nm-battle-row-actions .nm-battle-action { margin-left: 0; }
}

/* ---- Battle setup ----
   The panel that replaces the three new-battle buttons while a battle is being set up - same dashed
   outline and layout as Word Snaps' #secretWordVersusSetupPanel. The format and round count are radio
   groups drawn as pills: the input stays in the DOM (keyboard and screen readers get a real radio
   group) but is visually hidden, and the pill shows its checked/focus state. */
#battleSetupPanel { clear: both; margin-bottom: 16px; padding: 14px 16px; border-radius: 10px; border: 1px dashed #766BFF; border: 1px dashed var(--numbers-matchup-matchphrase-color); background-color: rgba(118, 107, 255, 0.05); }
#battleSetupTitle { font-size: 13px; font-weight: bold; opacity: 0.8; margin-bottom: 10px; }
.nm-battle-setup-row { margin-bottom: 12px; }
.nm-battle-setup-label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.nm-battle-setup-choices { display: flex; flex-wrap: wrap; gap: 8px; }
.nm-battle-setup-choice { position: relative; cursor: pointer; user-select: none; margin: 0; }
    .nm-battle-setup-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
    .nm-battle-setup-choice span { display: inline-block; padding: 7px 16px; border-radius: 18px; font-size: 13px; font-weight: 600; border: 1.5px solid #766BFF; border: 1.5px solid var(--input-button-background-color); color: #766BFF; color: var(--input-button-background-color); transition: background-color .15s ease-in-out, color .15s ease-in-out; }
    .nm-battle-setup-choice:hover span { background-color: rgba(118, 107, 255, 0.1); }
    .nm-battle-setup-choice input:checked + span { background: #766BFF; background: var(--input-button-background-color); color: #FFF; color: var(--input-button-text-color); }
    .nm-battle-setup-choice input:focus-visible + span { outline: 2px solid #766BFF; outline: 2px solid var(--input-button-background-color); outline-offset: 2px; }
    .nm-battle-setup-choice-round span { min-width: 44px; padding-left: 0; padding-right: 0; text-align: center; font-variant-numeric: tabular-nums; }
.nm-battle-setup-hint { font-size: 12px; opacity: 0.75; line-height: 1.5; }
#battleSetupPanel #battleOpponentSearchWrapper { margin-bottom: 0; }
#battleSetupActions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
    #battleSetupActions .nm-battle-new-btn { flex: 1 1 120px; padding: 10px 18px; }
.nm-battle-setup-cancel-btn { border-color: transparent !important; color: inherit !important; opacity: 0.7; }
    .nm-battle-setup-cancel-btn:hover { opacity: 1; background-color: rgba(128, 128, 128, 0.12) !important; }

/* The battle's format under "Round 2 of 5" in the scoreboard. */
.nm-battle-format-label { display: block; margin-top: 2px; font-size: 11px; font-weight: 600; opacity: 0.7; }

@media (prefers-reduced-motion: reduce) {
    .nm-battle-setup-choice span { transition: none; }
}

/* Icons on the new-battle buttons - drawn as a mask on ::before rather than put in the markup,
   since updateBattleNewMatchButtons/copyBattleInviteLink rewrite the labels with textContent. The mask
   is filled with currentColor, so the icon follows the button's colour in both themes. */
#battleNewMatchButtons .nm-battle-new-btn::before { content: ""; display: inline-block; width: 18px; height: 18px; margin-right: 8px; vertical-align: -4px; background-color: currentColor; -webkit-mask: var(--challenge-btn-icon) center / contain no-repeat; mask: var(--challenge-btn-icon) center / contain no-repeat; transition: transform .2s ease-in-out; }
    #battleNewMatchButtons .nm-battle-new-btn:hover::before { transform: rotate(-10deg) scale(1.12); }
#battleChallengeFriendBtn { --challenge-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 20v-1.5a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4V20'/%3E%3Ccircle cx='8.5' cy='7.5' r='3.5'/%3E%3Cpath d='M19 8v6M16 11h6'/%3E%3C/svg%3E"); }
#battleLinkInviteBtn { --challenge-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 13.5a4.5 4.5 0 0 0 6.4 0l3-3a4.5 4.5 0 0 0-6.4-6.4l-1.2 1.2'/%3E%3Cpath d='M14 10.5a4.5 4.5 0 0 0-6.4 0l-3 3a4.5 4.5 0 0 0 6.4 6.4l1.2-1.2'/%3E%3C/svg%3E"); }
#battleRandomBtn { --challenge-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='4'/%3E%3Ccircle cx='8' cy='8' r='1.6' fill='black' stroke='none'/%3E%3Ccircle cx='12' cy='12' r='1.6' fill='black' stroke='none'/%3E%3Ccircle cx='16' cy='16' r='1.6' fill='black' stroke='none'/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion: reduce) {
    #battleNewMatchButtons .nm-battle-new-btn::before { transition: none; }
    #battleNewMatchButtons .nm-battle-new-btn:hover::before { transform: none; }
}
/* Game portal mode (CrazyGames): Battle is hidden there, so the mode switch has two tabs, not three. */
body[data-portal] #numbersMatchupModeHolder .nm-mode-option { width: 50%; }
body[data-portal] #numbersMatchupModeIndicator { width: calc(50% - 4px); }
body[data-portal] .nm-portal-offer { display: inline-flex; flex-wrap: wrap; gap: 8px; margin-left: 8px; vertical-align: middle; }
    body[data-portal] .nm-portal-offer button { cursor: pointer; padding: 5px 14px; font-family: inherit; font-size: 13px; font-weight: 600; border-radius: 16px; border: 1px solid #766BFF; border: 1px solid var(--input-button-background-color); background: #766BFF; background: var(--input-button-background-color); color: #FFF; color: var(--input-button-text-color); }
    body[data-portal] .nm-portal-offer button + button { background: transparent; color: #766BFF; color: var(--input-button-background-color); }
    body[data-portal] .nm-portal-offer button:disabled { opacity: 0.6; cursor: default; }

/* Jump-to-calendar button, same look as Word Snaps' #secretWordJumpToCalendarBtn. Centered between
   #totalPoints and #dailyHighScore; #main-game-holder is its positioning context. */
#main-game-holder { position: relative; }
#numbersMatchupJumpToCalendarBtn { position: absolute; left: 50%; top: 4px; transform: translateX(-50%); z-index: 1; cursor: pointer; user-select: none; background-image: url(../../Assets/Games/Images/calendar-btn.png); background-position: center center; background-repeat: no-repeat; background-size: 40px; width: 40px; height: 40px; transition: transform .2s ease-in-out; }
    #numbersMatchupJumpToCalendarBtn:hover { transform: translateX(-50%) scale(1.1); }
    #numbersMatchupJumpToCalendarBtn:active { transform: translateX(-50%) scale(0.95); }

/* Board colors toggle - portal mode only, standing in for the header's Board Theme dropdown. Same pill
   as #muteBtn, sitting just left of it. */
#boardThemeBtn { float: right; cursor: pointer; display: inline-block; user-select: none; line-height: 18px; color: #34363E; color: var(--body-text-color); padding: 5px 10px; margin-right: 3px; margin-left: 3px; font-size: 14px; border-radius: 20px; background-color: transparent; transition: all .2s ease-in-out; }
    #boardThemeBtn::before { content: "\25D0"; display: inline-block; margin-right: 4px; margin-top: -3px; font-size: 14px; vertical-align: middle; }
    #boardThemeBtn:hover, #boardThemeBtn:focus-visible { 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; }
    #boardThemeBtn:active { transform: scale(0.9); }

/* Portal account picture (CrazyGames) in front of the guest name line. */
.guest-user-avatar { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin: -2px 6px 0 0; }