/* =========================================================
   /test design overrides (isolated preview) — v5
   ========================================================= */

/* ---------- 1. Background: faint waffle texture under soft warm gradient ---------- */
body.body--light {
    background-color: #f4e7d1 !important;
    background-image:
        radial-gradient(125% 95% at 50% -10%, rgba(253, 247, 236, .90) 0%, rgba(246, 233, 213, .90) 55%, rgba(238, 221, 198, .92) 100%),
        url(../img/background.c2fd28c7.jpg) !important;
    background-attachment: fixed, fixed !important;
    background-size: auto, auto !important;
    background-repeat: repeat, repeat !important;
}
body.body--dark {
    background-color: #14161d !important;
    background-image:
        radial-gradient(125% 95% at 50% -10%, rgba(35, 38, 47, .90) 0%, rgba(25, 28, 36, .92) 50%, rgba(16, 18, 26, .93) 100%),
        url(../img/background_dark.7278b468.jpg) !important;
    background-attachment: fixed, fixed !important;
    background-size: auto, auto !important;
    background-repeat: repeat, repeat !important;
}

/* ---------- 2. Board card: lower contrast vs background ---------- */
.board {
    background: #fbf6ec !important;           /* warm off-white, softer than pure white */
    border: 0 !important;
    border-radius: 26px !important;
    padding: 22px !important;
    box-shadow: 0 10px 28px rgba(120, 80, 20, .12), 0 2px 6px rgba(120, 80, 20, .06) !important;
}
.body--dark .board {
    background: #282b36 !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .45) !important;
}

/* ---------- 3. Tiles: subtle depth (keep original empty-gap circles) ----------
   IMPORTANT: never apply a CSS `transform` (or transition it) to .board__item.
   The tiles are dragged via SortableJS in forceFallback mode, which positions
   the dragged "ghost" with its own transform; any transform/transition on the
   tile desyncs the ghost from the cursor and makes tiles feel undraggable. */
.board__item {
    transition: box-shadow .12s ease !important;
    font-weight: 700 !important;
}
.board__item:not(.board__item_hidden) { cursor: pointer !important; }
/* Bottom "depth" edge tinted to each tile's OWN colour (a darker shade of the
   tile), instead of one flat black shadow shared by every tile. The three tile
   states target disjoint sets (correct / wrong / everything-else), so there's no
   specificity conflict between them. */
.board__item_correct { box-shadow: 0 3px 0 #5f8f1a !important; }           /* darker green  */
.board__item_wrong   { box-shadow: 0 3px 0 #d1850a !important; }           /* darker amber  */
.board__item:not(.board__item_hidden):not(.board__item_correct):not(.board__item_wrong):not(.board__item_disabled) {
    box-shadow: 0 3px 0 #9a8d6c !important;                                 /* darker taupe  */
}
/* pressed: shallower edge, same tint */
.board__item_correct:active { box-shadow: 0 1px 0 #5f8f1a !important; }
.board__item_wrong:active   { box-shadow: 0 1px 0 #d1850a !important; }
.board__item:not(.board__item_hidden):not(.board__item_correct):not(.board__item_wrong):not(.board__item_disabled):active {
    box-shadow: 0 1px 0 #9a8d6c !important;
}
/* dark mode: the "everything-else" tiles are a darker taupe, so is their edge */
.body--dark .board__item:not(.board__item_hidden):not(.board__item_correct):not(.board__item_wrong):not(.board__item_disabled) {
    box-shadow: 0 3px 0 #6b644f !important;
}
.body--dark .board__item:not(.board__item_hidden):not(.board__item_correct):not(.board__item_wrong):not(.board__item_disabled):active {
    box-shadow: 0 1px 0 #6b644f !important;
}
/* (no .board__item_hidden override — faint gap circles are restored) */

/* Hinted cell: the hint ring is a separate overlay drawn on top of the tile, so
   without this the tile's OWN amber/green/taupe depth edge keeps showing through
   underneath the teal ring. Give the overlay a matching depth edge tinted to a
   darker shade of the hint colour (teal) — same logic as every tile edge above —
   so the bottom edge reads as part of the hint, not the tile beneath it. */
.board-hints .board-hint {
    box-shadow: inset 0 0 0 4px #2f7d74, 0 3px 0 #26625a, 0 0 14px rgba(47, 125, 116, .55) !important;
}

/* ---------- 4. Header buttons: compact single-row pills, polished ---------- */
.header { flex-wrap: nowrap !important; gap: 7px !important; padding-top: 4px !important; }
.header__button {
    border-radius: 999px !important;
    padding: 7px 14px !important;
    font-size: 12.5px !important;
    font-weight: 800 !important;
    letter-spacing: .4px !important;
    white-space: nowrap !important;
    min-width: 0 !important;
    background: #fffdf8 !important;
    color: #6b6350 !important;
    border: 1px solid rgba(120, 80, 20, .10) !important;
    box-shadow: 0 2px 7px rgba(120, 80, 20, .10) !important;
    transition: transform .1s ease, box-shadow .18s ease, background .18s ease, color .18s ease !important;
}
.header__button:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(120, 80, 20, .17) !important;
    color: #4a4436 !important;
}
.header__button:active { transform: translateY(0) scale(.97) !important; }
.header__button_active,
.header__button_active:hover {
    background: linear-gradient(180deg, #90c752, #78b13b) !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 4px 14px rgba(121, 178, 60, .45) !important;
}
.body--dark .header__button { background: #282b36 !important; color: #cfd2db !important; border-color: rgba(255, 255, 255, .06) !important; box-shadow: 0 2px 7px rgba(0, 0, 0, .4) !important; }
.body--dark .header__button:hover { color: #fff !important; }
.body--dark .header__button_active,
.body--dark .header__button_active:hover { background: linear-gradient(180deg, #90c752, #78b13b) !important; color: #12121a !important; }

/* ---------- 5. Footer selectors: matching pills ---------- */
.footer__item .select__header {
    border-radius: 999px !important;
    padding: 9px 18px !important;
    background: #fbf6ec !important;
    box-shadow: 0 2px 8px rgba(120, 80, 20, .10) !important;
    font-weight: 600 !important;
    color: #5a5240 !important;
    transition: transform .08s ease, box-shadow .15s ease !important;
}
.footer__item .select__header:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 5px 14px rgba(120, 80, 20, .16) !important;
}
.body--dark .footer__item .select__header { background: #282b36 !important; color: #d5d7e0 !important; }
.footer__item .select__options {
    border-radius: 16px !important;
    box-shadow: 0 10px 30px rgba(120, 80, 20, .22) !important;
    overflow: hidden !important;
}
.body--dark .footer__item .select__options { box-shadow: 0 10px 30px rgba(0, 0, 0, .5) !important; }
/* "New game" button: match the mode/size pills (same font, size & weight) */
.footer__button, .footer__button-label {
    font-family: 'Fredoka', 'Nunito', sans-serif !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
}

/* ---------- 6. Moves counter + low-moves warning ---------- */
.game__score {
    font-size: 20px !important; font-weight: 600 !important; letter-spacing: .3px !important;
    color: #6b6350 !important; margin-top: 6px !important;
}
.body--dark .game__score { color: #c4c6d0 !important; }
.game__score .text-bold { font-size: 1.35em !important; color: #7cb342 !important; }
/* Low-moves warning: pulse/redden ONLY the moves number, never the whole score
   area — otherwise the animation & red colour bleed onto the post-game timer and
   the "Play unlimited / past puzzles" buttons that live inside .game__score. */
.game__score_warn .text-bold { color: #e6482e !important; animation: ww-pulse .9s ease-in-out infinite; }
@keyframes ww-pulse { 0%, 100% { opacity: 1 } 50% { opacity: .55 } }

/* ---------- 7. Statistics: mode/size switcher ---------- */
.stats-switch { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.stats-switch__row { display: flex; gap: 8px; justify-content: center; }
.stats-switch__item {
    flex: 1; max-width: 130px; text-align: center; cursor: pointer;
    padding: 9px 10px; border-radius: 12px; font-weight: 600; font-size: 14px; line-height: 1;
    background: #f1ede3; color: #6b6555; user-select: none;
    border: 2px solid transparent;
    transition: background .15s ease, color .15s ease, box-shadow .15s ease, transform .06s ease;
}
.stats-switch__item:hover { background: #e7e1d2; }
.stats-switch__item:active { transform: scale(.96); }
.stats-switch__item_active { background: #8bc34a; color: #fff; box-shadow: 0 3px 10px rgba(139, 195, 74, .4); }
.body--dark .stats-switch__item { background: #33333b; color: #c8c8d0; }
.body--dark .stats-switch__item:hover { background: #3d3d47; }
.body--dark .stats-switch__item_active { background: #8bc34a; color: #12121a; box-shadow: 0 3px 10px rgba(139, 195, 74, .25); }

/* =========================================================
   8. POPUPS → real centered modals with internal scroll
      (.windows_open + .window_visible toggled by ww-test-enhance.js)
   ========================================================= */
body.ww-modal-open { overflow: hidden !important; }

.windows.windows_open {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: 100vw !important; height: 100vh !important; height: 100dvh !important;
    max-width: none !important; margin: 0 !important;
    z-index: 9999 !important;
    display: flex !important; align-items: center; justify-content: center;
    padding: 16px;
    background: rgba(40, 26, 12, .45);
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.body--dark .windows.windows_open { background: rgba(0, 0, 0, .6); }
.windows.windows_open > div { display: contents; }

.window_visible {
    display: flex !important; flex-direction: column;
    width: 460px !important; max-width: calc(100vw - 32px) !important;
    max-height: 88vh !important; height: auto !important;
    background: #fdfaf3 !important;
    border-radius: 22px !important;
    box-shadow: 0 28px 70px rgba(50, 30, 8, .4) !important;
    overflow: hidden !important;
    animation: ww-modal-in .18s ease-out;
}
@keyframes ww-modal-in { from { opacity: 0; transform: translateY(10px) scale(.98) } to { opacity: 1; transform: none } }
.body--dark .window_visible { background: #252833 !important; box-shadow: 0 28px 70px rgba(0, 0, 0, .65) !important; }

.window_visible .window__header {
    flex: 0 0 auto; position: relative;
    padding: 16px 50px 14px !important;
    background: transparent !important;
    border-bottom: 1px solid rgba(0, 0, 0, .07) !important;
    border-radius: 0 !important;
    text-align: center;
}
.body--dark .window_visible .window__header { border-bottom-color: rgba(255, 255, 255, .08) !important; }
.window_visible .window__title { font-size: 19px !important; font-weight: 800 !important; letter-spacing: .2px !important; }
.window_visible .window__close {
    position: absolute !important; top: 50%; right: 12px; transform: translateY(-50%);
    width: 34px; height: 34px; display: flex !important; align-items: center; justify-content: center;
    border-radius: 50%; cursor: pointer; transition: background .15s ease;
}
.window_visible .window__close:hover { background: rgba(0, 0, 0, .07); }
.body--dark .window_visible .window__close:hover { background: rgba(255, 255, 255, .10); }

.window_visible .window__content {
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto !important;
    padding: 18px 20px 22px !important;
    -webkit-overflow-scrolling: touch;
}
/* thin scrollbar */
.window_visible .window__content::-webkit-scrollbar { width: 8px; }
.window_visible .window__content::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .15); border-radius: 8px; }
.body--dark .window_visible .window__content::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .18); }

/* --- Stats cards: archive-style (warm cream, soft border, rounded) --- */
.window_visible .card {
    background: #fffdf8 !important;
    border: 1.5px solid #efe4c8 !important;
    border-radius: 16px !important;
    box-shadow: 0 4px 12px rgba(120, 80, 20, .06) !important;
    padding: 15px 8px 13px !important;
}
.window_visible .card__value {
    font-family: 'Fredoka', 'Nunito', sans-serif !important;
    font-weight: 700 !important;
    font-size: 2.25rem !important;
    line-height: 1.05 !important;
    color: #48412f !important;
}
.window_visible .card__description {
    margin-top: 5px !important;
    font-weight: 700 !important;
    font-size: .72rem !important;
    letter-spacing: .03em !important;
    color: #8a8570 !important;
}
.window_visible .card__description .q-icon { color: #7cb342 !important; font-size: 1.02rem !important; vertical-align: -2px; }
.body--dark .window_visible .card {
    background: #344356 !important;
    border-color: #3c4d61 !important;
    box-shadow: none !important;
}
.body--dark .window_visible .card__value { color: #eef0f4 !important; }
.body--dark .window_visible .card__description { color: #aeb4c0 !important; }
.body--dark .window_visible .card__description .q-icon { color: #9ccb6a !important; }

/* --- Distribution: green pill bars on a warm track (matches archive accents) --- */
.window_visible .stats { margin-top: 4px !important; }
.window_visible .stats__row { padding: 4px 0 !important; }
.window_visible .stats__val { background: #f1e7cf !important; border-radius: 999px !important; }
.window_visible .stats__bar {
    background: #8bc34a !important;
    border-radius: 999px !important;
    box-shadow: 0 2px 6px rgba(124, 179, 66, .30) !important;
}
.window_visible .stats__bar--empty { background: transparent !important; box-shadow: none !important; color: #a99f86 !important; }
.window_visible .stats__label {
    color: #6b6250 !important;
    font-family: 'Fredoka', 'Nunito', sans-serif !important;
    font-weight: 600 !important;
}
.body--dark .window_visible .stats__val { background: #3c4d61 !important; }
.body--dark .window_visible .stats__bar--empty { color: #8a8570 !important; }
.body--dark .window_visible .stats__label { color: #c8ccd6 !important; }

/* --- Stats "distribution" heading like the archive title --- */
.window_visible h4 { color: #48412f !important; font-weight: 600 !important; }
.body--dark .window_visible h4 { color: #eef0f4 !important; }

/* --- Settings: size selector as pills --- */
.window_visible .dimensions__item {
    border-radius: 12px !important; padding: 9px 16px !important; font-weight: 600 !important;
    background: #f1ede3 !important; color: #6b6555 !important; box-shadow: none !important;
    transition: background .15s ease, color .15s ease;
}
.window_visible .dimensions__item_active { background: #8bc34a !important; color: #fff !important; }
.body--dark .window_visible .dimensions__item { background: #33333b !important; color: #c8c8d0 !important; }
.body--dark .window_visible .dimensions__item_active { background: #8bc34a !important; color: #12121a !important; }

/* --- Settings: list rows --- */
.window_visible .list__item { border-bottom: 1px solid rgba(0, 0, 0, .06) !important; padding: 14px 4px !important; gap: 14px; }
/* let the value/control size to its content with a gap, not a rigid 20/80 split
   (otherwise a wide language name is jammed against the edge and can overflow) */
.window_visible .list__content { width: auto !important; flex: 1 1 auto !important; min-width: 0 !important; }
.window_visible .list__action { width: auto !important; flex: 0 0 auto !important; padding-right: 0 !important; }
.window_visible .list__item:last-child { border-bottom: 0 !important; }
.body--dark .window_visible .list__item { border-bottom-color: rgba(255, 255, 255, .07) !important; }

/* --- Settings: language picker as a self-contained centered popup ---
   Rendered absolutely inside the scrolling modal, the old menu overflowed the
   viewport, got clipped by the modal and spawned extra (horizontal+vertical)
   scrollbars — the stray grey strip along the bottom was that scrollbar track.
   Making it position:fixed lifts it out of the scroll container entirely: it
   can't be clipped, can't grow the scroll area, and is clamped on-screen. The
   large box-shadow doubles as a full-screen dim, so it reads as a real popup. */
.window_visible .lang-dd__menu {
    position: fixed !important;
    left: 50% !important; top: 50% !important; right: auto !important; bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    min-width: 220px !important;
    max-width: min(340px, calc(100vw - 40px)) !important;
    max-height: min(70vh, 460px) !important;
    overflow-y: auto !important;
    z-index: 10001 !important;
    border-radius: 16px !important;
    padding: 8px !important;
    animation: ww-langpop-in .16s ease-out !important;
    box-shadow: 0 20px 55px rgba(30, 18, 4, .38), 0 0 0 100vmax rgba(20, 12, 4, .45) !important;
    /* thin custom scroll (Firefox) */
    scrollbar-width: thin !important;
    scrollbar-color: rgba(0, 0, 0, .25) transparent !important;
}
.body--dark .window_visible .lang-dd__menu {
    box-shadow: 0 20px 55px rgba(0, 0, 0, .6), 0 0 0 100vmax rgba(0, 0, 0, .55) !important;
    scrollbar-color: rgba(255, 255, 255, .3) transparent !important;
}
/* thin custom scroll (WebKit): a slim rounded thumb, no track, no arrow buttons,
   inset from the rounded corners so the right edge stays round */
.window_visible .lang-dd__menu::-webkit-scrollbar { width: 6px !important; height: 6px !important; }
.window_visible .lang-dd__menu::-webkit-scrollbar-track { background: transparent !important; margin: 10px 0 !important; }
.window_visible .lang-dd__menu::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, .22) !important; border-radius: 999px !important; }
.window_visible .lang-dd__menu::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, .35) !important; }
.window_visible .lang-dd__menu::-webkit-scrollbar-button { display: none !important; width: 0 !important; height: 0 !important; }
.window_visible .lang-dd__menu::-webkit-scrollbar-corner { background: transparent !important; }
.body--dark .window_visible .lang-dd__menu::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .28) !important; }
.body--dark .window_visible .lang-dd__menu::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .42) !important; }
@keyframes ww-langpop-in {
    from { opacity: 0; transform: translate(-50%, -50%) scale(.96); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.window_visible .lang-dd__opt { padding: 11px 14px !important; border-radius: 10px !important; }

/* --- How-to: legend squares & example tiles spacing --- */
.window_visible .word { gap: 6px !important; margin: 6px 0 !important; }
.window_visible hr { border: 0 !important; border-top: 1px solid rgba(0, 0, 0, .08) !important; margin: 14px 0 !important; }
.body--dark .window_visible hr { border-top-color: rgba(255, 255, 255, .08) !important; }

/* =========================================================
   8b. In-game UI typography (Fredoka) — excludes the board tiles
   ========================================================= */
.header__button,
.game__score,
.footer__item .select__current,
.footer__item .select__item,
.window__title,
.modal__title,
.modal__title.text-center,
.window_visible h4,
.window_visible .stats-switch__item,
.window_visible .dimensions__item,
.window_visible .card,
.window_visible .stats__label,
.window_visible .list__content {
    font-family: 'Fredoka', 'Nunito', sans-serif !important;
}
/* headings a touch bolder in Fredoka */
.window__title, .window_visible h4, .modal__title { font-weight: 600 !important; }
.game__score { font-weight: 500 !important; }
/* keep the game board tiles on their original font */
.board .board__item { font-family: 'Nunito', sans-serif !important; }

/* =========================================================
   9. Site landing content & typography (/test only)
   ========================================================= */
:root {
    --ww-accent: #7cb342; --ww-accent-d: #5f9130;
    --ww-ink: #48412f; --ww-soft: #7c7461; --ww-line: rgba(120, 80, 20, .12);
    --ww-card: #fdfaf3; --ww-shadow: 0 8px 24px rgba(120, 80, 20, .09);
}
.body--dark {
    --ww-ink: #eef0f4; --ww-soft: #a9adba; --ww-line: rgba(255, 255, 255, .09);
    --ww-card: #252833; --ww-shadow: 0 10px 28px rgba(0, 0, 0, .45);
}

.ww-site { font-family: 'Nunito', sans-serif; color: var(--ww-ink); }
.ww-site h1, .ww-site h2, .ww-site h3, .ww-site h4 { font-family: 'Fredoka', 'Nunito', sans-serif; color: var(--ww-ink); }
.ww-wrap { max-width: 940px; margin: 0 auto; padding: 0 20px; }
.ww-section { padding: 46px 0; }
.ww-section_tight { padding: 30px 0; }

/* hero */
.ww-hero { text-align: center; padding: 26px 20px 6px; }
.ww-hero h1 { font-size: 40px; font-weight: 600; line-height: 1.08; letter-spacing: -.5px; margin: 0 0 12px; }
.ww-hero p { font-size: 18px; line-height: 1.6; color: var(--ww-soft); max-width: 700px; margin: 0 auto; }
.ww-cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; background: #8bc34a; color: #fff; font-family: 'Fredoka','Nunito',sans-serif; font-weight: 600; font-size: 18px; padding: 14px 30px; border-radius: 999px; text-decoration: none; box-shadow: 0 12px 26px rgba(124,179,66,.38); transition: transform .16s ease, box-shadow .16s ease; }
.ww-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 30px rgba(124,179,66,.45); color: #fff; }

/* section heading */
.ww-h { text-align: center; font-size: 30px; font-weight: 600; margin: 0 0 8px; letter-spacing: -.3px; }
.ww-sub { text-align: center; color: var(--ww-soft); font-size: 16px; max-width: 640px; margin: 0 auto 28px; line-height: 1.55; }

/* cards grid */
.ww-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ww-card {
    background: var(--ww-card); border-radius: 18px; padding: 18px;
    box-shadow: var(--ww-shadow); text-align: center;
}
.ww-card img { width: 100%; height: auto; border-radius: 14px; margin-bottom: 14px; display: block; }
.ww-card h3 { font-size: 18px; font-weight: 600; margin: 0 0 8px; }
.ww-card p { color: var(--ww-soft); font-size: 14.5px; line-height: 1.55; margin: 0; }
.ww-card__step {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%; margin: 0 auto 10px;
    background: var(--ww-accent); color: #fff; font-weight: 700; font-size: 15px;
}

/* color legend */
.ww-legend { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
.ww-chip { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; color: var(--ww-soft); font-size: 15px; }
.ww-dot { width: 20px; height: 20px; border-radius: 50%; box-shadow: 0 2px 4px rgba(0, 0, 0, .12); }
.ww-dot_g { background: #7fb423; } .ww-dot_y { background: #fda61a; } .ww-dot_x { background: #bdb090; }

/* two-column feature rows (modes) */
.ww-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ww-mode { background: var(--ww-card); border-radius: 18px; padding: 22px 22px; box-shadow: var(--ww-shadow); }
.ww-mode h3 { font-size: 20px; margin: 0 0 8px; font-weight: 600; }
.ww-mode p { color: var(--ww-soft); line-height: 1.6; margin: 0; font-size: 15px; }
.ww-mode .ww-pills { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.ww-pill { padding: 6px 14px; border-radius: 999px; background: rgba(124, 179, 66, .14); color: var(--ww-accent-d); font-weight: 700; font-size: 14px; }
.body--dark .ww-pill { color: #b7dc86; }

/* tips list */
.ww-tips { max-width: 760px; margin: 0 auto; display: grid; gap: 12px; }
.ww-tip { display: flex; gap: 14px; align-items: flex-start; background: var(--ww-card); border-radius: 14px; padding: 16px 18px; box-shadow: var(--ww-shadow); }
.ww-tip__n { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; background: var(--ww-accent); color: #fff; font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 14px; }
.ww-tip p { margin: 0; color: var(--ww-soft); line-height: 1.55; font-size: 15px; }
.ww-tip strong { color: var(--ww-ink); }

/* prose */
.ww-prose { max-width: 760px; margin: 0 auto; text-align: center; }
.ww-prose p { color: var(--ww-soft); font-size: 17px; line-height: 1.7; margin: 0 0 16px; }

/* hero meta chip (e.g. "Last revised") */
.ww-hero__meta { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 7px 16px; border-radius: 999px; background: rgba(124,179,66,.12); color: var(--ww-accent-d); font-family: 'Fredoka','Nunito',sans-serif; font-weight: 600; font-size: 14px; }
.body--dark .ww-hero__meta { color: #b7dc86; }

/* legal / long-form document card (terms, privacy, dmca, contact) */
.ww-doc { max-width: 820px; margin: 0 auto; background: var(--ww-card); border-radius: 22px; padding: 40px 44px; box-shadow: var(--ww-shadow); text-align: left; }
.ww-doc > :first-child { margin-top: 0; }
.ww-doc > :last-child { margin-bottom: 0; }
.ww-doc h2 { font-size: 24px; font-weight: 600; margin: 34px 0 12px; letter-spacing: -.2px; }
.ww-doc h3 { font-size: 19px; font-weight: 600; margin: 28px 0 10px; padding-top: 22px; border-top: 1px solid var(--ww-line); letter-spacing: -.2px; }
.ww-doc h3:first-of-type { border-top: 0; padding-top: 0; }
.ww-doc p { color: var(--ww-soft); font-size: 16px; line-height: 1.75; margin: 0 0 15px; }
.ww-doc ul { color: var(--ww-soft); font-size: 16px; line-height: 1.7; margin: 0 0 16px; padding-left: 22px; }
.ww-doc li { margin: 0 0 8px; }
.ww-doc li::marker { color: var(--ww-accent); }
.ww-doc a { color: var(--ww-accent-d); font-weight: 600; text-decoration: none; }
.ww-doc a:hover { text-decoration: underline; }
.ww-doc strong { color: var(--ww-ink); }
.ww-doc address { font-style: normal; display: block; margin: 4px 0 18px; padding: 14px 18px; border-radius: 14px; background: rgba(124,179,66,.08); color: var(--ww-ink); font-size: 15px; line-height: 1.6; }
.ww-doc__contact { margin-top: 18px; font-family: 'Fredoka','Nunito',sans-serif; font-weight: 600; font-size: 20px; color: var(--ww-accent-d); }
.ww-doc__updated { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--ww-line); font-size: 14px; font-style: italic; color: var(--ww-soft); }
.ww-doc__print { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px; background: transparent; color: var(--ww-accent-d); border: 1.5px solid var(--ww-accent); font-family: 'Fredoka','Nunito',sans-serif; font-weight: 600; font-size: 15px; padding: 9px 20px; border-radius: 999px; text-decoration: none; cursor: pointer; transition: background .15s ease, color .15s ease; }
.ww-doc__print:hover { background: var(--ww-accent); color: #fff; }
@media (max-width: 720px) {
    .ww-doc { padding: 26px 20px; border-radius: 18px; }
    .ww-doc h2 { font-size: 21px; }
    .ww-doc h3 { font-size: 18px; }
}

/* FAQ accordion */
.ww-faq { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.ww-faq details { background: var(--ww-card); border-radius: 14px; padding: 2px 20px; box-shadow: var(--ww-shadow); }
.ww-faq summary { cursor: pointer; list-style: none; font-weight: 700; font-size: 17px; padding: 16px 0; position: relative; padding-right: 28px; color: var(--ww-ink); }
.ww-faq summary::-webkit-details-marker { display: none; }
.ww-faq summary::after { content: '+'; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); color: var(--ww-accent); font-size: 24px; line-height: 1; font-weight: 700; }
.ww-faq details[open] summary::after { content: '\2013'; }
.ww-faq details p { margin: 0 0 16px; color: var(--ww-soft); line-height: 1.65; font-size: 15.5px; }
.ww-faq details a { color: var(--ww-accent-d); font-weight: 700; }

/* footer */
.ww-foot { margin-top: 40px; padding: 40px 20px 46px; color: var(--ww-soft); background: linear-gradient(180deg, rgba(124,179,66,.06), rgba(124,179,66,0)); border-top: 1px solid var(--ww-line); }
.ww-foot__inner { max-width: 940px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px 28px; flex-wrap: wrap; }
.ww-foot__brand { display: flex; flex-direction: column; gap: 4px; }
.ww-foot__logo { font-family: 'Fredoka','Nunito',sans-serif; font-weight: 700; font-size: 22px; color: var(--ww-accent-d); line-height: 1; }
.body--dark .ww-foot__logo { color: #9ccb6a; }
.ww-foot__tag { font-size: 14px; color: var(--ww-soft); max-width: 340px; }
.ww-foot__links { display: flex; flex-wrap: wrap; gap: 6px 4px; }
.ww-foot__links a { color: var(--ww-soft); text-decoration: none; font-family: 'Fredoka','Nunito',sans-serif; font-weight: 600; font-size: 14.5px; padding: 7px 12px; border-radius: 999px; transition: color .15s ease, background .15s ease; }
.ww-foot__links a:hover { color: var(--ww-accent-d); background: rgba(124,179,66,.12); }
.body--dark .ww-foot__links a:hover { color: #9ccb6a; background: rgba(124,179,66,.14); }
.ww-foot__copy { max-width: 940px; margin: 22px auto 0; padding-top: 18px; border-top: 1px solid var(--ww-line); text-align: center; font-size: 13px; color: var(--ww-soft); }

/* responsive */
@media (max-width: 720px) {
    .ww-cards { grid-template-columns: 1fr; }
    .ww-modes { grid-template-columns: 1fr; }
    .ww-hero h1 { font-size: 30px; }
    .ww-h { font-size: 25px; }
    .ww-section { padding: 34px 0; }
}

/* ---------- Language switcher (added for main rollout) ---------- */
.ww-langs { max-width: 820px; margin: 22px auto 4px; padding: 0 16px; text-align: center; line-height: 2.1; font-family: 'Fredoka', 'Nunito', sans-serif; }
.ww-langs__link { color: var(--ww-soft); text-decoration: none; font-weight: 600; font-size: 15px; margin: 0 7px; transition: color .15s; }
.ww-langs__link:hover { color: var(--ww-accent-d); }
.ww-langs__link_active { color: var(--ww-accent-d); font-weight: 700; }
.ww-langs__sep { color: var(--ww-line); }
.body--dark .ww-langs__link_active, .body--dark .ww-langs__link:hover { color: #9ccb6a; }

/* ---------- Cross-promo cards (modern, on-brand) ---------- */
.ww-promos { max-width: 760px; margin: 26px auto 6px; padding: 0 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ww-promo { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; text-decoration: none; background: #fff; border: 1px solid var(--ww-line); box-shadow: 0 6px 18px rgba(120,80,20,.08); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.ww-promo:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(120,80,20,.16); border-color: var(--ww-accent); }
.ww-promo_green { background: linear-gradient(180deg, rgba(124,179,66,.14), rgba(124,179,66,.05)); }
.ww-promo__thumb { flex: 0 0 auto; width: 54px; height: 54px; }
.ww-promo__thumb img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 0; }
.ww-promo__body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ww-promo__title { font-family: 'Fredoka','Nunito',sans-serif; font-weight: 600; font-size: 19px; line-height: 1.15; color: var(--ww-ink); }
.ww-promo__sub { font-size: 14px; color: var(--ww-soft); margin-top: 2px; }
.ww-promo__arrow { flex: 0 0 auto; color: var(--ww-soft); transition: transform .16s ease, color .16s ease; }
.ww-promo:hover .ww-promo__arrow { transform: translateX(3px); color: var(--ww-accent-d); }
.body--dark .ww-promo { background: #282b36; box-shadow: 0 8px 22px rgba(0,0,0,.4); }
.body--dark .ww-promo_green { background: linear-gradient(180deg, rgba(124,179,66,.22), rgba(124,179,66,.06)); }
.body--dark .ww-promo:hover .ww-promo__arrow { color: #9ccb6a; }
@media (max-width: 560px) { .ww-promos { grid-template-columns: 1fr; max-width: 420px; } }

/* =========================================================
   First screen = full viewport height.
   The game layout must always fill the viewport. The site subtracts the bottom
   ad-banner height (--adv-indent) from the layout, but that banner sits in the
   flow *below* the game (not pinned inside the first screen), so the subtraction
   only leaves dead space under the game. Ignore it: the game fills the screen
   and the banner simply follows on scroll (matches the previous design).
   ========================================================= */
.layout { min-height: calc(var(--vh, 1vh) * 100) !important; }

/* ShareThis removed — hide any leftover widgets if the script still loads from cache. */
.st-sticky-share-buttons,
#st-1, #st-2,
.sharethis-inline-share-buttons,
iframe[src*="sharethis"] { display: none !important; }

/* =========================================================
   Let modals be tappable under the AdSense anchor overlay.
   The Google anchor ad (<ins class="adsbygoogle-noablate">) is position:fixed
   with z-index 2147483647 (max) and is appended directly to <html>, so it sits
   ABOVE our dialogs and swallows taps on the modal's close (X) button on iOS.
   We can't out-stack max-int, so while a modal is open (class toggled on <html>
   by ww-test-enhance.js) we make the anchor ad click-through — it stays visible,
   but taps now reach the modal underneath. Scoped to <html> because the <ins>
   lives outside <body>. */
html.ww-ad-suppress .adsbygoogle-noablate,
html.ww-ad-suppress .adsbygoogle-noablate * { pointer-events: none !important; }