#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: var(--ws-background-casual); 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="casual"] { background-image: var(--ws-background-casual); } .body-background.custom-background[data-mode="daily"] { background-image: var(--ws-background-daily); } .body-background.custom-background[data-mode="versus"] { background-image: var(--ws-background-versus); } /*footer p, footer a { color: #FFF !important; }*/ #main-container .section-item, .modal-main .section-item { border: none !important; } /*#secretWordHighScoresHolder, #secretWordVersusHighScoresHolder, #secretWordHelpHolder { backdrop-filter: blur(15px); } */ /* 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; } /* Versus leaderboard "Your Record" column. A dash means the two have never met, which on a small player base is most of the table - dimmed for the same reason sw-not-today is, 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.sw-no-record { opacity: 0.35; } #secretWordVersusHighScoresHolder table.user-score-table tbody td:last-child .user-score { font-variant-numeric: tabular-nums; } #secretWordVersusHighScoresHolder table.user-score-table .user-score-small { display: none; } .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); } /* Wraps Share + Play Again so the pair centres and wraps as a unit regardless of which one is showing - the two buttons' own display:none toggling made simple margin-based spacing unreliable (a lone visible button would carry a stray left-margin meant for the gap between two). */ #secretWordSolvedBannerActions { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; } #secretWordShareBtn { display: inline-block; cursor: pointer; user-select: none; 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(--generic-image-filter); } /* Same pill shape as Share, borrowed rather than a from-scratch look, so the pair reads as one family of actions instead of two different button styles competing in a small banner. */ #secretWordPlayAgainBtn { display: inline-block; cursor: pointer; user-select: none; 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; } #secretWordPlayAgainBtn:hover { background-color: #4D5577; background-color: var(--input-button-hover-background-color); } #secretWordPlayAgainBtn:active { transform: scale(0.95); } #secretWordRevealedWord { text-transform: capitalize; text-decoration: underline; } #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 { 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; border-radius: 15px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } /* 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; margin-top: 2px; cursor: pointer; border-radius: 15px; 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: -7px 0 0 -9px; 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); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); } #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; } /* position:relative so #secretWordJumpToCalendarBtn (absolute, centered - see its own rule) has this, not the page, as its positioning context. */ #secretWordTopStats { position: relative; 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: inline-block; margin-bottom: 0; opacity: 1; position: relative; top: -2px; font-size: 11px; font-weight: normal; margin-right: 5px; } #secretWordGuessCountHolder .points { display: inline-block; font-weight: bold; } #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: normal; margin-right: 4px; opacity: 0.65; } #secretWordDailyCountdown .hours, #secretWordDailyCountdown .minutes, #secretWordDailyCountdown .seconds { font-weight: 700; } /* Same slot and sizing as the countdown above, which it replaces while a past day is open. Not faded like the countdown - it's the one thing telling the player this isn't today's word. */ #secretWordDailyViewingDate { display: block; clear: both; text-align: center; margin-top: 1px; font-size: 12px; white-space: nowrap; } #secretWordDailyViewingDateText { font-weight: bold; } /* Own line rather than trailing the date - keeps this block about as wide as the countdown it replaces, so it doesn't run into the centered #secretWordJumpToCalendarBtn on narrow screens. */ #secretWordDailyBackToToday { display: block; margin-top: 2px; font-size: 12px; text-decoration: underline; cursor: pointer; opacity: 0.75; } #secretWordDailyBackToToday:hover, #secretWordDailyBackToToday:focus-visible { opacity: 1; } #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, #secretWordVersusHintsHolder { 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; } /* Plain sentence rows (createHintRow) instead of the guess-list look - no rank badge/fill bar, just the word to try. */ .secret-word-hint-row { padding: 4px 2px; margin-bottom: 4px; font-size: 14px; line-height: 1.4; } .secret-word-hint-row::before { content: "-"; display: inline; margin-right: 5px; } .secret-word-hint-row:last-child { margin-bottom: 0; } .secret-word-hint-row strong { cursor: pointer; color: #766BFF; color: var(--sw-hint-text-color); text-transform: capitalize; } .secret-word-hint-row strong:hover { text-decoration: underline; } /* Replaces the hint rows once the player's own best guess reaches the green band - see renderHints in SecretWord.js. Same holder, so it keeps the dashed border/lightbulb header rather than needing its own container. */ .secret-word-hints-done { padding: 4px 2px; font-size: 12.5px; opacity: 0.75; text-align: center; } #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 .no-guesses-text { display: block; clear: both; text-align: center; font-size: 13px; font-weight: bold; opacity: 0.7; } #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; } /* Icons on the new-match buttons - drawn as a mask on ::before rather than put in the markup, since renderVersusListView/startVersusLinkInvite rewrite the labels with textContent. The mask is filled with currentColor, so the icon follows the button's colour in both themes. */ #secretWordVersusNewMatchButtons .secret-word-versus-new-match-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; } #secretWordVersusNewMatchButtons .secret-word-versus-new-match-btn:hover::before { transform: rotate(-10deg) scale(1.12); } #secretWordVersusChallengeFriendBtn { --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"); } #secretWordVersusLinkInviteBtn { --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"); } #secretWordVersusRandomBtn { --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) { #secretWordVersusNewMatchButtons .secret-word-versus-new-match-btn::before { transition: none; } #secretWordVersusNewMatchButtons .secret-word-versus-new-match-btn:hover::before { transform: none; } } #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); } /* Setup panel shown in place of the three new-match buttons once one is clicked - see openVersusSetup in SecretWord.js. Same card language as the hints box below (dashed accent border) so it reads as a distinct step rather than more of the button row. */ #secretWordVersusSetupPanel { 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); } #secretWordVersusSetupTitle { font-size: 13px; font-weight: bold; opacity: 0.8; margin-bottom: 10px; } .secret-word-versus-setup-row { margin-bottom: 12px; } .secret-word-versus-setup-row:last-child { margin-bottom: 0; } .secret-word-versus-setup-row label { cursor: pointer; user-select: none; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; } .secret-word-versus-setup-row input[type="checkbox"] { cursor: pointer; margin: 0; } .secret-word-versus-setup-row input[type="checkbox"]:disabled { cursor: default; } .secret-word-versus-setup-row input[type="radio"] { cursor: pointer; margin: 0; } .secret-word-versus-setup-label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; } #secretWordVersusMatchWithRow label { margin-right: 18px; font-weight: normal; } .secret-word-versus-setup-row input[type="number"] { width: 100px; box-sizing: border-box; font-size: 14px; margin-top: 6px; display: block; } .secret-word-versus-setup-hint { display: block; margin-top: 3px; font-size: 12px; opacity: 0.7; font-weight: normal; } /* Hints and a guess cap are mutually exclusive - see updateVersusSetupConditionalUI in SecretWord.js, which also swaps the row's own hint text to say so rather than leaving a disabled control unexplained. */ .secret-word-versus-setup-row-disabled { opacity: 0.5; } .secret-word-versus-setup-row-disabled label { cursor: default; } #secretWordVersusSetupActions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; } #secretWordVersusSetupActions .secret-word-versus-new-match-btn { flex: 1 1 120px; } /* Shown in place of the settings/search/actions the instant a friend is picked - see showVersusSetupWaiting in SecretWord.js. */ #secretWordVersusSetupWaiting { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 0 4px; font-size: 14px; font-weight: 600; opacity: 0.85; } /* No prefers-reduced-motion guard - same call as secretWordVersusBusyPulse above (also a functional in-progress indicator, not a decorative flourish), so both stay consistent. */ .secret-word-versus-setup-spinner { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(118, 107, 255, 0.25); border: 2.5px solid color-mix(in srgb, var(--input-button-background-color) 25%, transparent); border-top-color: #766BFF; border-top-color: var(--input-button-background-color); animation: secretWordVersusSetupSpin 0.7s linear infinite; } @keyframes secretWordVersusSetupSpin { to { transform: rotate(360deg); } } .secret-word-versus-setup-cancel-btn { border-color: transparent !important; color: inherit !important; opacity: 0.7; } .secret-word-versus-setup-cancel-btn:hover { opacity: 1; background-color: rgba(128, 128, 128, 0.12) !important; } /* The rank-wins row appears/disappears on every keystroke in the max-guesses input (see updateVersusSetupConditionalUI), which is too frequent for the one-shot swPanelIn entrance used elsewhere on this page - a smooth collapse reads better than either a repeated slide-in or an instant display:none jump for something toggling that often. */ #secretWordVersusRankWinsRow { overflow: hidden; max-height: 70px; opacity: 1; transition: max-height 0.25s ease, opacity 0.2s ease, margin-bottom 0.25s ease; } #secretWordVersusRankWinsRow.secret-word-versus-setup-row-collapsed { max-height: 0; opacity: 0; margin-bottom: 0; pointer-events: none; } @media (prefers-reduced-motion: reduce) { #secretWordVersusRankWinsRow { transition: none; } } /* 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: var(--section-background-color); 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: #766BFF; border-left-color: var(--input-button-background-color); } .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: 0 !important; } /* Row colours, shared with Number Connect's battle rows and Shell Breach's challenge rows: purple (the site accent) for a match in progress, green for a win, red for a loss, plain for a draw. Green is kept for wins alone so a result never looks like a match still in play. "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(118, 107, 255, 0.8); } .secret-word-versus-row-active.secret-word-versus-row-your-turn .secret-word-versus-row-status { color: #766BFF; color: var(--input-button-background-color); font-weight: 700; opacity: 1; } .secret-word-versus-row-active.secret-word-versus-row-their-turn { opacity: 0.9; } /* Finished match results: a win gets a green border and tint, undimmed, with a gold star beside "You won!"; a loss a red border and tint with a small cross. */ .secret-word-versus-row-finished.secret-word-versus-row-won { opacity: 1; border-left-color: #2E9E5B; border-left-width: 6px; background-color: rgba(46, 158, 91, 0.8); } .secret-word-versus-row-won .secret-word-versus-row-status { font-weight: 700; } .secret-word-versus-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: secretWordVersusStarIn .5s ease-out; } .secret-word-versus-row-star svg { width: 100%; height: 100%; fill: #F2B705; } .secret-word-versus-row-finished.secret-word-versus-row-lost { border-left-color: #D9534F; background-color: rgba(217, 83, 79, 0.8); } .secret-word-versus-row-loss-icon { display: inline-block; vertical-align: -3px; width: 16px; height: 16px; margin-right: 5px; line-height: 0; } .secret-word-versus-row-loss-icon svg { width: 100%; height: 100%; } .secret-word-versus-row-loss-icon circle { fill: #D9534F; } .secret-word-versus-row-loss-icon path { stroke: #FFF; stroke-width: 2.4; stroke-linecap: round; fill: none; } @keyframes secretWordVersusStarIn { 0% { transform: scale(0) rotate(-45deg); } 70% { transform: scale(1.2) rotate(8deg); } 100% { transform: scale(1) rotate(0); } } .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: #766BFF; background: var(--input-button-background-color); color: #FFF; color: var(--input-button-text-color); animation: secretWordVersusYourTurnPulse 1.8s ease-in-out infinite; } @keyframes secretWordVersusYourTurnPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(118, 107, 255, 0.45); } 50% { box-shadow: 0 0 0 5px rgba(118, 107, 255, 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, #secretWordLastGuess { 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; } /* Only shown for a match created with MaxGuesses set - see renderVersusMatchDetail. Smaller/lighter than triesSummary above it since it's supplementary context, not the primary "who's ahead" read. */ #secretWordVersusGuessCap { display: block; clear: both; text-align: center; font-size: 12px; opacity: 0.6; margin-top: -6px; 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; border-radius: 15px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } #secretWordVersusGuessInput:disabled { opacity: 0.5; } #secretWordVersusGuessSubmit { flex: 0 0 auto; position: relative; width: 40px; height: 40px; padding: 0; margin-top: 2px; cursor: pointer; border-radius: 15px; 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; margin-top: 2px; 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; } } @media (max-width: 550px) { #secretWordHighScoresHolder table.user-score-table .user-score-small { display: block; font-weight: normal; font-style: italic; padding-top: 1px; } } @media screen and (max-width: 400px) { .secret-word-versus-row-info { float: none; max-width: 100%; margin-bottom: 8px; } .secret-word-versus-row-actions { float: none; clear: both; } .secret-word-versus-row-actions .secret-word-versus-row-btn { margin-left: 0; } } #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; backdrop-filter: blur(10px); } #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.7); } body[data-theme="Dark"] #btnStandaloneApp, body[data-theme="Dark"] #backToGameListBtn { background: rgba(0, 0, 0, 0.5); } .help-content { padding: 0 10px 0 10px; 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 .about-header { display: inline-block; font-size: 16px; font-weight: bold; margin: 0 0 6px; } .sw-about-game .about-header::after { content: "\25BE"; display: inline-block; margin-left: 7px; font-size: 13px; transition: transform .2s ease-in-out; } .sw-about-game[open] .about-header::after { transform: rotate(180deg); } .sw-about-lede, .sw-about-lede h1 { display: block; font-size: 14px; line-height: 1.7; max-width: 70ch; font-weight: normal; } .sw-about-lede h1 { display: inline-block; margin: 0; } .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 .about-header::after { transition: none; } .secret-word-versus-row-star { animation: none; } } /* Gameplay screenshots, used in both the About block and the How to Play panel. Same flex-row shape as .ff-about-gallery on Fruit Frenzy so the two games present shots identically, and for the same reason it exists there: the sitewide lazyLoadImages() in booster.js is built for .lazyload/data-src elements scrolling into view, which never fires inside a collapsed
or a display:none help panel - so these use native loading="lazy" instead. */ .sw-about-gallery { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; } .sw-about-shot { margin: 0; max-width: 90%; flex: 1 1 260px; } .sw-about-shot img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 6px 18px rgba(0,0,0,0.2); } .sw-about-shot figcaption { font-size: 12px; opacity: 0.65; margin-top: 6px; text-align: center; } /* Worked ranking example. Deliberately built from markup rather than being another screenshot: it is the one thing about this game that needs explaining, a picture of it would need re-shooting every time the board restyles, and text stays readable, selectable and translatable. The bar width is the whole point - it encodes "how close" far better than the number alone, which is also why the real board draws one. Widths are inline in the view so each row's value sits next to its rank. */ .sw-rank-example { margin: 12px 0 0; border: 1px solid #EAEBEF; border: 1px solid var(--top-search-border-color); border-radius: 12px; overflow: hidden; max-width: 460px; } .sw-rank-example-row { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-bottom: 1px solid #EAEBEF; border-bottom: 1px solid var(--top-search-border-color); font-size: 13px; } .sw-rank-example-row:last-child { border-bottom: none; } .sw-rank-example-word { flex: 0 0 92px; font-weight: bold; } .sw-rank-example-track { flex: 1 1 auto; height: 10px; border-radius: 6px; background-color: rgba(0,0,0,0.07); background-color: var(--search-trend-hover-background-color); overflow: hidden; } .sw-rank-example-fill { display: block; height: 100%; border-radius: 6px; background-color: #766BFF; background-color: var(--input-button-background-color); } .sw-rank-example-rank { flex: 0 0 auto; min-width: 46px; text-align: right; font-variant-numeric: tabular-nums; opacity: 0.8; } /* The solved row is the payoff of the example, so it gets the emphasis the real board gives it. */ .sw-rank-example-row.is-solved { font-weight: bold; } .sw-rank-example-row.is-solved .sw-rank-example-rank { opacity: 1; } .sw-rank-example-caption { font-size: 12px; opacity: 0.65; margin-top: 6px; } .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: left; 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) { /* Today (3) and Played (4) fold into the .user-score-small line under the player's name. Scoped to the overall board's own body so the one-day board (3 columns, Guesses is column 3) isn't hit when it's loaded into the same holder. */ #secretWordHighScoresHolder table.user-score-table.sw-overall-table thead td:nth-child(3), #secretWordHighScoresHolder table.user-score-table.sw-overall-table tbody td:nth-child(3), #secretWordHighScoresHolder table.user-score-table.sw-overall-table thead td:nth-child(4), #secretWordHighScoresHolder table.user-score-table.sw-overall-table tbody td:nth-child(4) { 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; } /* Five columns don't fit here, so Your Record folds under the player's name instead. nth-child(5) simply doesn't match when the column isn't being rendered at all. */ #secretWordVersusHighScoresHolder table.user-score-table thead td:nth-child(5), #secretWordVersusHighScoresHolder table.user-score-table tbody td:nth-child(5) { display: none; } #secretWordVersusHighScoresHolder 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); } } /* Deliberately identical to Number Connect's nmPanelOut - same offset, duration and easing - so the two games' panel switches are indistinguishable. */ @keyframes swPanelOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-8px); } } .sw-panel-in { animation: swPanelIn 0.25s ease-out both; } .sw-panel-out { animation: swPanelOut 0.15s ease-in both; pointer-events: none; } /* 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) { /* Safe to drop both: neither panel relies on its animation to end up in the right state - display is set directly in switchToSecretWordPanel, opacity and transform fall back to their normal values, and the out-transition's timing comes from a setTimeout rather than an animation event, so the swap still completes on schedule. Same reasoning as the matching guard in numbersMatchup.css. */ .sw-panel-in, .sw-panel-out { 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; } } /* ---- Daily replay calendar -------------------------------------------------------------------------- Mirrors Number Connect's, with one difference that comes from the data: this lists only the days that actually have a stored word, so it can be shorter than the 30-day window - a secret word is chosen at random and exists only because it was saved, unlike a Number Connect board which is a pure function of its date. */ #swDailyCalendarHolder { display: block; clear: both; margin-top: 18px; padding-top: 14px; border-top: 1px solid #EEE; border-top: 1px solid var(--menu-bar-border-color); } #swDailyCalendarHeader { display: block; clear: both; } #swDailyCalendarTitle { float: left; font-weight: 600; font-size: 14px; line-height: 24px; } #swDailyCalendarBody { 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. */ #swDailyCalendarWeekdays { 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; } #swDailyCalendarGrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; } #swDailyCalendarHint { 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. */ .sw-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; } .sw-cal-day:hover { background-color: rgba(118, 107, 255, 0.1); } .sw-cal-day:active { transform: scale(0.97); } .sw-cal-day:focus-visible { outline: 2px solid var(--input-button-background-color); outline-offset: 1px; } .sw-cal-num { font-size: 18px; font-weight: 700; line-height: 1.1; } /* Guess count on a solved day, an ellipsis while part-played, the month otherwise. Tabular so a column of guess counts lines up. */ .sw-cal-sub { font-size: 14px; opacity: 0.65; line-height: 1.3; font-variant-numeric: tabular-nums; } /* Solved is the filled state; part-played is outlined but not filled, so "started" and "finished" are distinguishable without relying on colour alone. */ .sw-cal-day.is-played { background-color: rgba(76, 175, 80, 0.14); border-color: rgba(76, 175, 80, 0.5); } .sw-cal-day.is-inprogress { border-color: rgba(118, 107, 255, 0.55); border-style: dashed; } .sw-cal-day.is-today .sw-cal-num { color: #766BFF; color: var(--input-button-background-color); } .sw-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); } .sw-cal-day.is-selected { border-width: 2px; border-style: solid; 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. */ .sw-cal-day.sw-cal-day-empty { cursor: default; pointer-events: none; border-color: transparent; background-color: transparent; } /* Marks a solve set after its day had passed - see _SecretWordDailyLeaderboard.cshtml. */ .sw-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); } /* Day a player's best was set, as a small line under their name - see _SecretWordLeaderboard.cshtml. */ .sw-best-on { display: block; font-size: 11px; font-weight: normal; font-style: normal; opacity: 0.6; margin-top: 2px; } .sw-daily-leaderboard-date { font-size: 12.5px; opacity: 0.75; margin-bottom: 10px; } @media screen and (max-width: 550px) { #swDailyCalendarWeekdays, #swDailyCalendarGrid { gap: 6px; } #swDailyCalendarWeekdays { font-size: 9px; } .sw-cal-num { font-size: 14px; } } /* Reveal control for a past day - see updateSwRevealUI. Deliberately understated: giving up is the secondary action on that screen, so it reads as a link rather than competing with the guess box. */ #swDailyRevealHolder { display: block; clear: both; margin-top: 12px; } #swDailyRevealBtn { display: inline-block; cursor: pointer; user-select: none; font-size: 12.5px; font-weight: 600; padding: 5px 14px; border-radius: 16px; opacity: 0.85; background-color: rgba(118, 107, 255, 0.12); transition: all .2s ease-in-out; } #swDailyRevealBtn:hover { opacity: 1; } #swDailyRevealBtn:active { transform: scale(0.97); } #swDailyRevealBtn:focus-visible { outline: 2px solid var(--input-button-background-color); outline-offset: 1px; } #swDailyRevealedNote { display: block; clear: both; font-size: 13px; margin-top: 4px; } #swDailyRevealedNote strong { text-transform: capitalize; } /* Centered between #secretWordGuessCountHolder (float:left) and #secretWordTopScore (float:right) via absolute positioning against #secretWordTopStats's own position:relative, rather than sitting in flow between them - the two floats aren't the same width, so a plain in-flow item between them wouldn't land in the true middle. #secretWordTopStats holding position:relative (not some more distant ancestor) is also what keeps this immune to #secretWordGameHolder's own panel-switch-in transform animation - that would otherwise become the containing block instead. translate(-50%, -50%) does the centering itself, so the hover/active states fold their scale onto the same transform instead of overwriting it. */ #secretWordJumpToCalendarBtn { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); 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; } #secretWordJumpToCalendarBtn:hover { transform: translate(-50%, -50%) scale(1.1); } #secretWordJumpToCalendarBtn:active { transform: translate(-50%, -50%) scale(0.95); } /* A revealed day is marked apart from a solved one on the calendar - it is finished, but it isn't a win, and showing both the same way would overstate it. */ .sw-cal-day.is-revealed { background-color: rgba(0, 0, 0, 0.05); border-style: dashed; opacity: 0.8; } @media screen and (max-width: 600px) { #swDailyCalendarBody { overflow: auto; } .sw-cal-num { font-size: 15px; } .sw-cal-sub { font-size: 12px; } } @media screen and (max-width: 400px) { .sw-cal-num { font-size: 12px; } .sw-cal-sub { font-size: 10px; } } /* Empty-board starter (renderStarterWords in SecretWord.js) - a how-it-works line and one-tap first guesses. Overrides .no-guesses-text's dimmed bold single line, which it reuses only so the solved banner can still hide it. */ #secretWordGuessList .no-guesses-text.sw-starter { font-weight: normal; opacity: 1; padding: 6px 4px 4px 4px; } .sw-starter-how { max-width: 420px; margin: 0 auto 14px auto; font-size: 14px; line-height: 1.45; color: #34363E; color: var(--body-text-color); } .sw-starter-label { margin-bottom: 8px; font-size: 13px; font-weight: 600; opacity: 0.75; } .sw-starter-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .sw-starter-chip { cursor: pointer; padding: 7px 16px; font-family: inherit; font-size: 14px; font-weight: 600; border-radius: 16px; 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; } .sw-starter-chip:hover, .sw-starter-chip:focus-visible { background-color: rgba(118, 107, 255, 0.12); } .sw-starter-chip:active { transform: scale(0.95); } .sw-starter-tour { cursor: pointer; margin-top: 12px; padding: 4px 8px; font-family: inherit; font-size: 12px; font-weight: 600; border: none; background: transparent; text-decoration: underline; color: #34363E; color: var(--body-text-color); opacity: 0.65; } .sw-starter-tour:hover { opacity: 1; } /* Guest line - replaces the raw "Guest User (id)" label. */ .sw-guest-note { font-style: normal; } .sw-guest-note a { font-weight: 600; text-decoration: underline; color: inherit; } /* Progress under the last guess (renderLastGuess in SecretWord.js). */ .sw-new-best { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: #FFF; background: #2E9E5B; vertical-align: 1px; } .sw-closeness { max-width: 360px; margin: 8px auto 0 auto; } .sw-closeness-track { height: 8px; border-radius: 4px; overflow: hidden; background-color: rgba(154, 160, 166, 0.25); } .sw-closeness-fill { height: 100%; border-radius: 4px; transition: width .4s ease-out; } .sw-closeness-fill.band-hot { background: linear-gradient(90deg, #34C77B 0%, #1F8C52 100%); } .sw-closeness-fill.band-warm { background: linear-gradient(90deg, #F0B94D 0%, #D08A1F 100%); } .sw-closeness-fill.band-cool { background: linear-gradient(90deg, #5CA3E0 0%, #3468A0 100%); } .sw-closeness-fill.band-cold { background: linear-gradient(90deg, #9AA0A6 0%, #767B80 100%); } .sw-closeness-fill.band-solved { background: linear-gradient(90deg, #9C8FFF 0%, #766BFF 100%); } .sw-closeness-label { margin-top: 4px; font-size: 12px; opacity: 0.8; } /* Shown in the solved banner for guests (showSolvedBanner). */ #secretWordGuestSaveNote { margin-top: 12px; font-size: 13px; font-weight: normal; line-height: 1.45; color: #34363E; color: var(--body-text-color); } #secretWordGuestSaveNote a { font-weight: 600; text-decoration: underline; color: #766BFF; color: var(--input-button-background-color); } /* Past Challenges collapsed for new players until today's board is done (expandSwDailyCalendar). */ #swDailyCalendarExpandBtn { display: none; float: right; cursor: pointer; padding: 3px 14px; font-family: inherit; font-size: 12px; font-weight: 600; border-radius: 14px; color: #766BFF; color: var(--input-button-background-color); border: 1px solid #766BFF; border: 1px solid var(--input-button-background-color); background: transparent; } #swDailyCalendarExpandBtn:hover { background-color: rgba(118, 107, 255, 0.12); } #swDailyCalendarHolder.sw-cal-collapsed #swDailyCalendarExpandBtn { display: inline-block; } #swDailyCalendarHolder.sw-cal-collapsed #swDailyCalendarBody { display: none; } /* Rematch on a finished Versus match - the primary action there, so filled, above the "Dismiss" link. Same look as Number Connect's #battleRematchBtn. */ #secretWordVersusRematchBtn { display: block; width: fit-content; margin: 14px auto 4px auto; padding: 9px 20px; border-radius: 10px; font-size: 14px; font-weight: 600; cursor: pointer; user-select: none; 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); transition: opacity .2s ease-in-out, transform .15s ease-in-out; } #secretWordVersusRematchBtn:hover, #secretWordVersusRematchBtn:focus-visible { opacity: 0.88; } #secretWordVersusRematchBtn:active { transform: scale(0.97); } @media (prefers-reduced-motion: reduce) { #secretWordVersusRematchBtn { transition: none; } }