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

/* ---- Word Snaps background ------------------------------------------------------------------------
   Built in CSS rather than pointing at a jpg. The previous rule referenced
   Assets/Games/Images/secretword-bg.jpg, which exists on disk but was never added to Booster.Web.csproj,
   so it has never deployed - in production that url() 404s and the rule's "animation: none !important"
   also switched off the site's drifting gradient, leaving a flat colour. Hence "bland".

   Every layer is rgba over the theme's own --body-background, so light and dark both work from one
   definition with no second rule and no jpg to ship. The colours are the game's own rank bands (see
   getRankBandClass in secretWord.js and the #secretWordGuessToast rules below) - solved purple, hot
   green, warm amber, cool blue - so the page sits inside the same hot/cold language the guesses use,
   rather than introducing an unrelated palette.

   The last layer is concentric rings rather than the square grid Number Connect uses. Number Connect's
   board IS a grid, so squares mean something there; Word Snaps has no grid at all - it's a ranked list,
   and the entire mechanic is how CLOSE a guess sits to the target word. Rings radiating from a single
   point say that directly: every ring is a distance from the answer, which is exactly what a rank is.
   Same line weight, spacing and alpha as Number Connect's grid, so the two still read as one family
   with each motif meaning something for its own game.
   Strength is judged against the content cards rather than in isolation: .section-item is only 80%
   opaque and carries backdrop-filter: blur(15px), so everything here is already cut to roughly a fifth
   and softened wherever it sits behind text - the alphas look high written down and land much lower on
   screen. background-attachment: fixed keeps all of it still while the guess list scrolls. ---- */
.body-background.custom-background {
    background-color: var(--body-background);
    background-image:
        radial-gradient(ellipse 60% 55% at 12% 8%, rgba(118, 107, 255, 0.38) 0%, rgba(118, 107, 255, 0.16) 38%, transparent 72%),
        radial-gradient(ellipse 50% 45% at 88% 18%, rgba(52, 199, 123, 0.30) 0%, rgba(52, 199, 123, 0.12) 40%, transparent 70%),
        radial-gradient(ellipse 55% 50% at 82% 88%, rgba(92, 163, 224, 0.32) 0%, rgba(92, 163, 224, 0.13) 38%, transparent 72%),
        radial-gradient(ellipse 45% 40% at 18% 82%, rgba(240, 185, 77, 0.26) 0%, rgba(240, 185, 77, 0.10) 40%, transparent 70%),
        repeating-radial-gradient(circle at 50% 34%, 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, no-repeat;
    background-size: 170% 170%, 170% 170%, 170% 170%, 170% 170%, auto;
    background-attachment: fixed;
    animation: wordSnapsBackgroundDrift 26s ease-in-out infinite;
}

/* Slower and gentler than the site's 22s bodyBackgroundDrift, and only the four glow layers move - the
   two grid layers are pinned, since a drifting grid is far more noticeable than a drifting blur and
   would pull the eye away from the guess list. */
@keyframes wordSnapsBackgroundDrift {
    0%   { background-position: 0% 0%, 100% 0%, 100% 100%, 0% 100%, 0 0; }
    50%  { background-position: 22% 14%, 78% 12%, 76% 86%, 20% 88%, 0 0; }
    100% { background-position: 0% 0%, 100% 0%, 100% 100%, 0% 100%, 0 0; }
}

@media (prefers-reduced-motion: reduce) {
    .body-background.custom-background { animation: none; }
}

#main-container .section-item { overflow: visible !important; }
    #main-container .section-item::before { display: none !important; }

.secret-word-filter-holder { float: right; }
    .secret-word-filter-holder label { display: block; clear: both; text-align: right; margin-bottom: 4px; font-size: 12px; font-weight: bold; }

.sw-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; }
    .sw-personal-stats .sw-stat { display: flex; flex-direction: column; }
    .sw-personal-stats .sw-stat-label { font-size: 10px; font-weight: 600; opacity: 0.55; text-transform: uppercase; letter-spacing: 0.4px; }
    .sw-personal-stats .sw-stat-value { font-size: 18px; font-weight: 700; margin-top: 2px; color: #766BFF; color: var(--input-button-background-color); }
    /* "days" / "of 11" sit next to the number rather than competing with it - they're units, not values. */
    .sw-personal-stats .sw-stat-suffix { font-size: 11px; font-weight: 600; opacity: 0.6; }
/* Explains what the ranking means before the table, since ordering by fewest guesses puts the smallest
   number on top - the reverse of what a score column normally implies. */
.sw-leaderboard-caption { font-size: 12.5px; opacity: 0.7; line-height: 1.5; margin-top: 6px; max-width: 60ch; }
/* A dash in the Today column means "hasn't solved today", which is the common case on any given day -
   dimmed so a column full of them doesn't read as noise competing with the real numbers. */
.user-score.sw-not-today { opacity: 0.35; }
/* The viewer's own row, so they can find themselves without reading every name. */
tr.sw-your-row > td { background-color: rgba(118, 107, 255, 0.09); }
    tr.sw-your-row .user-score-name { font-weight: 700; }

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

#secretWordSolvedBanner { display: block; clear: both; text-align: center; padding: 14px 20px; margin-bottom: 14px; font-size: 16px; font-weight: 600; border-radius: 8px; color: #766BFF; color: var(--numbers-matchup-matchphrase-color); background-color: rgba(118, 107, 255, 0.1); }
    #secretWordShareBtn { display: inline-block; cursor: pointer; user-select: none; margin-top: 10px; padding: 8px 20px; font-size: 13px; font-weight: 600; border-radius: 16px; background: #766BFF; background: var(--input-button-background-color); color: #FFF; color: var(--input-button-text-color); transition: all .2s ease-in-out; }
        #secretWordShareBtn:hover { background-color: #4D5577; background-color: var(--input-button-hover-background-color); }
        #secretWordShareBtn:active { transform: scale(0.95); }
        #secretWordShareBtn::before { float: left; content: ""; background-image: url(../../Assets/icons/formfield-sprite.png); background-repeat: no-repeat; background-position: -442px 1px; width: 20px; height: 20px; margin-top: -2px; margin-right: 2px; filter: var(--menu-bar-image-filter); }
    #secretWordRevealedWord { text-transform: capitalize; }

#getRelatedWordsHelp-modal ol { margin-left: 25px; }
    #getRelatedWordsHelp-modal ol li { padding: 3px 5px; clear: both; font-size: 17px; }

/* Rank feedback toast shown right after clicking Guess - band-colored the same way as the guess list
   rows/badges (see getRankBandClass in secretWord.js) for a consistent hot/cold visual language. */
#secretWordGuessToast { position: fixed; top: -140px; left: 50%; transform: translateX(-50%); z-index: 950; color: #FFF; 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; pointer-events: none; transition: top 0.45s cubic-bezier(0.34, 1.56, 0.64, 1); background: linear-gradient(135deg, #9AA0A6 0%, #767B80 100%); }
    #secretWordGuessToast.visible { top: 75px; }
    #secretWordGuessToast.band-hot { background: linear-gradient(135deg, #34C77B 0%, #1F8C52 100%); }
    #secretWordGuessToast.band-warm { background: linear-gradient(135deg, #F0B94D 0%, #D08A1F 100%); }
    #secretWordGuessToast.band-cool { background: linear-gradient(135deg, #5CA3E0 0%, #3468A0 100%); }
    #secretWordGuessToast.band-cold { background: linear-gradient(135deg, #9AA0A6 0%, #767B80 100%); }
    #secretWordGuessToast.band-solved { background: linear-gradient(135deg, #9C8FFF 0%, #766BFF 100%); }
#secretWordGuessToastTitle { font-size: 19px; font-weight: 700; text-transform: capitalize; }
#secretWordGuessToastSub { font-size: 14px; margin-top: 4px; opacity: 0.9; }

#secretWordGuessToastSmall { display: block; clear: both; text-align: center; display: block; font-size: 12px; opacity: 0.65; min-height: 15px; margin-bottom: 5px; }

#secretWordInputHolder { display: flex; clear: both; gap: 8px; margin-bottom: 5px; }
    #secretWordInputWrapper { position: relative; flex: 1 1 auto; }
    #secretWordGuessInput { width: 100%; box-sizing: border-box; font-size: 15px; }
    /* Circular icon button instead of a text label - arrow drawn with CSS borders (no font/emoji
       dependency), rotated to point right. */
    #secretWordGuessSubmit { flex: 0 0 auto; position: relative; width: 40px; height: 40px; padding: 0; cursor: pointer; border-radius: 50%; border: none; background: #766BFF; background: var(--input-button-background-color); transition: all .2s ease-in-out; }
        #secretWordGuessSubmit::before { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; margin: -6px 0 0 -8px; border-top: 2.5px solid #FFF; border-top-color: var(--input-button-text-color); border-right: 2.5px solid #FFF; border-right-color: var(--input-button-text-color); transform: rotate(45deg); }
        #secretWordGuessSubmit:hover { background-color: #4D5577; background-color: var(--input-button-hover-background-color); }
        #secretWordGuessSubmit:active { transform: scale(0.9); }
        #secretWordGuessSubmit:disabled { opacity: 0.5; cursor: default; }

#secretWordSuggestions { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20; max-height: 260px; 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); }
    .secret-word-suggestion-item { padding: 9px 14px; font-size: 14px; cursor: pointer; user-select: none; }
        .secret-word-suggestion-item:hover, .secret-word-suggestion-item.secret-word-suggestion-highlighted { background-color: rgba(118, 107, 255, 0.12); }
        .secret-word-suggestion-item.secret-word-versus-opponent-result { display: flex; align-items: center; }
            .secret-word-suggestion-item.secret-word-versus-opponent-result .secret-word-versus-avatar { width: 24px; height: 24px; margin-top: 0; margin-right: 8px; flex: 0 0 auto; }

/* Daily Challenge (ranked) vs. Casual (unranked, cycle-whenever) mode toggle - a sliding-pill segmented
   control rather than two separate buttons: #secretWordModeIndicator is an absolutely-positioned pill
   that animates between the two option slots (see secret-word-mode-casual-active below, toggled by
   updateModeUI in secretWord.js), with the option labels sitting above it. */
#secretWordModeHolder { 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); }
    #secretWordModeIndicator { 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); }
    #secretWordModeHolder.secret-word-mode-casual-active #secretWordModeIndicator { transform: translateX(0%); }
    #secretWordModeHolder.secret-word-mode-daily-active #secretWordModeIndicator { transform: translateX(101%); }
    #secretWordModeHolder.secret-word-mode-versus-active #secretWordModeIndicator { transform: translateX(201%); }
    .secret-word-mode-option { display: inline-block; width: 33.33%; 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; flex: 1 1 auto; 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; }
        .secret-word-mode-option:hover:not(.secret-word-mode-active) { opacity: 0.85; }
        .secret-word-mode-option:active { transform: scale(0.96); }
        .secret-word-mode-option.secret-word-mode-active { opacity: 1; color: #FFF; color: var(--input-button-text-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); }
        .secret-word-mode-option img { height: 20px; display: inline-block; margin-right: 5px; position: relative; bottom: -5px; margin-top: -8px; }

    /* Small badge glyph before each label - same "plain text, not an image" approach as Number
       Connect's own mode tabs (numbersMatchup.css) so it always inherits the option's own
       currentColor/opacity for free, active or not, light or dark theme. */
    .secret-word-mode-option::before { display: inline-block; margin-right: 5px; font-weight: 800; vertical-align: 1px; }
        .secret-word-mode-option[data-mode="casual"]::before { content: ""; display: inline-block; position: relative; bottom: -5px; margin-top: -8px; width: 20px; height: 20px; background-image: url(../../Assets/Games/Images/casual.png); background-position: center center; background-size: 20px 20px; background-repeat: no-repeat; }
        .secret-word-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; }
/*    .secret-word-mode-option[data-mode="casual"]::before { content: "Aa"; font-size: 11px; }*/
        .secret-word-mode-option[data-mode="versus"]::before { content: ""; display: inline-block; position: relative; bottom: -5px; margin-top: -8px; width: 20px; height: 20px; background-image: url(../../Assets/Games/Images/versus.png); background-position: center center; background-size: 20px 20px; background-repeat: no-repeat; }
        .secret-word-mode-option[data-mode="casual"].secret-word-mode-active::before, .secret-word-mode-option[data-mode="versus"].secret-word-mode-active::before, body[data-theme="Dark"] .secret-word-mode-option[data-mode="versus"]::before { filter: none !important; /*grayscale(1) invert(1) brightness(100)*/ }

/* Casual mode's own controls (New Word + note), shown instead of #secretWordTopStats since a
   leaderboard/rank box doesn't apply there. */
#secretWordCasualControls { display: block; clear: both; margin-bottom: 10px; }
    .secret-word-casual-note { display: block; float: left; font-size: 12px; opacity: 0.65; margin-top: 6px; }
    .secret-word-casual-difficulty-badge[data-difficulty="Easy"] { display: none; float: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; margin: 6px 0 0 8px; padding: 2px 9px; border-radius: 10px; background: #34AF00; background: var(--difficulty-input-easy-background-color); color: #FFF; color: var(--difficulty-input-easy-text-color); }
    .secret-word-casual-difficulty-badge[data-difficulty="Hard"] { display: none; float: left; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; margin: 6px 0 0 8px; padding: 2px 9px; border-radius: 10px; background: #C11515; background: var(--difficulty-input-hard-background-color); color: #FFF; color: var(--difficulty-input-hard-text-color); }
    .secret-word-casual-guess-count { display: block; float: left; font-size: 12px; font-weight: 600; opacity: 0.7; margin: 7px 0 0 10px; }
    #secretWordRevealBtn { cursor: pointer; user-select: none; float: right; margin-right: 8px; padding: 6px 14px; border-radius: 16px; font-size: 13px; font-weight: 600; color: #766BFF; color: var(--input-button-background-color); border: 1px solid #766BFF; border: 1px solid var(--input-button-background-color); background: transparent; transition: all .2s ease-in-out; }
        #secretWordRevealBtn:hover { background-color: rgba(118, 107, 255, 0.1); background-color: var(--link-hover-background-color); }
        #secretWordRevealBtn:active { transform: scale(0.95); }
    #secretWordNewWordBtn { cursor: pointer; user-select: none; float: right; padding: 6px 16px; border-radius: 16px; font-size: 13px; font-weight: 600; background: #766BFF; background: var(--input-button-background-color); color: #FFF; color: var(--input-button-text-color); transition: all .2s ease-in-out; }
        #secretWordNewWordBtn:hover { background-color: #4D5577; background-color: var(--input-button-hover-background-color); }
        #secretWordNewWordBtn:active { transform: scale(0.95); }

#secretWordCasualStartPrompt { display: block; clear: both; text-align: center; padding: 20px; margin-bottom: 10px; border-radius: 8px; background-color: rgba(118, 107, 255, 0.05); }
    #secretWordCasualStartPrompt p { font-size: 14px; opacity: 0.8; margin: 0 0 12px; }
    #secretWordCasualStartBtn { cursor: pointer; padding: 10px 24px; font-size: 15px; font-weight: 600; border-radius: 20px; border: none; background: #766BFF; background: var(--input-button-background-color); color: #FFF; color: var(--input-button-text-color); transition: all .2s ease-in-out; }
        #secretWordCasualStartBtn:hover { background-color: #4D5577; background-color: var(--input-button-hover-background-color); }
        #secretWordCasualStartBtn:active { transform: scale(0.95); }

/* Top stats row, mirroring Number Connect's #totalPoints (left) / #highScore (right) layout. */
#secretWordYesterdayNote { display: block; clear: both; font-size: 12px; opacity: 1; margin-bottom: 10px; }
    #secretWordYesterdayNote strong { text-transform: capitalize; opacity: 1; }

#secretWordTopStats { display: block; clear: both; margin-bottom: 10px; }
#secretWordGuessCountHolder { float: left; display: block; padding-bottom: 3px; font-size: 18px; text-align: center; color: #766BFF; color: var(--numbers-matchup-totalpoints-color); }
    #secretWordGuessCountHolder::before { content: "Guesses"; display: block; clear: both; margin-bottom: 0; opacity: 1; font-size: 11px; font-weight: normal; }
    #secretWordGuessCountHolder .points { display: inline-block; }
#secretWordTopScore { float: right; display: block; padding-bottom: 3px; font-size: 18px; text-align: center; cursor: pointer; }
    #secretWordTopScore::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; }
    #secretWordTopScore .points { display: inline-block; }
#secretWordTopScoreSub { display: block; clear: both; font-size: 11px; opacity: 1; font-weight: normal; margin-top: 1px; }
#secretWordHighScoresBtnTop { display: block; clear: both; font-size: 12px; margin-top: 2px; opacity: 0.85; text-decoration: underline; }
    #secretWordTopScore:hover #secretWordHighScoresBtnTop { opacity: 1; }
#secretWordHighScoresHolder table.user-score-table .user-score-small { display: none; }

/* Countdown to the next Daily Challenge word (server-time midnight) - ticks down locally in
   secretWord.js's startDailyCountdown, same convention as the Question of the Day timer. Sits as a
   small sub-line under the guess count (mirroring #secretWordTopScoreSub on the other side) instead of
   its own full-width row, so it doesn't push the guess input further down the page. */
#secretWordDailyCountdown { display: block; clear: both; text-align: left; margin-top: 1px; font-size: 13px; font-variant-numeric: tabular-nums; opacity: 0.65; white-space: nowrap; }
    .secret-word-countdown-label { font-weight: 600; margin-right: 4px; opacity: 1; }
    #secretWordDailyCountdown .hours, #secretWordDailyCountdown .minutes, #secretWordDailyCountdown .seconds { font-weight: 700; }

#secretWordDifficultyHolder { display: block; align-items: center; clear: both; gap: 6px; margin-bottom: 10px; font-size: 13px; }
    .secret-word-difficulty-label { font-weight: 600; opacity: 0.75; margin-right: 5px; }
    .secret-word-difficulty-option { cursor: pointer; user-select: none; padding: 4px 14px; margin-right: 5px; border-radius: 14px; border: 1px solid #DDD; border: 1px solid var(--top-search-border-color); background: transparent; transition: all .2s ease-in-out; }
        .secret-word-difficulty-option:hover { background-color: rgba(0, 0, 0, 0.06); background-color: var(--link-hover-background-color); }
        .secret-word-difficulty-option.secret-word-difficulty-active[data-difficulty="Easy"] { background: #30A000; background: var(--difficulty-input-easy-background-color); border-color: #34AF00; border-color: var(--difficulty-input-easy-border-color); color: #FFF; color: var(--difficulty-input-easy-text-color); font-weight: 600; }
        .secret-word-difficulty-option.secret-word-difficulty-active[data-difficulty="Hard"] { background: #30A000; background: var(--difficulty-input-hard-background-color); border-color: #34AF00; border-color: var(--difficulty-input-hard-border-color); color: #FFF; color: var(--difficulty-input-hard-text-color); font-weight: 600; }    
        .secret-word-difficulty-hint-note { margin-top: 10px; margin-left: 4px; font-size: 11px; opacity: 0.8; display: block; clear: both; }

/* Hints list - visually distinct from the guess list (dashed border, lightbulb marker) since these
   weren't guessed by the player, just auto-revealed every HintIntervalGuesses guesses in Easy mode. */
#secretWordHintsHolder { display: block; clear: both; margin-bottom: 14px; padding: 10px 14px; border-radius: 8px; border: 1px dashed #766BFF; border: 1px dashed var(--numbers-matchup-matchphrase-color); background-color: rgba(118, 107, 255, 0.05); }
.secret-word-hints-title { position: relative; font-size: 12px; font-weight: bold; opacity: 0.75; margin-bottom: 6px; padding-right: 20px; }
    .secret-word-hints-title::before { content: "\1F4A1  "; }
    /* Compact chevron toggle, sized for this small header - not the sitewide 32px .minimize-tab-toggle
       used on full section title bars, which would dwarf this row. */
    #secretWordHintsMinimizeToggle { cursor: pointer; position: absolute; top: 50%; right: 0; width: 16px; height: 16px; margin-top: -9px; }
        #secretWordHintsMinimizeToggle::before { content: ""; position: absolute; top: 3px; left: 4px; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s ease-in-out; }
        #secretWordHintsMinimizeToggle.minimized::before { top: 5px; transform: rotate(-135deg); }
        #secretWordHintsMinimizeToggle.minimize-tab-toggle::after { display: none !important; }
#secretWordHintsList .secret-word-guess-row { margin-bottom: 4px; }
    #secretWordHintsList .secret-word-guess-row:last-child { margin-bottom: 0; }

#secretWordGuessListHeader { display: flex; clear: both; padding: 4px 0px 4px 0px; font-size: 12px; font-weight: bold; opacity: 0.6; }
    #secretWordGuessListHeader .secret-word-col-word { flex: 1 1 auto; }
    #secretWordGuessListHeader .secret-word-col-rank { flex: 0 0 90px; text-align: right; }

#secretWordGuessList { display: block; clear: both; }
.secret-word-guess-row { position: relative; overflow: hidden; display: flex; align-items: center; padding: 9px 14px; margin-bottom: 6px; 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; transition: transform .15s ease-in-out; }
    .secret-word-guess-row .secret-word-col-word { position: relative; z-index: 1; flex: 1 1 auto; font-weight: 600; text-transform: capitalize; }
    .secret-word-guess-row .secret-word-col-rank { position: relative; z-index: 1; /*flex: 0 0 90px;*/ text-align: right; }

/* The fill bar behind the row's text is the closeness visualization - width set inline per-row in
   secretWord.js (getRankFillPercent), fuller/wider for a closer guess. Sits at z-index 0, underneath
   the word/rank text above, and is clipped to the row's rounded corners via overflow: hidden above. */
.secret-word-row-fill { position: absolute; top: 0; left: 0; bottom: 0; z-index: 0; transition: width .3s ease-out; }

.secret-word-rank-badge { display: inline-block; padding: 3px 12px; border-radius: 12px; font-size: 13px; font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* Rank "hot/cold" bands - purely a friendlier visualization of the same rank number already shown,
   scaled to this secret word's vocabulary size (see getRankBandClass in secretWord.js), not a new hint. */
.secret-word-guess-row.band-hot { border-left-color: #2E9E5B; }
    .secret-word-guess-row.band-hot .secret-word-row-fill { background-color: rgba(46, 158, 91, 0.18); }
    .secret-word-guess-row.band-hot .secret-word-rank-badge { background-color: rgba(46, 158, 91, 0.22); color: #2E9E5B; }
.secret-word-guess-row.band-warm { border-left-color: #D99A2B; }
    .secret-word-guess-row.band-warm .secret-word-row-fill { background-color: rgba(217, 154, 43, 0.18); }
    .secret-word-guess-row.band-warm .secret-word-rank-badge { background-color: rgba(217, 154, 43, 0.22); color: #D99A2B; }
.secret-word-guess-row.band-cool { border-left-color: #3D84C6; }
    .secret-word-guess-row.band-cool .secret-word-row-fill { background-color: rgba(61, 132, 198, 0.16); }
    .secret-word-guess-row.band-cool .secret-word-rank-badge { background-color: rgba(61, 132, 198, 0.2); color: #3D84C6; }
.secret-word-guess-row.band-cold { border-left-color: #9AA0A6; opacity: 0.85; }
    .secret-word-guess-row.band-cold .secret-word-row-fill { background-color: rgba(154, 160, 166, 0.16); }
    .secret-word-guess-row.band-cold .secret-word-rank-badge { background-color: rgba(154, 160, 166, 0.2); color: #767B80; }
.secret-word-guess-row.band-solved { border-left-color: #766BFF; border-left-color: var(--numbers-matchup-matchphrase-color); }
    .secret-word-guess-row.band-solved .secret-word-row-fill { background-color: rgba(118, 107, 255, 0.2); }
    .secret-word-guess-row.band-solved .secret-word-rank-badge { background-color: rgba(118, 107, 255, 0.24); color: #766BFF; color: var(--numbers-matchup-matchphrase-color); }

.secret-word-guess-row.secret-word-guess-best { box-shadow: 0 0 0 1px #766BFF inset; box-shadow: 0 0 0 1px var(--numbers-matchup-matchphrase-color) inset; }
.secret-word-guess-row.secret-word-guess-solved { background-color: rgba(118, 107, 255, 0.08); }

.secret-word-guess-row.secret-word-guess-newest { animation: secretWordNewestPulse 1s ease-out; }
@keyframes secretWordNewestPulse {
    0% { transform: scale(1.03); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18); }
    100% { transform: scale(1); box-shadow: none; }
}

/* Versus mode - a list of open matches (challenges sent/received, queued random searches, active
   games), each opened individually into the live match panel (turn indicator + two side-by-side guess
   columns). Reuses .secret-word-guess-row/-rank-badge/-row-fill from the shared guess-row renderer, so a
   versus guess looks identical to a solo one. */
.secret-word-versus-intro { font-size: 13px; opacity: 0.75; margin: 0 0 14px; line-height: 1.6; }

#secretWordVersusLeaderboardBtn { 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; }
    #secretWordVersusLeaderboardBtn::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; }
    #secretWordVersusLeaderboardBtn:hover { opacity: 1; }

#secretWordVersusError { display: block; clear: both; margin-bottom: 12px; padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; background-color: rgba(193, 21, 21, 0.1); color: #C11515; }

/* New-challenge controls, always visible above the match list - two equal-weight action cards
   ("Challenge a Friend" / "Find Random Opponent") rather than a live-search box sitting next to a
   button, so the two ways to start a match read as a clear choice at a glance. Challenge a Friend
   reveals the name-search input inline underneath, instead of it always being visible. */
#secretWordVersusNewChallenge { display: block; clear: both; margin-bottom: 16px; }
#secretWordVersusNewMatchButtons { display: flex; gap: 10px; flex-wrap: wrap; }
.secret-word-versus-new-match-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; }
    .secret-word-versus-new-match-btn:hover { background-color: rgba(118, 107, 255, 0.1); }
    .secret-word-versus-new-match-btn:active { transform: scale(0.98); }
    .secret-word-versus-new-match-btn.secret-word-versus-new-match-btn-active { background: #766BFF; background: var(--input-button-background-color); color: #FFF; color: var(--input-button-text-color); }
    .secret-word-versus-new-match-btn.secret-word-versus-new-match-btn-disabled { cursor: default; opacity: 0.6; }
        .secret-word-versus-new-match-btn.secret-word-versus-new-match-btn-disabled:hover { background-color: transparent; }

#secretWordVersusOpponentSearchWrapper { position: relative; margin-top: 10px; }
    #secretWordVersusOpponentSearch { width: 100%; box-sizing: border-box; font-size: 14px; }
    #secretWordVersusOpponentResults { 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); }

/* Match list - one row per open match (challenge received/sent, queued random search, active game). */
#secretWordVersusEmptyState { text-align: center; font-size: 13px; opacity: 0.6; padding: 24px 10px; }
#secretWordVersusMatchList { display: block; clear: both; }
.secret-word-versus-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; }
    .secret-word-versus-row-clickable { cursor: pointer; transition: transform .15s ease-in-out; }
        .secret-word-versus-row-clickable:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); }
    .secret-word-versus-row-avatar { float: left; width: 36px; height: 36px; margin-right: 10px; border-radius: 50%; object-fit: cover; }
    .secret-word-versus-row-info { float: left; max-width: 55%; }
    .secret-word-versus-row-name { font-weight: 600; text-transform: capitalize; }
    .secret-word-versus-row-status { font-size: 12px; opacity: 1; margin-top: 2px; }
    .secret-word-versus-row-tries { font-size: 11px; opacity: 1; margin-top: 2px; }
    .secret-word-versus-row-actions { float: right; }
    .secret-word-versus-row-btn { cursor: pointer; user-select: none; display: inline-block; margin-left: 6px; padding: 5px 14px; border-radius: 14px; font-size: 12px; font-weight: 600; transition: all .2s ease-in-out; }
        .secret-word-versus-row-btn:active { transform: scale(0.95); }
        .secret-word-versus-accept-btn { background: #766BFF; background: var(--input-button-background-color); color: #FFF; color: var(--input-button-text-color); }
            .secret-word-versus-accept-btn:hover { background-color: #4D5577; background-color: var(--input-button-hover-background-color); }
        .secret-word-versus-decline-btn, .secret-word-versus-cancel-btn { background: transparent; border: 1px solid #DDD; border: 1px solid var(--top-search-border-color); opacity: 0.75; }
            .secret-word-versus-decline-btn:hover, .secret-word-versus-cancel-btn:hover { opacity: 1; background-color: rgba(0, 0, 0, 0.05); }
.secret-word-versus-row-challenge_received { border-left-color: #766BFF; border-left-color: var(--numbers-matchup-matchphrase-color); }
.secret-word-versus-row-active { border-left-color: #2E9E5B; }
.secret-word-versus-row-finished { opacity: 0.85; }
.secret-word-versus-row-challenge_sent, .secret-word-versus-row-queued { border-left-color: #9AA0A6; }
#daily-challenge-hint-text, #casual-mode-text-hint, #versus-mode-text-hint { margin-top: 15px !important; margin-bottom: 0 !important; }

/* "Your turn" rows get a brighter border/tint and bolder status text so they stand out from rows with
   nothing to do right now; "their turn" rows are dimmed since there's no action to take. */
.secret-word-versus-row-active.secret-word-versus-row-your-turn { border-left-width: 6px; background-color: rgba(46, 158, 91, 0.06); }
    .secret-word-versus-row-active.secret-word-versus-row-your-turn .secret-word-versus-row-status { color: #2E9E5B; font-weight: 700; opacity: 1; }
.secret-word-versus-row-active.secret-word-versus-row-their-turn { opacity: 0.9; }

.secret-word-versus-your-turn-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: secretWordVersusYourTurnPulse 1.8s ease-in-out infinite; }

@keyframes secretWordVersusYourTurnPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(46, 158, 91, 0.45); }
    50% { box-shadow: 0 0 0 5px rgba(46, 158, 91, 0); }
}

#secretWordVersusFinishedBanner { display: block; clear: both; text-align: center; padding: 14px 20px; margin-bottom: 14px; font-size: 16px; font-weight: 600; border-radius: 8px; color: #766BFF; color: var(--numbers-matchup-matchphrase-color); background-color: rgba(118, 107, 255, 0.1); }
    #secretWordVersusResultWord { display: block; font-size: 13px; font-weight: normal; opacity: 1; margin-top: 4px; text-transform: capitalize; }

#secretWordVersusTurnIndicator { display: block; clear: both; text-align: center; font-size: 14px; font-weight: 700; margin-bottom: 10px; padding: 8px; border-radius: 8px; background-color: rgba(118, 107, 255, 0.07); }
    #secretWordVersusTurnIndicator.secret-word-versus-your-turn { font-size: 16px; color: #FFF; background-color: #2E9E5B; box-shadow: 0 2px 8px rgba(46, 158, 91, 0.35); animation: secretWordVersusTurnIndicatorPulse 1.8s ease-in-out infinite; }
    #secretWordVersusTurnIndicator.secret-word-versus-their-turn { font-weight: 600; opacity: 0.65; background-color: rgba(0, 0, 0, 0.05); }

@keyframes secretWordVersusTurnIndicatorPulse {
    0%, 100% { box-shadow: 0 2px 8px rgba(46, 158, 91, 0.35); }
    50% { box-shadow: 0 2px 14px rgba(46, 158, 91, 0.6); }
}

#secretWordVersusWinningIndicator { display: block; clear: both; text-align: center; font-size: 13px; font-weight: 700; margin-bottom: 10px; padding: 6px; border-radius: 8px; color: #FFF; background-color: #D9A441; box-shadow: 0 2px 8px rgba(217, 164, 65, 0.35); }

#secretWordVersusLastGuess { display: block; clear: both; text-align: center; font-size: 14px; opacity: 1; margin-bottom: 10px; }

#secretWordVersusTriesSummary { display: block; clear: both; text-align: center; font-size: 14px; font-weight: 600; opacity: 0.75; margin-bottom: 10px; }

#secretWordVersusInputHolder { display: flex; clear: both; gap: 8px; margin-bottom: 14px; }
    #secretWordVersusInputWrapper { position: relative; flex: 1 1 auto; }
    #secretWordVersusGuessInput { width: 100%; box-sizing: border-box; font-size: 15px; }
    #secretWordVersusGuessInput:disabled { opacity: 0.5; }
    #secretWordVersusGuessSubmit { flex: 0 0 auto; position: relative; width: 40px; height: 40px; padding: 0; cursor: pointer; border-radius: 50%; border: none; background: #766BFF; background: var(--input-button-background-color); transition: all .2s ease-in-out; }
        #secretWordVersusGuessSubmit::before { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; margin: -6px 0 0 -8px; border-top: 2.5px solid #FFF; border-top-color: var(--input-button-text-color); border-right: 2.5px solid #FFF; border-right-color: var(--input-button-text-color); transform: rotate(45deg); }
        #secretWordVersusGuessSubmit:hover { background-color: #4D5577; background-color: var(--input-button-hover-background-color); }
        #secretWordVersusGuessSubmit:active { transform: scale(0.9); }
        #secretWordVersusGuessSubmit:disabled { opacity: 0.5; cursor: default; }
    #secretWordVersusPassBtn { flex: 0 0 auto; height: 40px; padding: 0 14px; cursor: pointer; border-radius: 20px; border: 1px solid #DDD; border-color: var(--top-search-border-color); background: transparent; font-size: 13px; font-weight: 600; opacity: 0.75; transition: all .2s ease-in-out; }
        #secretWordVersusPassBtn:hover { opacity: 1; }
        #secretWordVersusPassBtn:active { transform: scale(0.95); }
        #secretWordVersusPassBtn:disabled { opacity: 0.4; cursor: default; }
/* Request in flight (see setVersusActionBusy in secretWord.js) - distinct from the plain flat :disabled
   look (not-your-turn / match over) so a player can tell "processing" apart from "can't act right now". */
@keyframes secretWordVersusBusyPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.9; }
}
#secretWordVersusGuessSubmit.secret-word-versus-busy, #secretWordVersusPassBtn.secret-word-versus-busy { animation: secretWordVersusBusyPulse 0.9s ease-in-out infinite; cursor: default; }
#secretWordVersusSuggestions { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20; max-height: 260px; 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); }

/* Toggle between the two-column "You vs Them" split and a single "Classic" list (both players' guesses
   merged and ranked together, like Daily/Casual's list) - a compact two-pill segmented control, distinct
   from the sliding-indicator style used for the top-level mode tabs since this is a secondary in-match
   preference, not primary navigation. */
#secretWordVersusViewToggle { display: block; clear: both; text-align: center; margin-bottom: 10px; }
    .secret-word-versus-view-option { display: inline-block; cursor: pointer; user-select: none; padding: 4px 14px; margin: 0 3px; border-radius: 14px; font-size: 12px; font-weight: 600; border: 1px solid #DDD; border: 1px solid var(--top-search-border-color); opacity: 0.7; transition: all .2s ease-in-out; }
        .secret-word-versus-view-option:hover { opacity: 1; }
        .secret-word-versus-view-option.secret-word-versus-view-active { opacity: 1; background: #766BFF; background: var(--input-button-background-color); border-color: transparent; color: #FFF; color: var(--input-button-text-color); }

#secretWordVersusColumns { display: flex; clear: both; gap: 14px; margin-bottom: 12px; }
    .secret-word-versus-column { flex: 1 1 50%; min-width: 0; }
    .secret-word-versus-column-title { font-size: 12px; font-weight: bold; opacity: 1.0; margin-bottom: 6px; text-align: center; text-transform: capitalize; }
    .secret-word-versus-avatar { width: 18px; height: 18px; margin-right: 4px; border-radius: 50%; object-fit: cover; vertical-align: middle; margin-top: -2px; }
    .secret-word-versus-column .secret-word-guess-row { padding: 7px 10px; margin-bottom: 5px; font-size: 13px; }
    .secret-word-versus-column .secret-word-col-word { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; }

/* Classic (merged) list - same header/row conventions as #secretWordGuessListHeader/#secretWordGuessList,
   plus a small per-row avatar (reusing .secret-word-versus-avatar) showing who made each guess. */
#secretWordVersusClassicList { display: block; clear: both; margin-bottom: 12px; }
    #secretWordVersusClassicListHeader { display: flex; clear: both; padding: 4px 0; font-size: 12px; font-weight: bold; opacity: 0.6; }
        #secretWordVersusClassicListHeader .secret-word-col-word { flex: 1 1 auto; }
        #secretWordVersusClassicListHeader .secret-word-col-rank { flex: 0 0 90px; text-align: right; }
    .secret-word-versus-classic-avatar { flex: 0 0 auto; width: 22px; height: 22px; margin-right: 8px; margin-top: 0; }

#secretWordVersusLeaveBtn { cursor: pointer; user-select: none; display: block; clear: both; text-align: center; font-size: 13px; font-weight: 600; padding: 6px 16px; opacity: 0.7; text-decoration: underline; }
    #secretWordVersusLeaveBtn:hover { opacity: 1; }

#secretWordHighScoresHolder table.user-score-table .user-score-small { display: none; }

@media screen and (max-width: 565px) {
    #secretWordVersusColumns { gap: 8px; }
    .secret-word-versus-column .secret-word-col-word { font-size: 12px; }
    .secret-word-versus-row-info { float: none; max-width: 100%; margin-bottom: 8px; }
    .secret-word-versus-row-actions { float: none; clear: both; }
}

@media (max-width: 550px) {
    #secretWordHighScoresHolder table.user-score-table .user-score-small { display: block; font-weight: normal; font-style: italic; padding-top: 1px; }
}

#secretWordButtonsHolder { display: block; clear: both; text-align: center; margin-top: 14px; }
#secretWordHighScoresBtn, #secretWordHelpBtn, #backToSecretWordGameBtn, #backFromSecretWordHelpBtn, #secretWordVersusBackBtn { 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; }
    #secretWordHighScoresBtn:hover, #secretWordHelpBtn:hover, #backToSecretWordGameBtn:hover, #backFromSecretWordHelpBtn:hover, #secretWordVersusBackBtn: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; }
    #secretWordHighScoresBtn:active, #secretWordHelpBtn:active, #backToSecretWordGameBtn:active, #backFromSecretWordHelpBtn:active, #secretWordVersusBackBtn:active { 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); }

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

@media (prefers-reduced-motion: reduce) {
    .sw-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-section img.example { max-width: 100%; margin-top: 3px; margin-bottom: 3px; }

#backFromSecretWordHelpBtn, #backToSecretWordGameBtn, #secretWordVersusBackBtn { 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; }
    #backFromSecretWordHelpBtn:hover, #backToSecretWordGameBtn:hover, #secretWordVersusBackBtn: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; }
    #backFromSecretWordHelpBtn:active, #backToSecretWordGameBtn:active, #secretWordVersusBackBtn:active { transform: scale(0.95); }
    #backFromSecretWordHelpBtn::before, #backToSecretWordGameBtn::before, #secretWordVersusBackBtn::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; }
    #backFromSecretWordHelpBtn:hover::before, #backFromSecretWordHelpBtn:active::before, #secretWordVersusBackBtn:hover::before, #secretWordVersusBackBtn:active::before, #backToSecretWordGameBtn:hover::before, #backToSecretWordGameBtn:active::before { filter: grayscale(1) invert(1) brightness(100); }

#secret-word-help-header-actions { display: block; }
    #secret-word-help-header-actions::after { content: ""; display: block; clear: both; }
#retakeSecretWordTutorialBtn { 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; }
    #retakeSecretWordTutorialBtn:hover { opacity: 0.85; box-shadow: 0 4px 12px rgba(118,107,255,0.4); }
    #retakeSecretWordTutorialBtn:active { transform: scale(0.95); }

#secretWordHelpBtn { cursor: pointer; float: right; 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; }
    #secretWordHelpBtn: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; }
    #secretWordHelpBtn:active { transform: scale(0.9); }
    #secretWordHelpBtn::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; }

#secretWordPlayNowBtn { 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; }
    #secretWordPlayNowBtn: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; }
    #secretWordPlayNowBtn:active { transform: scale(0.9); }

#secretWordClearControls { display: none; clear: both; }

#txtHelpWordRelTrg { width: 300px; margin-bottom: 10px; margin-right: 10px; }
#btnHelpWordRelTrg { width: 60px; min-width: auto; }

/*@media screen and (max-width: 815px) { 
    .secret-word-casual-guess-count { clear: both; margin-left: 0; margin-top: 10px; }
    #secretWordNewWordBtn, #secretWordRevealBtn { margin-top: 5px; }
}*/

/*@media screen and (max-width: 815px) {
    .secret-word-casual-difficulty-badge { float: right !important; margin-top: 0 !important; }
}*/

@media screen and (max-width: 565px) { 
    .secret-word-mode-option { font-size: 12px; }
        .secret-word-mode-option img { bottom: -6px; }
    .secret-word-casual-note { float: none !important; clear: both; margin-bottom: 5px; }
    .secret-word-casual-difficulty-badge { margin-left: 0 !important; float: right !important; }
    .secret-word-casual-guess-count { float: left !important; clear: none !important; margin: 6px 0 8px; }
    #secretWordClearControls { display: block; }
    #secretWordRevealBtn { float: left !important; margin: 5px 6px 0 0; }
    #retakeSecretWordTutorialBtn { float: none; margin-bottom: 5px; }
}

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

@media screen and (max-width: 465px) {
    #txtHelpWordRelTrg { width: 100%; clear: both; }
}

/* ---- First-time interactive tutorial - same shape/animations as Number Connect's nm-tutorial-*
   (see NumbersMatchup.css), ported under an sw- prefix since it's a separate page/script. ---- */
@keyframes swPanelIn {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
.sw-panel-in { animation: swPanelIn 0.22s ease-out both; }
/* This started out as a one-off for the tutorial card, but it now plays on every panel switch (game /
   how to play / leaderboards) and every mode tab change, so it needs the same reduced-motion guard the
   rest of the site uses. The animation is purely decorative - the panel is already in its final position
   and fully readable without it - so switching it off entirely is the correct degradation, not a
   shortened duration. */
@media (prefers-reduced-motion: reduce) {
    .sw-panel-in { animation: none; }
}

#sw-tutorial-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 2000; }
#sw-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); }
    #sw-tutorial-card.sw-card-bottom { bottom: 70px; top: auto; }
    #sw-tutorial-card.sw-card-top { top: 16px; bottom: auto; }
#sw-tutorial-progress { display: flex; gap: 6px; margin-bottom: 16px; }
.sw-tutorial-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(0,0,0,0.15); transition: all .25s ease; }
    .sw-tutorial-dot.active { width: 18px; border-radius: 4px; background: #766BFF; background: var(--input-button-background-color); }
#sw-tutorial-title { font-size: 16px; font-weight: 700; margin-bottom: 8px; color: #766BFF; color: var(--input-button-background-color); }
#sw-tutorial-text { font-size: 15px; line-height: 1.5; color: #34363E; color: var(--body-text-color); margin-bottom: 16px; }
#sw-tutorial-actions { display: flex; justify-content: space-between; align-items: center; }
#sw-tutorial-skip { font-size: 14px; color: #34363E; color: var(--body-text-color); opacity: 0.4; cursor: pointer; padding: 4px 0; transition: opacity .2s; }
    #sw-tutorial-skip:hover { opacity: 0.7; }
#sw-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; }
    #sw-tutorial-next:hover { opacity: 0.85; box-shadow: 0 4px 12px rgba(118,107,255,0.4); }
    #sw-tutorial-next:active { transform: scale(0.95); }
.sw-tutorial-target { position: relative !important; z-index: 2001 !important; border-radius: 8px; animation: swTutorialPulse 1.8s ease-in-out infinite; }
@keyframes swTutorialPulse {
    0%, 100% { outline: 3px solid rgba(118,107,255,0.9); outline-offset: 6px; box-shadow: 0 0 0 0 rgba(118,107,255,0.4); }
    50% { outline: 3px solid rgba(118,107,255,0.9); outline-offset: 6px; box-shadow: 0 0 0 8px rgba(118,107,255,0); }
}

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