@import url("https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&display=swap");
/* ---- Game shell ----
   Shared by the game pages - see gameShell.js for what each part does and the markup it expects. A game's
   own stylesheet adds its title demo, its mode buttons' icons and its dock bubble colours
   (#gsDockBubble[data-mode="..."]). Number Connect has its own copy of these styles in numbersMatchup.css. */

/* ---- Title screen ----
   While it's up (.gs-title-open on the game's wrapper) the game card and its panels are hidden; anything
   marked .gs-title-keep (an About section, say) stays. */
button { user-select: none; }
#gsTitleScreen { display: none; }
.gs-title-open #gsTitleScreen { display: block; position: relative; overflow: hidden; }
.gs-title-open > .section-item:not(#gsTitleScreen):not(.gs-title-keep),
.gs-title-open > div[id$="Holder"]:not(.gs-title-keep) { display: none !important; }
#gsTitleScreen::before { content: ""; position: absolute; top: -30%; left: -10%; right: -10%; height: 85%; pointer-events: none; background: radial-gradient(ellipse 55% 60% at 50% 45%, rgba(134, 76, 255, 0.20), transparent 70%), radial-gradient(ellipse 35% 45% at 20% 70%, rgba(90, 170, 252, 0.16), transparent 70%), radial-gradient(ellipse 35% 45% at 82% 68%, rgba(255, 178, 41, 0.14), transparent 70%); }
.gs-title-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: 14px; max-width: 460px; margin: 0 auto; padding: 22px 16px 20px 16px; text-align: center; }
.gs-title-logo { display: block; width: min(100%, 300px); height: auto; filter: drop-shadow(0 8px 18px rgba(118, 107, 255, 0.35)); animation: gsTitleLogoIn .6s cubic-bezier(.2, 1.4, .4, 1) both, gsTitleLogoBob 4s ease-in-out .6s infinite; }
@keyframes gsTitleLogoIn {
    from { opacity: 0; transform: scale(0.7) translateY(-12px); }
    to { opacity: 1; transform: none; }
}
@keyframes gsTitleLogoBob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
.gs-title-tagline { margin: 0; font-size: 14px; opacity: 0.8; }
#gsTitlePlayBtn { display: flex; flex-direction: column; align-items: center; cursor: pointer; min-width: min(325px, 100%); padding: 11px 44px; box-sizing: border-box; font-family: inherit; color: #FFF; border: 0; border-radius: 30px; background: linear-gradient(90deg, #5aaafc, #864cff); box-shadow: 0 8px 22px rgba(118, 107, 255, 0.45); animation: gsTitlePlayGlow 2.4s ease-in-out infinite; transition: transform .15s ease-in-out; }
    #gsTitlePlayBtn:hover { transform: translateY(-2px) scale(1.03); }
    #gsTitlePlayBtn:active { transform: scale(0.96); }
    .gs-title-play-label { font-size: 20px; font-weight: 800; letter-spacing: 0.4px; }
    .gs-title-play-sub { margin-top: 1px; font-size: 12px; font-weight: 600; opacity: 0.88; font-variant-numeric: tabular-nums; }
@keyframes gsTitlePlayGlow {
    0%, 100% { box-shadow: 0 8px 22px rgba(118, 107, 255, 0.45); }
    50% { box-shadow: 0 8px 30px rgba(134, 76, 255, 0.75), 0 0 0 4px rgba(134, 76, 255, 0.15); }
}
.gs-title-modes { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; width: 100%; }
.gs-title-mode { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; flex: 1 1 170px; max-width: 210px; cursor: pointer; padding: 10px 14px 10px 46px; font-family: inherit; text-align: left; border-radius: 14px; border: 1.5px solid rgba(118, 107, 255, 0.35); color: #34363E; color: var(--body-text-color); background: rgba(118, 107, 255, 0.06); background-repeat: no-repeat; background-position: 10px center; background-size: 28px; transition: transform .15s ease-in-out, border-color .15s ease-in-out, background-color .15s ease-in-out; }
    .gs-title-mode:hover { transform: translateY(-2px); border-color: #766BFF; border-color: var(--input-button-background-color); background-color: rgba(118, 107, 255, 0.12); }
    .gs-title-mode:active { transform: scale(0.97); }
    .gs-title-mode-name { font-size: 15px; font-weight: 700; }
    .gs-title-mode-status { font-size: 12px; opacity: 0.75; }
    .gs-title-mode-badge { margin-top: 3px; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 700; color: #FFF; background: linear-gradient(90deg, #FF8A3D, #E5484D); }
.gs-title-best { font-size: 13px; opacity: 0.8; font-variant-numeric: tabular-nums; }
    .gs-title-best strong { font-size: 15px; }
.gs-title-options { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 4px; }
.gs-title-option { cursor: pointer; padding: 5px 12px; font-family: inherit; font-size: 13px; border: 0; border-radius: 16px; color: #34363E; color: var(--body-text-color); background: transparent; opacity: 0.8; transition: background-color .15s ease-in-out, opacity .15s ease-in-out; }
    .gs-title-option:hover { opacity: 1; background-color: rgba(0, 0, 0, 0.08); background-color: var(--link-hover-background-color); }
#gsTitleScreen button:focus-visible { outline: 2px solid #864cff; outline-offset: 3px; }

/* Leaving: the chosen button pulses while everything else drops away and the logo zooms off. */
#gsTitleScreen.gs-title-leaving { pointer-events: none; }
    #gsTitleScreen.gs-title-leaving .gs-title-logo { animation: gsTitleLogoOut .5s ease-in forwards; }
    #gsTitleScreen.gs-title-leaving .gs-title-tagline,
    #gsTitleScreen.gs-title-leaving .gs-title-best,
    #gsTitleScreen.gs-title-leaving .gs-title-options,
    #gsTitleScreen.gs-title-leaving button:not(.gs-title-chosen) { opacity: 0; transform: translateY(18px) scale(0.94); transition: opacity .25s ease-in, transform .3s ease-in; }
    #gsTitleScreen.gs-title-leaving .gs-title-chosen { animation: gsTitleChosen .5s ease-out forwards; }
@keyframes gsTitleLogoOut {
    0% { opacity: 1; transform: scale(1); }
    30% { opacity: 1; transform: scale(0.94); }
    100% { opacity: 0; transform: scale(1.6) translateY(-30px); filter: blur(6px); }
}
@keyframes gsTitleChosen {
    0% { transform: scale(1); }
    35% { transform: scale(1.12); box-shadow: 0 0 0 6px rgba(134, 76, 255, 0.35), 0 10px 34px rgba(134, 76, 255, 0.7); }
    100% { transform: scale(1.06); box-shadow: 0 0 0 14px rgba(134, 76, 255, 0), 0 10px 34px rgba(134, 76, 255, 0.5); }
}

/* ---- The wipe ----
   Each tile's --d is its place along the diagonal; its colour (and letter, if any) is set by gameShell.js.
   Above the pinned sidebar (#side-bar-menu, z-index 10000 in Site.css) so it covers the whole screen. */
#gsTitleWipe { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 10001; display: grid; gap: 6px; padding: 6px; box-sizing: border-box; overflow: hidden; pointer-events: all; }
/* Fills the gaps between the tiles once they're mostly in, so the swap underneath never shows through. */
#gsTitleWipe::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: #EBEFF7; background: var(--body-background); animation: gsWipeBackdropIn .25s ease-out calc(var(--wipe-spread) * 0.6) both; }
    #gsTitleWipe.gs-wipe-out::before { animation: gsWipeBackdropOut .2s ease-in both; }
@keyframes gsWipeBackdropIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes gsWipeBackdropOut {
    from { opacity: 1; }
    to { opacity: 0; }
}
.gs-wipe-cell { display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 30%; font-size: clamp(16px, 3.6vw, 28px); font-weight: 800; color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); user-select: none; transform: scale(0) rotate(90deg); animation: gsWipeIn .32s cubic-bezier(.3, 1.3, .5, 1) var(--d) both; }
    #gsTitleWipe.gs-wipe-out .gs-wipe-cell { animation: gsWipeOut .32s cubic-bezier(.5, 0, .7, .4) var(--d) both; }
@keyframes gsWipeIn {
    0% { transform: scale(0) rotate(90deg); border-radius: 50%; }
    70% { transform: scale(1.06) rotate(-6deg); border-radius: 30%; }
    100% { transform: scale(1) rotate(0deg); border-radius: 22%; }
}
@keyframes gsWipeOut {
    0% { transform: scale(1) rotate(0deg); border-radius: 22%; opacity: 1; }
    100% { transform: scale(0) rotate(-90deg); border-radius: 50%; opacity: 0.6; }
}
.gs-wipe-label { position: absolute; left: 50%; top: 50%; padding: 14px 34px; border-radius: 40px; white-space: nowrap; font-size: clamp(24px, 6vw, 40px); font-weight: 800; letter-spacing: 0.5px; color: #34363E; background: #FFF; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35), 0 0 0 6px rgba(255, 255, 255, 0.35); transform: translate(-50%, -50%) scale(0); animation: gsWipeLabelIn .45s cubic-bezier(.2, 1.5, .4, 1) var(--d) both; }
    #gsTitleWipe.gs-wipe-out .gs-wipe-label { animation: gsWipeLabelOut .3s ease-in both; }
@keyframes gsWipeLabelIn {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.2) rotate(-8deg); }
    to { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
}
@keyframes gsWipeLabelOut {
    from { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    to { opacity: 0; transform: translate(-50%, -50%) scale(1.5); filter: blur(4px); }
}

/* ---- App version header ----
   No header bar - the <header> is moved into the card on screen (GameShell.moveAppHeader). Kept at its
   usual 62px height because the Theme, account and notification dropdowns open at top: 65px below it.
   The bar is pulled up into the card's top padding; its transparent lower edge lets taps fall through.
   flow-root keeps its floated buttons from pushing the content below sideways. */
body.gs-header-in-card #main-container { padding-top: 0; }
header.gs-card-header { position: relative !important; display: flow-root !important; top: auto; left: auto; right: auto; width: auto; min-width: 0; height: 62px; margin: -20px -15px -10px -15px; z-index: 20; text-align: left; pointer-events: none; background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; box-shadow: none !important; }
    header.gs-card-header > * { pointer-events: auto; }
    header.gs-card-header .header-logotitle-holder { display: none !important; }
#gsTitleScreen > header.gs-card-header { margin: 0 0 -10px 0; }

/* ---- Dock ----
   The floating tab bar (#gsDock) on screens wider than 775px: Menu, then the game's modes, the active one
   in a sliding bubble. It replaces the game's own mode switch (.gs-mode-holder) at the top of the card. */
.gs-mode-holder { display: none !important; }
/*body.gs-has-dock #main-container { padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important; }*/
#gsDock { position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 900; display: flex; align-items: center; gap: 4px; padding: 6px; border-radius: 28px; box-sizing: border-box; max-width: calc(100vw - 20px); transform: translateX(-50%); color: #34363E; color: var(--body-text-color); background: rgba(255, 255, 255, 0.74); background: var(--game-shell-dock-background); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 12px 32px rgba(20, 16, 60, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.35); animation: gsDockIn .5s cubic-bezier(.2, 1.3, .4, 1) .15s both; }
body.pin-sidebar-menu #gsDock { left: calc(50% + 140px); }
.gs-title-open #gsDock { display: none; }
@keyframes gsDockIn {
    from { opacity: 0; transform: translate(-50%, 30px) scale(0.9); }
    to { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
#gsDock button { font-family: inherit; border: 0; background: transparent; cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; }
    #gsDock button:focus-visible { outline: 2px solid #864cff; outline-offset: 2px; }
.gs-dock-menu { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; color: inherit !important; transition: background-color .2s ease-in-out, transform .15s ease-in-out; }
    .gs-dock-menu::before { content: ""; display: block; width: 22px; height: 22px; margin: 0 auto; background-color: currentColor; -webkit-mask: url("../../Assets/Games/Images/home.svg") center / contain no-repeat; mask: url("../../Assets/Games/Images/home.svg") center / contain no-repeat; }
    .gs-dock-menu:hover { background-color: rgba(0, 0, 0, 0.08) !important; background-color: var(--link-hover-background-color) !important; }
    .gs-dock-menu:active { transform: scale(0.9); }
.gs-dock-divider { flex: 0 0 auto; width: 1px; height: 26px; margin: 0 2px; background: currentColor; opacity: 0.15; }
.gs-dock-tabs { position: relative; display: flex; gap: 2px; }
#gsDockBubble { position: absolute; top: 0; bottom: 0; left: 0; width: 0; border-radius: 22px; pointer-events: none; background: linear-gradient(135deg, #8B82FF, #6E79F9); box-shadow: 0 6px 16px rgba(110, 121, 249, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.35); transition: transform .45s cubic-bezier(.3, 1.35, .45, 1), width .45s cubic-bezier(.3, 1.35, .45, 1), background .3s ease, box-shadow .3s ease; }
.gs-dock-tab { position: relative; z-index: 1; display: flex; align-items: center; gap: 7px; height: 44px; padding: 0 16px 0 12px; border-radius: 22px; font-size: 14px; font-weight: 700; color: inherit !important; opacity: 0.72; transition: opacity .2s ease, color .2s ease, transform .15s ease-in-out; }
    .gs-dock-tab img { width: 22px; height: 22px; object-fit: contain; transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); }
    .gs-dock-tab:hover { opacity: 1; }
    .gs-dock-tab:active { transform: scale(0.94); }
    .gs-dock-tab.gs-dock-active { opacity: 1; color: #FFF !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }
        .gs-dock-tab.gs-dock-active img { transform: scale(1.15) rotate(-6deg); }
/* Phones: icon over a small label. */
@media (max-width: 520px) {
    #gsDock { gap: 2px; padding: 5px; }
    .gs-dock-tab { flex-direction: column; justify-content: center; gap: 2px; height: 52px; min-width: 70px; padding: 0 10px; font-size: 11px; }
    .gs-dock-menu { width: 42px; height: 42px; }
}

/* 775px and under: no floating dock. The browser version moves it into the card in place of the game's own
   mode switch (full width, icons beside the labels); the app version uses the layout's menu bar, which is
   hidden on the title screen - its buttons are the way in. */
@media screen and (max-width: 775px) {
    #gsDock:not(.gs-dock-inline) { display: none !important; }
    body:not([data-mode="spa"]) .gs-mode-holder { display: block !important; }
}
.gs-mode-holder.gs-holds-dock { padding: 0 !important; margin-bottom: 14px !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; }
    .gs-mode-holder.gs-holds-dock > :not(#gsDock) { display: none !important; }
#gsDock.gs-dock-inline { display: flex !important; position: relative; left: auto !important; bottom: auto; z-index: auto; width: 100%; max-width: 100%; transform: none; text-align: left; box-shadow: 0 6px 18px rgba(20, 16, 60, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.35); animation: none; }
    #gsDock.gs-dock-inline .gs-dock-tabs { flex: 1 1 auto; min-width: 0; }
    #gsDock.gs-dock-inline .gs-dock-tab { flex: 1 1 0; flex-direction: row; justify-content: center; gap: 5px; height: 44px; min-width: 0; padding: 0 10px 0 8px; font-size: 13px; }
    #gsDock.gs-dock-inline .gs-dock-tab img { width: 20px; height: 20px; }
@media (max-width: 360px) {
    #gsDock.gs-dock-inline .gs-dock-tab { gap: 4px; padding: 0 7px 0 5px; font-size: 12px; }
    #gsDock.gs-dock-inline .gs-dock-menu { width: 38px; height: 38px; }
}
body[data-mode="spa"].gs-title-showing #menu-bar { display: none !important; }

@media (prefers-reduced-motion: reduce) {
    .gs-title-logo, #gsTitlePlayBtn, #gsDock { animation: none; }
    #gsTitlePlayBtn, .gs-title-mode, .gs-title-option, #gsDockBubble, .gs-dock-tab, .gs-dock-tab img, .gs-dock-menu { transition: none; }
}

/* ---- Menu button (single-mode games) ----
   Games with only one mode have no dock of tabs - a small Menu pill on the game card takes the title screen
   back instead (it calls the game's GameShell showTitle). */
.gs-menu-btn { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; user-select: none; padding: 5px 12px 5px 9px; font-family: inherit; font-size: 13px; font-weight: 600; border: 0; border-radius: 16px; color: #34363E; color: var(--body-text-color); background-color: rgba(0, 0, 0, 0.05); background-color: var(--link-hover-background-color); transition: transform .15s ease-in-out; }
    .gs-menu-btn::before { content: ""; width: 15px; height: 15px; background-color: currentColor; -webkit-mask: 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.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11.5 12 4l9 7.5'/%3E%3Cpath d='M5.5 10v9.5h13V10'/%3E%3C/svg%3E") center / contain no-repeat; mask: 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.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11.5 12 4l9 7.5'/%3E%3Cpath d='M5.5 10v9.5h13V10'/%3E%3C/svg%3E") center / contain no-repeat; }
    .gs-menu-btn:hover { transform: translateY(-1px); }
    .gs-menu-btn:active { transform: scale(0.94); }
    .gs-menu-btn:focus-visible { outline: 2px solid #864cff; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
    .gs-menu-btn { transition: none; }
}

/* ---- Game cards ----
   On the game pages (the only ones that load this file) the cards are see-through: no fill, no gradient
   edge (Site.css's ::before), no shadow. The frosted blur stays, but on the ::before instead of the card
   itself, masked by a radial gradient - full strength over the middle of the card where the text is,
   fading out toward the edges so the card melts into the background rather than ending at a hard line.
   isolation keeps the blurred layer behind the card's content (z-index: -1) without escaping the card.
   The page's title bar cards and anything inside a modal keep their usual look. */
#main-container .section-item:not(.title-section-bar):not(#ffGameHolder):not(.ffTitleScreen):not(#ffAboutTitle):not(#ffHelpHolderSectionPanel):not(#ffSpectateHolderSectionPanel):not(.modal-main *):not(.gs-title-keep) { background: var(--game-shell-section-item-background) !important; box-shadow: none !important; backdrop-filter: blur(25px) !important; }
    #main-container .section-item:not(.title-section-bar):not(.modal-main *):not(.gs-title-keep)::before { display: none; }

@media screen and (max-width: 810px) {
    #main-container .section-item:not(.title-section-bar):not(#ffGameHolder):not(.ffTitleScreen):not(#ffAboutTitle):not(#ffHelpHolderSectionPanel):not(#ffSpectateHolderSectionPanel):not(.modal-main *):not(.gs-title-keep) { isolation: isolate; border: 0 !important; border-radius: 0 !important; background: var(--game-shell-section-item-background) !important; box-shadow: none !important; }
        #main-container .section-item:not(.title-section-bar):not(.modal-main *):not(.gs-title-keep)::before { content: "" !important; display: block !important; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; height: auto; padding: 0; border-radius: inherit; opacity: 1; pointer-events: none; background: none !important; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); -webkit-mask: radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 100%); mask: radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 100%); }
    .gs-title-keep { border-radius: 0 !important; }
    #main-container .inner-container { padding: 0 0 55px 0 !important; }
}

/* Light theme: the see-through cards let a bright background through, so the title screen's smaller text
   (tagline, best score, mode status, option links) shows at full strength rather than faded. */
body[data-theme="Default"] .gs-title-tagline,
body[data-theme="Default"] .gs-title-best,
body[data-theme="Default"] .gs-title-mode-status,
body[data-theme="Default"] .gs-title-option { opacity: 1; }

/* The About sections' prose at a comfortable reading width - full-width lines on a desktop card run to
   about 130 characters. */
.nm-about-lede, .nm-about-game p,
.sw-about-lede, .sw-about-game p,
.sb-about-lede, .sb-about-game p,
.ff-about-lede, .ff-about-game p { max-width: 85ch; }

/* ---- Tabletop ----
   The game pages' look: every card is a felt play surface in a wooden rim, the title screen's Play button is
   a chunky press-down key, the mode buttons are cream cardboard tokens and the dock is a wooden tray of chip
   tabs. Game pieces (Number Connect's tiles and so on) get their thickness in each game's own stylesheet.
   The tokens live on each game's wrapper, so the felt can take the game's colour; the light theme gets a
   pale wood and pale felt. Comes after the see-through card rules above and replaces them (the extra
   :not(.gs-flat) matches their specificity; add gs-flat to a card that should stay plain). */
#game_wrapper, #secret_word_wrapper, #shellBreachWrapper, #ffWrapper, #luckySlotsApp {
    --tt-wood: linear-gradient(160deg, #9A6A42 0%, #6E4628 55%, #8A5C38 100%);
    --tt-wood-hi: rgba(255, 220, 180, 0.35);
    --tt-felt: #2A2460;
    --tt-tray: #1C1844;
    --tt-felt-shade: 0.45;
    --tt-drop: 0.5;
    --tt-cream: #F4E9D8;
    --tt-cream-hover: #FBF3E6;
    --tt-cream-edge: #B99A74;
    --tt-cream-text: #3A2716;
    --tt-cream-soft: #6B5440;
    --tt-action: #8A5CFF;
    --tt-action-edge: #4F2BBF;
}
#secret_word_wrapper { --tt-felt: #1F3550; --tt-tray: #13243A; }
#shellBreachWrapper { --tt-felt: #12332B; --tt-tray: #0A231D; }
#ffWrapper { --tt-felt: #24482C; --tt-tray: #17331D; }
#luckySlotsApp { --tt-felt: #4A1C2C; --tt-tray: #33111D; }
body[data-theme="Default"] #game_wrapper, body[data-theme="Default"] #secret_word_wrapper, body[data-theme="Default"] #shellBreachWrapper, body[data-theme="Default"] #ffWrapper, body[data-theme="Default"] #luckySlotsApp {
    --tt-wood: linear-gradient(160deg, #DDB98E 0%, #BE8F5F 55%, #D3AA7B 100%);
    --tt-wood-hi: rgba(255, 240, 220, 0.6);
    --tt-felt: #ECE8FA;
    --tt-tray: #DAD4F3;
    --tt-felt-shade: 0.12;
    --tt-drop: 0.22;
}
body[data-theme="Default"] #secret_word_wrapper { --tt-felt: #E4EDF7; --tt-tray: #CFDCEB; }
body[data-theme="Default"] #shellBreachWrapper { --tt-felt: #E3F1EA; --tt-tray: #CBE2D6; }
body[data-theme="Default"] #ffWrapper { --tt-felt: #E8F3E0; --tt-tray: #D3E6C5; }
body[data-theme="Default"] #luckySlotsApp { --tt-felt: #F7E8EC; --tt-tray: #EBCFD8; }

/* The table: felt inside a wooden rim (the border, painted with the wood), sunk a little at the edges. */
#main-container .section-item:not(.title-section-bar):not(#ffGameHolder):not(.ffTitleScreen):not(#ffAboutTitle):not(#ffHelpHolderSectionPanel):not(#ffSpectateHolderSectionPanel):not(.modal-main *):not(.gs-flat) { border: 10px solid transparent !important; border-radius: 30px !important; background: linear-gradient(var(--tt-felt), var(--tt-felt)) padding-box, var(--tt-wood) border-box !important; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.25), inset 0 10px 30px rgba(0, 0, 0, var(--tt-felt-shade)), 0 18px 40px rgba(0, 0, 0, var(--tt-drop)) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
    #main-container .section-item:not(.title-section-bar):not(.modal-main *):not(.gs-flat)::before { display: none !important; }
@media screen and (max-width: 810px) {
    #main-container .section-item:not(.title-section-bar):not(.modal-main *):not(.gs-flat) { border-width: 6px !important; border-radius: 22px !important; }
    #main-container .inner-container { padding: 0 0 55px 0 !important; }
}

/* Title screen: a press-down Play key, cream cardboard mode tokens, and the game font for the big labels. */
.gs-title-play-label, .gs-title-mode-name, .gs-dock-tab, .gs-menu-btn, .gs-wipe-label { font-family: Fredoka, "Open Sans", sans-serif; }
#gsTitleScreen #gsTitlePlayBtn { border-radius: 18px; background: var(--tt-action); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), 0 6px 0 var(--tt-action-edge), 0 12px 18px rgba(0, 0, 0, 0.35); animation: none; }
    #gsTitleScreen #gsTitlePlayBtn:hover { transform: translateY(-1px); }
    #gsTitleScreen #gsTitlePlayBtn:active { transform: translateY(4px); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.35), 0 2px 0 var(--tt-action-edge), 0 4px 8px rgba(0, 0, 0, 0.3); }
    .gs-title-play-label { font-weight: 700; font-size: 24px; }
#gsTitleScreen .gs-title-mode { border: 0; background-color: var(--tt-cream); color: var(--tt-cream-text); box-shadow: 0 4px 0 var(--tt-cream-edge), 0 8px 14px rgba(0, 0, 0, 0.3); }
    #gsTitleScreen .gs-title-mode:hover { background-color: var(--tt-cream-hover); transform: translateY(-2px); }
    #gsTitleScreen .gs-title-mode:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--tt-cream-edge), 0 3px 6px rgba(0, 0, 0, 0.25); }
    #gsTitleScreen .gs-title-mode-name { font-weight: 600; font-size: 16px; }
    #gsTitleScreen .gs-title-mode-status { color: var(--tt-cream-soft); opacity: 1; }
.gs-title-logo { filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.45)); }

/* The dock: a wooden tray; the active tab is a raised chip in the mode's colour. */
#gsDock { color: #F4E9D8; background: var(--tt-wood) !important; border-radius: 20px; padding: 7px; box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5), inset 0 2px 0 var(--tt-wood-hi) !important; backdrop-filter: none; -webkit-backdrop-filter: none; }
    #gsDock .gs-dock-divider { background: rgba(0, 0, 0, 0.35); opacity: 1; width: 2px; }
    #gsDock .gs-dock-tab, #gsDock .gs-dock-menu { border-radius: 13px; }
    #gsDock .gs-dock-tab { font-weight: 600; opacity: 0.9; }
    #gsDockBubble { border-radius: 13px; }
    #gsDock .gs-dock-menu:hover { background-color: rgba(0, 0, 0, 0.18) !important; }

/* Single-mode games' Menu pill: a cream token. */
.gs-menu-btn { background-color: var(--tt-cream); color: var(--tt-cream-text); box-shadow: 0 3px 0 var(--tt-cream-edge); }
    .gs-menu-btn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--tt-cream-edge); }

/* The rim takes the game's colour: a deeper, glossy shade of its own felt (lighter streaks across it for the
   lacquer), rather than brown wood. The dock's tray uses the same token, so it matches too. Light theme gets
   soft tints of the same colours, with dark text on the dock to stay readable. */
#game_wrapper { --tt-wood: linear-gradient(160deg, #6A5ED6 0%, #322A86 48%, #5245BA 100%); --tt-wood-hi: rgba(255, 255, 255, 0.28); }
#secret_word_wrapper { --tt-wood: linear-gradient(160deg, #4A7DB8 0%, #1C3558 48%, #39679E 100%); --tt-wood-hi: rgba(255, 255, 255, 0.28); }
#shellBreachWrapper { --tt-wood: linear-gradient(160deg, #349A7A 0%, #11382C 48%, #2A7E63 100%); --tt-wood-hi: rgba(255, 255, 255, 0.25); }
#ffWrapper { --tt-wood: linear-gradient(160deg, #5BA653 0%, #1E4520 48%, #478A40 100%); --tt-wood-hi: rgba(255, 255, 255, 0.25); }
#luckySlotsApp { --tt-wood: linear-gradient(160deg, #B2486B 0%, #4C1426 48%, #933556 100%); --tt-wood-hi: rgba(255, 255, 255, 0.25); }
body[data-theme="Default"] #game_wrapper { --tt-wood: linear-gradient(160deg, #C7BEF6 0%, #8F80E0 48%, #B3A7F0 100%); --tt-wood-hi: rgba(255, 255, 255, 0.6); }
body[data-theme="Default"] #secret_word_wrapper { --tt-wood: linear-gradient(160deg, #B6D0F0 0%, #7EA3D3 48%, #A2C1E8 100%); --tt-wood-hi: rgba(255, 255, 255, 0.6); }
body[data-theme="Default"] #shellBreachWrapper { --tt-wood: linear-gradient(160deg, #ACDDCA 0%, #67B595 48%, #94CFB8 100%); --tt-wood-hi: rgba(255, 255, 255, 0.6); }
body[data-theme="Default"] #ffWrapper { --tt-wood: linear-gradient(160deg, #BFE2AE 0%, #80BA68 48%, #A9D495 100%); --tt-wood-hi: rgba(255, 255, 255, 0.6); }
body[data-theme="Default"] #luckySlotsApp { --tt-wood: linear-gradient(160deg, #F0BFCD 0%, #D07E97 48%, #E7A8BA 100%); --tt-wood-hi: rgba(255, 255, 255, 0.6); }
body[data-theme="Default"] #gsDock { color: #2A2540; }
    body[data-theme="Default"] #gsDock .gs-dock-tab.gs-dock-active { color: #FFFFFF !important; }
    body[data-theme="Default"] #gsDock .gs-dock-divider { background: rgba(42, 37, 64, 0.25); }

/* ---- Wipe styles ----
   Each game's wipe.style (gameShell.js) puts gs-wipe-<style> on #gsTitleWipe; plain tiles (Number Connect)
   use the rules in The wipe above. Each style covers the screen in the same time. --wipe-ground is the
   game's felt, read off its wrapper. */
#gsTitleWipe.gs-wipe-letters::before, #gsTitleWipe.gs-wipe-fruit::before, #gsTitleWipe.gs-wipe-reels::before { background: var(--wipe-ground, var(--body-background)); }

/* Letters (Word Snaps) - cream letter tiles flip over on their upright edge. */
.gs-wipe-letters .gs-wipe-cell { border-radius: 14%; background: linear-gradient(180deg, #FFF8E6 0%, #F1E3C2 100%); color: #3A2F1F; text-shadow: none; font-family: Fredoka, "Open Sans", sans-serif; font-weight: 600; box-shadow: inset 0 -4px 0 rgba(120, 90, 40, 0.28), 0 2px 4px rgba(0, 0, 0, 0.25); transform: perspective(400px) rotateY(-90deg); animation: gsWipeFlipIn .34s cubic-bezier(.3, 1.25, .5, 1) var(--d) both; }
    #gsTitleWipe.gs-wipe-out.gs-wipe-letters .gs-wipe-cell { animation: gsWipeFlipOut .3s ease-in var(--d) both; }
@keyframes gsWipeFlipIn {
    from { transform: perspective(400px) rotateY(-90deg); }
    to { transform: perspective(400px) rotateY(0deg); }
}
@keyframes gsWipeFlipOut {
    from { transform: perspective(400px) rotateY(0deg); opacity: 1; }
    to { transform: perspective(400px) rotateY(90deg); opacity: 0.6; }
}

/* Terminal (Shell Breach) - green hex flickers on down each column, under faint scanlines, then each
   character flares and collapses like a CRT switching off. */
#gsTitleWipe.gs-wipe-terminal { gap: 0; padding: 0; }
    #gsTitleWipe.gs-wipe-terminal::before { background: #04100B; }
    #gsTitleWipe.gs-wipe-terminal::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.3) 0 1px, transparent 1px 3px); animation: gsWipeBackdropIn .25s ease-out calc(var(--wipe-spread) * 0.6) both; }
    #gsTitleWipe.gs-wipe-terminal.gs-wipe-out::after { animation: gsWipeBackdropOut .2s ease-in both; }
.gs-wipe-terminal .gs-wipe-cell { border-radius: 0; background: #04100B; color: #1FC97A; font-family: Consolas, "Courier New", monospace; font-weight: 700; text-shadow: 0 0 8px rgba(31, 201, 122, 0.8); transform: none; opacity: 0; animation: gsWipeBootIn .3s linear var(--d) both; }
    .gs-wipe-terminal .gs-wipe-cell:nth-child(3n) { color: #0E8A5A; text-shadow: none; }
    .gs-wipe-terminal .gs-wipe-cell:nth-child(7n) { color: #9DFFCF; }
    #gsTitleWipe.gs-wipe-out.gs-wipe-terminal .gs-wipe-cell { animation: gsWipeBootOut .3s ease-in var(--d) both; }
@keyframes gsWipeBootIn {
    0% { opacity: 0; }
    30% { opacity: 1; filter: brightness(2); }
    45% { opacity: 0.25; }
    60%, 100% { opacity: 1; filter: none; }
}
@keyframes gsWipeBootOut {
    0% { opacity: 1; transform: none; }
    40% { opacity: 1; filter: brightness(2); transform: scaleY(1.2); }
    100% { opacity: 0; transform: scaleY(0.05); }
}
#gsTitleWipe.gs-wipe-terminal .gs-wipe-label { border-radius: 6px; font-family: Consolas, "Courier New", monospace; letter-spacing: 1px; color: #1FC97A; background: #04100B; text-shadow: 0 0 10px rgba(31, 201, 122, 0.8); box-shadow: 0 0 0 2px #1FC97A, 0 0 28px rgba(31, 201, 122, 0.45); }
    #gsTitleWipe.gs-wipe-terminal .gs-wipe-label::before { content: "> "; }
    #gsTitleWipe.gs-wipe-terminal .gs-wipe-label::after { content: "_"; animation: gsWipeCaret .8s steps(1) infinite; }
@keyframes gsWipeCaret {
    50% { opacity: 0; }
}

/* Fruit (Fruit Frenzy) - fruit falls in from above and squashes as it lands, bottom row first like a
   board refilling, then pops away. */
.gs-wipe-fruit .gs-wipe-cell { overflow: visible; border-radius: 0; background: transparent; transform: translateY(-110vh); animation: gsWipeDropIn .34s ease-in var(--d) both; }
    .gs-wipe-fruit .gs-wipe-cell svg, .gs-wipe-fruit .gs-wipe-cell img { width: 84%; height: 84%; filter: drop-shadow(0 3px 2px rgba(0, 0, 0, 0.3)); }
    #gsTitleWipe.gs-wipe-out.gs-wipe-fruit .gs-wipe-cell { animation: gsWipePop .3s ease-in var(--d) both; }
@keyframes gsWipeDropIn {
    0% { transform: translateY(-110vh); }
    70% { transform: translateY(0) scale(1.12, 0.84); }
    85% { transform: translateY(-8%) scale(0.95, 1.05); }
    100% { transform: none; }
}
@keyframes gsWipePop {
    0% { transform: none; opacity: 1; }
    40% { transform: scale(1.25); opacity: 1; }
    100% { transform: scale(0); opacity: 0; }
}

/* Reels (Lucky Slots) - each column is a reel: its strip blurs down and stops with a bounce, left to
   right, then spins on out of sight. */
#gsTitleWipe.gs-wipe-reels { display: flex; }
.gs-wipe-reel { position: relative; flex: 1; overflow: hidden; border-radius: 10px; opacity: 0; animation: gsWipeBackdropIn .1s linear var(--d) both; }
    .gs-wipe-reel::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 3px #D9A933, inset 0 26px 22px -14px rgba(0, 0, 0, 0.45), inset 0 -26px 22px -14px rgba(0, 0, 0, 0.45); }
.gs-wipe-strip { display: flex; flex-direction: column; transform: translateY(calc(-1 * var(--spin))); animation: gsWipeSpinIn .42s cubic-bezier(.25, .7, .35, 1.12) var(--d) both; }
    #gsTitleWipe.gs-wipe-out .gs-wipe-strip { animation: gsWipeSpinOut .32s cubic-bezier(.5, 0, .9, .5) var(--d) both; }
.gs-wipe-reels .gs-wipe-cell { flex: none; border-radius: 0; background: #FFF8E6; color: #3A2F1F; text-shadow: none; font-size: clamp(28px, 6vw, 52px); border-bottom: 2px solid rgba(120, 90, 40, 0.15); box-sizing: border-box; transform: none; animation: none; }
    #gsTitleWipe.gs-wipe-out.gs-wipe-reels .gs-wipe-cell { animation: none; }
    .gs-wipe-reels .gs-wipe-seven { font-family: Fredoka, "Open Sans", sans-serif; font-weight: 700; color: #E53935; text-shadow: 0 3px 0 #8E1B1B; }
@keyframes gsWipeSpinIn {
    0% { transform: translateY(calc(-1 * var(--spin))); filter: blur(3px); }
    70% { filter: blur(1px); }
    100% { transform: translateY(0); filter: none; }
}
@keyframes gsWipeSpinOut {
    from { transform: translateY(0); }
    to { transform: translateY(calc(var(--spin) / 2)); filter: blur(2px); }
}
#gsTitleWipe.gs-wipe-reels .gs-wipe-label { color: #5A1A00; background: linear-gradient(180deg, #FFE27A 0%, #F5B700 100%); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35), 0 0 0 4px #8E1B1B, 0 0 0 8px rgba(255, 226, 122, 0.5); }