/* ============================================================
   Loaded AFTER /static/css/quordle.css so these rules win.
   ============================================================ */

#root { background: transparent !important; position: relative !important; }
body.dark #root { background: transparent !important; }

/* The live header lives in menu.php, outside #root. If the engine also paints
   one inside the game tree, hide it so it doesn't pop in under the spinner. */
#root .App-header { display: none !important; }

/* Header icon capsule */
.App-header > div {
    display: flex !important; align-items: center; gap: 2px;
    padding: 3px;
    background: var(--q-surface-2);
    border: 1px solid var(--q-border);
    border-radius: 999px;
}
.App-icon-container {
    display: inline-flex !important; align-items: center; justify-content: center;
    width: 38px; height: 38px; flex-shrink: 0;
    margin: 0 !important; padding: 0 !important;
    border: 0 !important; border-radius: 999px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: var(--q-ink);
    cursor: pointer;
}
.App-icon-container:hover { background: var(--q-accent-soft) !important; color: var(--q-accent-dark); }
body.dark .App-icon-container:hover { color: var(--q-accent); }
.App-icon-container .page-icon {
    display: inline-flex !important; align-items: center; justify-content: center;
    width: 100% !important; height: 100% !important;
    margin: 0 !important; border-radius: 0 !important; background: transparent !important;
}
html body .page-icon svg,
.App-icon-container svg {
    width: 20px !important; height: 20px !important;
    padding: 0 !important; margin: 0 !important;
    background: transparent !important; border: 0 !important;
    border-radius: 0 !important;
    color: currentColor !important; stroke: currentColor !important;
}
body.dark html body .page-icon svg { background: transparent !important; color: currentColor !important; }

/* Word length 4/5/6 */
html body .App-button {
    border-radius: 999px !important;
    background: var(--q-surface-2) !important;
    border: 1px solid var(--q-border) !important;
    color: var(--q-ink) !important;
    padding: 12px 22px !important;
    font-family: 'Montserrat', 'Nunito', sans-serif !important;
    font-weight: 800 !important; font-size: 15px !important;
}
html body .App-button:hover { background: var(--q-accent-soft) !important; color: var(--q-accent-dark) !important; }
html body .App-button-circle,
html body .App-button-circle-fixed {
    width: 40px !important; height: 40px !important;
    margin: 0 6px !important;
    background: var(--q-surface-2) !important;
    border: 1px solid var(--q-border) !important;
    border-radius: 50% !important;
    color: var(--q-ink) !important;
    font-weight: 800 !important; font-size: 15px !important;
}
html body .App-button-circle:disabled,
html body .App-button-circle-fixed:disabled {
    background: var(--q-accent) !important; color: #fff !important; border-color: transparent !important;
}

/* ========== In-place pages (stats / settings / about) — header + content, no card ========== */
html body .App-header { padding-bottom: 2px !important; min-height: 40px !important; }
html body #root .Game-options { min-height: 0 !important; padding: 0 !important; margin: 0 auto !important; }
html body #root .Game { padding-bottom: 8px !important; }

/* Space the 2×2 board grid: engine only pads .25rem on top of each field, so
   the two rows sit almost flush. Match the visible left/right gutter. */
html body .game__boards {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
html body .game__boards-row { gap: 8px; }
html body .game__container-inner { overflow: visible !important; }

html body #root .App-page,
html body .App-page {
    position: relative !important;
    z-index: auto !important;
    display: block !important;
    width: 100% !important;
    max-width: 620px !important;
    margin: 2px auto 22px !important;
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--q-ink, #161c2d) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    text-align: left !important;
}
html body #root .App-page > .App-title,
html body .App-page > .App-title {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 48px !important;
    min-height: 48px !important;
    max-width: none !important;
    min-width: 0 !important;
    width: 100% !important;
    margin: 0 0 8px !important;
    padding: 0 48px !important;
    background: transparent !important;
    background-color: transparent !important;
    color: var(--q-ink, #161c2d) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--q-border, rgba(20,20,20,.10)) !important;
    border-radius: 0 !important;
    font-family: 'Montserrat', 'Nunito', sans-serif !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em !important;
    line-height: 48px !important;
}
html body .App-page > .App-title .App-button-close,
html body .App-page .App-button-close {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    left: auto !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 50% !important;
    cursor: pointer;
    color: #5b6270 !important;
}
html body .App-page .App-button-close:before,
html body .App-page .App-button-close:after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 14px !important;
    height: 2px !important;
    margin: 0 !important;
    border-radius: 2px !important;
    background: currentColor !important;
    background-color: currentColor !important;
}
html body .App-page .App-button-close:before { transform: translate(-50%, -50%) rotate(45deg) !important; }
html body .App-page .App-button-close:after  { transform: translate(-50%, -50%) rotate(-45deg) !important; }
html body .App-page .App-button-close:hover { background: #dcfce7 !important; color: #16a34a !important; }

html body .App-page .App-statistics,
html body .App-page .Settings,
html body .App-page .App-about {
    padding: 8px 2px 6px !important;
    background: transparent !important;
    color: var(--q-ink, #161c2d) !important;
}

body.dark html body .App-page,
body.dark html body .App-page > .App-title,
body.dark html body .App-page .App-statistics,
body.dark html body .App-page .Settings,
body.dark html body .App-page .App-about {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--q-ink, #e6e8ec) !important;
}
body.dark html body .App-page > .App-title {
    border-bottom-color: var(--q-border, rgba(255,255,255,0.09)) !important;
}

/* ---- About: same tiles/cards as the landing how-to ---- */
html body .App-page .App-about {
    display: flex !important;
    flex-direction: column;
    gap: 12px;
    padding: 16px 16px 12px !important;
}
html body .App-page .App-about > hr { display: none !important; height: 0 !important; margin: 0 !important; border: 0 !important; }
html body .App-page .App-about > p {
    margin: 0 !important;
    padding: 0 4px;
    font-size: 15.5px !important;
    line-height: 1.65 !important;
    font-weight: 500;
    color: var(--q-muted, #5b6270) !important;
    text-align: left !important;
}
html body .App-page .App-about table,
html body .App-page .App-about table.Game-rows {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: auto !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 18px 14px !important;
    background: var(--q-surface-2, #f3f7f4) !important;
    border: 1px solid var(--q-border, rgba(20,20,20,.10)) !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    border-collapse: separate !important;
}
html body .App-page .App-about tbody {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
}
html body .App-page .App-about tr,
html body .App-page .App-about tr.Row {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 5px;
    height: auto !important;
    width: auto !important;
}
html body .App-page .App-about td {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    height: auto !important;
    width: auto !important;
    background: transparent !important;
}
html body .App-page .App-about td.Row-letter {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 34px !important;
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 7px !important;
    font-family: 'Montserrat', 'Nunito', sans-serif !important;
    font-weight: 800 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    text-align: center !important;
    text-transform: uppercase;
    background: var(--q-cell, #e6eae3) !important;
    color: var(--q-ink, #161c2d) !important;
}
/* restore the colored tiles (the td{background:transparent} reset above wiped them) */
html body .App-page .App-about td.Row-letter.letter-correct   { background: var(--q-green, #22c55e) !important; color: #fff !important; }
html body .App-page .App-about td.Row-letter.letter-elsewhere  { background: var(--q-yellow, #eab308) !important; color: #fff !important; }
html body .App-page .App-about td.Row-letter.letter-absent     { background: var(--q-gray, #94a3b8) !important; color: #fff !important; }
html body .App-page .App-about .Row-annotation {
    width: auto !important;
    margin: 0 0 0 8px !important;
    padding: 5px 10px !important;
    border-radius: 999px !important;
    background: var(--q-surface, #fff) !important;
    border: 1px solid var(--q-border) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    color: var(--q-muted) !important;
    text-transform: none !important;
}
html body .App-page .App-about b {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    width: 22px !important; height: 22px !important;
    min-width: 22px !important;
    padding: 0 !important; margin: 0 2px !important;
    border: 0 !important; border-radius: 5px !important;
    font-family: 'Montserrat', 'Nunito', sans-serif !important;
    font-size: 12px !important; font-weight: 800 !important;
    line-height: 1 !important;
    vertical-align: middle;
    background: var(--q-gray, #94a3b8) !important;
    color: #fff !important;
}
html body .App-page .App-about b.green-bg { background: var(--q-green, #22c55e) !important; color: #fff !important; }
html body .App-page .App-about b.yellow-bg { background: var(--q-yellow, #eab308) !important; color: #fff !important; }
html body .App-page .App-about strong {
    display: block !important;
    background: transparent !important;
    color: var(--q-muted) !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
    padding: 0 !important; margin: 6px 0 0 !important;
    min-width: 0 !important; border-radius: 0 !important;
}

/* ---- Stats: landing cards + pill bars ---- */
html body .App-page .stats-content {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}
/* Engine splits the 6 cards into two 3-card groups; flatten so they share one grid. */
html body .App-page .stats-container { display: contents !important; }
html body .App-page .stats-chart { grid-column: 1 / -1 !important; }
@media (max-width: 700px) {
    html body .App-page .stats-content { grid-template-columns: repeat(2, 1fr) !important; }
}
html body .App-page .stat-item {
    flex: none !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 14px 8px 12px !important;
    background: var(--q-surface-2, #f3f7f4) !important;
    border: 1px solid var(--q-border) !important;
    border-radius: 16px !important;
    text-align: center !important;
}
html body .App-page .stat-value {
    font-family: 'Montserrat', 'Nunito', sans-serif !important;
    font-weight: 800 !important;
    font-size: 28px !important;
    letter-spacing: -0.03em;
    color: var(--q-ink) !important;
    line-height: 1.1 !important;
}
html body .App-page .stat-description {
    margin-top: 6px;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .04em;
    line-height: 1.3 !important;
    color: var(--q-muted) !important;
}
html body .App-page .stats-chart {
    margin: 8px 0 4px !important;
    padding: 16px !important;
    background: var(--q-surface-2, #f3f7f4) !important;
    border: 1px solid var(--q-border) !important;
    border-radius: 16px !important;
}
html body .App-page .chart-title {
    font-family: 'Montserrat', 'Nunito', sans-serif !important;
    font-weight: 800 !important;
    font-size: 15px !important;
    text-align: left !important;
    margin: 0 0 12px !important;
    color: var(--q-ink) !important;
}
html body .App-page .stats-chart table {
    display: block !important;
    height: auto !important;
    width: 100% !important;
    border-collapse: collapse !important;
}
html body .App-page .stats-chart tbody { display: block; width: 100%; }
html body .App-page .stats-chart tr {
    display: grid !important;
    grid-template-columns: 36px 1fr 28px;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px !important;
    height: auto !important;
}
html body .App-page .stats-chart td {
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    height: auto !important;
    vertical-align: middle;
}
html body .App-page .stats-chart .number {
    font-weight: 800 !important;
    font-size: 13px !important;
    padding: 0 !important;
    color: var(--q-muted) !important;
}
html body .App-page .stats-chart .amount {
    font-weight: 800 !important;
    font-size: 13px !important;
    padding: 0 !important;
    text-align: right !important;
    color: var(--q-ink) !important;
}
html body .App-page .stats-chart .percentage {
    display: block !important;
    width: 100% !important;
    height: 18px !important;
    background: var(--q-cell, #e6eae3) !important;
    color: transparent !important;
    font-size: 0 !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    position: relative !important;
}
html body .App-page .stats-chart .percentage span {
    position: absolute !important;
    left: 0; top: 0; bottom: 0;
    height: 100% !important;
    background: var(--q-accent, #22c55e) !important;
    color: transparent !important;
    border-radius: 999px !important;
    min-width: 0 !important;
    padding: 0 !important;
}

/* ---- Settings: each option is a landing-style card ---- */
html body .App-page .Settings > hr { display: none !important; }
html body .App-page .Settings-setting,
html body .App-page .qset__row {
    display: block !important;
    align-items: stretch !important;
    position: relative !important;
    margin: 0 0 10px !important;
    padding: 16px 62px 16px 16px !important;
    background: var(--q-surface-2, #f3f7f4) !important;
    border: 1px solid var(--q-border) !important;
    border-radius: 16px !important;
    box-shadow: none !important;
}
html body .App-page .Settings-param-title {
    font-family: 'Montserrat', 'Nunito', sans-serif !important;
    font-size: 15.5px !important;
    font-weight: 800 !important;
    margin: 0 0 4px !important;
    margin-left: 0 !important;
    text-transform: none !important;
    text-align: left !important;
    color: var(--q-ink) !important;
}
html body .App-page .Settings-param-desc {
    display: block !important;
    font-size: 13.5px !important;
    line-height: 1.45 !important;
    margin: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    color: var(--q-muted) !important;
    text-align: left !important;
}
html body .App-page .Settings-checkbox {
    margin-top: 0 !important;
    top: 50% !important;
    right: 14px !important;
    transform: translateY(-50%) !important;
}
html body .App-page .App-button-circle,
html body .App-page .App-button-circle-fixed {
    width: 42px !important; height: 42px !important;
    margin: 10px 8px 0 0 !important;
}

html body .App-page table { height: auto !important; width: auto !important; }
html body .App-page .stats-chart table { width: 100% !important; }
html body .App-page .stat-item {
    background: var(--q-surface-2) !important;
    min-height: 0 !important;
    width: auto !important;
    border-radius: 16px !important;
}
html body .App-page .stat-value { font-size: 26px !important; }
body.dark html body .App-page .stat-item,
body.dark .qstats__card,
body.dark .qstats__dist,
body.dark .qabout__card,
body.dark html body .App-page .Settings-setting {
    background: var(--q-surface-2, #191c21) !important;
    color: var(--q-ink) !important;
}

/* ========== Result overlay (Give up / win) still uses Top-window ========== */
html body .Top-window-background {
    position: fixed !important; inset: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 64px 12px 20px !important;
    background: rgba(12, 18, 16, 0.38) !important;
    -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
    z-index: 10040 !important;
}
html body .Top-window-frame {
    display: flex !important; flex-direction: column !important;
    width: min(460px, 100%) !important;
    margin: 0 auto !important;
    border-radius: 22px !important;
    border: 1px solid var(--q-border) !important;
    background: var(--q-surface) !important;
    color: var(--q-ink) !important;
    box-shadow: 0 28px 64px -22px rgba(0,0,0,.48) !important;
    overflow: auto !important;
    max-height: min(86vh, 760px) !important;
    z-index: 21 !important;
}
html body .Top-window-frame:has(.App-statistics) { width: min(640px, 100%) !important; }

html body .Top-window-title {
    position: relative !important;
    display: flex !important; align-items: center !important; justify-content: center !important;
    flex-grow: 0 !important;
    height: 54px !important; min-height: 54px !important;
    margin: 0 !important;
    padding: 0 48px !important;
    background: var(--q-surface) !important;
    background-color: var(--q-surface) !important;
    color: var(--q-ink) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--q-border) !important;
    border-radius: 22px 22px 0 0 !important;
    font-family: 'Montserrat', 'Nunito', sans-serif !important;
    font-weight: 800 !important; font-size: 18px !important;
    letter-spacing: -0.02em !important;
}
html body .Top-window-content {
    height: auto !important;
    padding: 18px 22px 24px !important;
    width: 100% !important;
    color: var(--q-ink) !important;
    background: var(--q-surface) !important;
}
body.dark html body .Top-window-frame,
body.dark html body .Top-window-title,
body.dark html body .Top-window-content {
    background: var(--q-surface) !important;
    background-color: var(--q-surface) !important;
    color: var(--q-ink) !important;
}

html body .App-button-close {
    position: absolute !important; top: 9px; right: 10px;
    width: 36px !important; height: 36px !important; padding: 0 !important;
    background: transparent !important; background-color: transparent !important;
    border: 0 !important; border-radius: 50% !important;
    cursor: pointer; color: var(--q-muted);
}
html body .App-button-close:before,
html body .App-button-close:after {
    content: "" !important; position: absolute !important;
    top: 50% !important; left: 50% !important;
    width: 14px !important; height: 2px !important;
    margin: 0 !important; border-radius: 2px;
    background: currentColor !important; background-color: currentColor !important;
}
html body .App-button-close:before { transform: translate(-50%, -50%) rotate(45deg) !important; }
html body .App-button-close:after  { transform: translate(-50%, -50%) rotate(-45deg) !important; }
html body .App-button-close:hover { background: var(--q-accent-soft) !important; color: var(--q-accent-dark) !important; }

/* Result */
html body .Game-result-content { display: flex !important; flex-direction: column; align-items: center; gap: 10px; }
html body .Game-result-content > span { color: var(--q-muted) !important; font-size: 14.5px !important; margin: 0 !important; }
html body .Game-result-answer {
    background: var(--q-accent) !important; color: #fff !important;
    border: 0 !important; border-radius: 12px !important;
    padding: 10px 16px !important; font-weight: 800 !important;
    text-transform: uppercase; letter-spacing: .04em;
}
html body .Game-result-link { color: var(--q-accent-dark) !important; font-weight: 700; }
html body .Share-icons-bar { display: flex !important; justify-content: center; flex-wrap: wrap; gap: 8px; }
html body .Share-icons-bar a { background: transparent !important; border: 0 !important; }
html body .Share-icon { width: 36px !important; height: 36px !important; }

/* Statistics */
html body .App-statistics { text-align: center; padding: 4px 0 8px !important; }
html body .stats-content { display: block !important; max-width: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
html body .stats-container {
    display: flex !important; flex-wrap: wrap !important;
    justify-content: center; gap: 10px; margin: 0 0 18px !important; padding: 0 !important;
}
html body .stat-item {
    flex: 1 1 calc(33.33% - 10px);
    min-width: 88px; max-width: 180px; min-height: 0 !important; width: auto !important;
    margin: 0 !important; padding: 12px 8px !important;
    background: var(--q-surface-2) !important;
    border: 1px solid var(--q-border) !important;
    border-radius: 14px !important;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    color: var(--q-ink) !important;
}
@media (max-width: 700px) {
    html body .App-page .stats-content {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
    }
    html body .App-page .stats-container { display: contents !important; }
    html body .stat-item,
    html body .App-page .stat-item {
        flex: none !important;
        max-width: none !important;
        width: auto !important;
        min-width: 0 !important;
    }
}
html body .stat-value { font-family: 'Montserrat','Nunito',sans-serif; font-weight: 800; font-size: 26px !important; color: var(--q-ink) !important; }
html body .stat-description { font-size: 10.5px !important; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--q-muted) !important; }
html body .chart-title { font-family: 'Montserrat','Nunito',sans-serif; font-weight: 800; font-size: 15px; color: var(--q-ink) !important; margin: 6px 0 12px; text-align: left; }
html body .stats-chart { display: block !important; width: 100%; margin: 0 !important; }
html body table { height: auto !important; }
html body .stats-chart table { height: auto !important; width: 100% !important; }
html body .stats-chart table td:nth-child(2) { width: 100% !important; }
html body .stats-chart .percentage,
html body table .percentage {
    display: block !important; width: 100% !important;
    background: var(--q-cell) !important; color: transparent !important;
    border-radius: 999px !important; height: 22px !important;
    position: relative !important; overflow: hidden;
}
html body .stats-chart .percentage span,
html body table td .percentage span {
    position: absolute !important; left: 0 !important; top: 0 !important;
    height: 100% !important; display: block !important;
    background: var(--q-accent) !important; color: #fff !important;
    border-radius: 999px !important; font-weight: 800 !important;
    min-width: 36px; padding: 0 8px !important; line-height: 22px !important; text-align: right !important;
}

/* Settings */
html body .Settings { display: block; text-align: left; font-size: 15px; color: var(--q-ink); }
html body .Settings > hr { border: 0; border-top: 1px solid var(--q-border); margin: 4px 0; }
html body .Settings-setting {
    display: block !important; position: relative !important;
    margin: 0 !important; padding: 14px 58px 14px 0 !important;
}
html body .Settings-param-title {
    font-family: 'Montserrat','Nunito',sans-serif;
    font-weight: 700; font-size: 15px !important;
    margin: 0 0 4px !important; text-transform: none !important;
    color: var(--q-ink) !important; text-align: left;
}
html body .Settings-param-desc {
    display: block !important; font-size: 13px !important; line-height: 1.45;
    margin: 0 !important; color: var(--q-muted) !important; text-align: left;
}
html body .Settings-checkbox {
    appearance: none !important; -webkit-appearance: none !important;
    position: absolute !important; top: 50% !important; right: 0 !important;
    margin: 0 !important; padding: 0 !important;
    width: auto !important; height: auto !important;
    border: 0 !important; background: transparent !important; background-image: none !important;
    transform: translateY(-50%) !important;
    display: flex !important;
}
html body .Settings-checkbox::after,
html body .Settings-checkbox::before { content: none !important; display: none !important; }
html body input.App-switch-checkbox {
    -webkit-appearance: none !important; appearance: none !important;
    width: 44px !important; height: 26px !important;
    margin: 0 !important; border-radius: 999px !important;
    border: 1px solid var(--q-border) !important;
    background: var(--q-cell) none no-repeat !important;
    background-image: none !important;
    cursor: pointer; position: relative;
}
html body input.App-switch-checkbox::after {
    content: ""; position: absolute; top: 2px; left: 2px;
    width: 20px; height: 20px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.22);
    transition: transform .18s ease;
}
html body input.App-switch-checkbox:checked {
    background-color: var(--q-accent) !important;
    border-color: var(--q-accent) !important;
    background-image: none !important;
}
html body input.App-switch-checkbox:checked::after { transform: translateX(18px); }

/* About */
html body .App-about { text-align: left; color: var(--q-ink); font-size: 15.5px; line-height: 1.65; padding: 4px 2px 8px !important; }
html body .App-about p { color: var(--q-ink); margin: 10px 0; }
html body .App-about hr { border: 0; border-top: 1px solid var(--q-border); margin: 14px 0; }
html body .App-about table,
html body .App-about table.Game-rows {
    height: auto !important; width: auto !important;
    margin: 8px auto 12px !important;
}
html body .App-about .Row-letter {
    width: 32px !important; height: 32px !important;
    flex: 0 0 32px !important; font-size: 15px !important;
}
html body .App-about .Row-annotation { font-size: 13.5px; font-weight: 700; color: var(--q-muted); text-transform: none; width: auto; }
html body .App-about b {
    display: inline-flex !important; align-items: center; justify-content: center;
    min-width: 1.4em; padding: 1px 5px !important; margin: 0 1px;
    border: 0 !important; border-radius: 5px !important;
    background: var(--q-gray) !important; color: #fff !important; font-weight: 800 !important;
}
html body .App-about b.green-bg  { background: var(--q-green) !important; color: #fff !important; }
html body .App-about b.yellow-bg { background: var(--q-yellow) !important; color: #fff !important; }
html body .App-about strong {
    display: inline !important; background: transparent !important;
    color: var(--q-muted) !important; font-weight: 600 !important;
    padding: 0 !important; min-width: 0 !important; border-radius: 0 !important;
}
html body .Top-window-content .App-button { width: 100%; margin: 8px 0 0 !important; }
html body .App-button-marked {
    background: var(--q-accent) !important; color: #fff !important; border: none !important;
}

/* ========== First-guess hint → top toast (2s, then slides away) ========== */
html body .Hint-background {
    position: fixed !important;
    top: 60px !important; left: 0 !important; right: 0 !important;
    bottom: auto !important;
    height: auto !important; width: 100% !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 0 !important; margin: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    pointer-events: none !important;
    z-index: 10050 !important;
}
html body .Hint-window {
    width: auto !important; max-width: 92% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border-radius: 999px !important;
    /* fixed dark pill so it reads on BOTH light and dark themes */
    border: 1px solid rgba(255, 255, 255, 0.16) !important;
    background: #1b1f2a !important;
    background-color: #1b1f2a !important;
    color: #ffffff !important;
    box-shadow: 0 14px 32px -12px rgba(0,0,0,.5) !important;
    overflow: hidden !important;
    pointer-events: none !important;
    animation: q-toast 1.85s ease forwards;
}
html body .Hint-content {
    display: flex !important; align-items: center; justify-content: center;
    flex-direction: row !important;
    padding: 11px 22px !important;
    font-family: 'Montserrat', 'Nunito', sans-serif !important;
    font-size: 14.5px !important; font-weight: 700 !important;
    letter-spacing: .01em;
    text-transform: none !important;
    color: #ffffff !important;
    background: transparent !important;
}
/* keep the toast identical in dark theme (crisp dark pill, white text) */
body.dark html body .Hint-window,
html.dark body .Hint-window {
    background: #1b1f2a !important;
    background-color: #1b1f2a !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
}
body.dark html body .Hint-content,
html.dark body .Hint-content {
    color: #ffffff !important;
}
@keyframes q-toast {
    0%   { transform: translateY(-140%); opacity: 0; }
    14%  { transform: translateY(0); opacity: 1; }
    78%  { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(-140%); opacity: 0; }
}

/* -------- Keyboard: keep the used-letter indicator working ---------------
   The engine sets an inline `background: conic-gradient(...)` on each key to
   show per-board letter state (green/yellow/gray quadrants). We only provide a
   neutral DEFAULT here WITHOUT !important, and loaded after quordle.css, so the
   inline gradient always wins once a letter is used. */
html body .Game-keyboard-button {
    background: var(--q-cell, #e6eae3);
}
html.dark body .Game-keyboard-button,
body.dark .Game-keyboard-button {
    background: var(--q-cell, #2a2f3a);
}

/* Backspace: unicode ⌫ on iOS renders tiny. Class is toggled in qwin.js;
   the glyph is a CSS mask so we never replace React's button children. */
html body .Game-keyboard-button.q-key-backspace {
    font-size: 0 !important;
    line-height: 0 !important;
    letter-spacing: 0 !important;
}
html body .Game-keyboard-button.q-key-backspace::after {
    content: "";
    width: 20px;
    height: 20px;
    display: block;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='black' stroke-width='2.05' stroke-linejoin='round' d='M21.2 5H8.4c-.5 0-1 .2-1.3.6L1.5 11.4c-.4.5-.4 1.2 0 1.7l5.6 5.8c.3.4.8.6 1.3.6h12.8A1.8 1.8 0 0 0 23 17.7V6.3A1.8 1.8 0 0 0 21.2 5z'/%3E%3Cpath fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' d='M17.2 9.2l-6 6M11.2 9.2l6 6'/%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'%3E%3Cpath fill='none' stroke='black' stroke-width='2.05' stroke-linejoin='round' d='M21.2 5H8.4c-.5 0-1 .2-1.3.6L1.5 11.4c-.4.5-.4 1.2 0 1.7l5.6 5.8c.3.4.8.6 1.3.6h12.8A1.8 1.8 0 0 0 23 17.7V6.3A1.8 1.8 0 0 0 21.2 5z'/%3E%3Cpath fill='none' stroke='black' stroke-width='2.05' stroke-linecap='round' d='M17.2 9.2l-6 6M11.2 9.2l6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (max-width: 768px) {
    html body .Game-keyboard-button.q-key-backspace::after {
        width: 24px;
        height: 24px;
    }
}

/* -------- Header layout with 3 groups: logo | mode | icons -------------- */
html body .App-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    height: auto !important;
    min-height: 44px !important;
    /* Sit above the game board so header tooltips aren't covered by it */
    position: relative !important;
    z-index: 100 !important;
}

/* -------- Daily / Unlimited segmented toggle (in the header) ------------ */
html body .qmode {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: fit-content;
    margin: 0 !important;
    padding: 3px !important;
    border-radius: 999px;
    background: var(--q-surface-2, #f3f7f4) !important;
    border: 1px solid var(--q-border, #e4e9e2) !important;
    box-shadow: none !important;
}
html body .qmode__opt {
    appearance: none;
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 78px;
    padding: 6px 14px;
    border-radius: 999px;
    font-family: 'Montserrat', 'Nunito', sans-serif;
    font-size: 13.5px; font-weight: 800;
    letter-spacing: .01em;
    color: var(--q-muted, #69758e);
    text-decoration: none !important;
    cursor: pointer;
    white-space: nowrap;
    transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}
html body .qmode__opt:hover { color: var(--q-ink, #161c2d); }
html body .qmode__opt.is-active {
    background: var(--q-green, #22c55e);
    color: #fff;
    box-shadow: 0 8px 16px -8px rgba(34, 197, 94, 0.7);
}
html body .qmode__opt.is-active:hover { color: #fff; }
body.dark .qmode__opt:hover { color: var(--q-ink, #e6e8ec); }

/* Mobile: swap the pills for a compact dropdown */
html body .qmode__select {
    display: none;
    appearance: none; -webkit-appearance: none;
    border: 1px solid var(--q-border, #e4e9e2);
    background: var(--q-surface, #fff);
    color: var(--q-ink, #161c2d);
    font-family: 'Montserrat', 'Nunito', sans-serif;
    font-weight: 800; font-size: 13px;
    padding: 7px 26px 7px 12px;
    border-radius: 999px;
    cursor: pointer;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2369758e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
}
@media (max-width: 559px) {
    html body .qmode {
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
    }
    html body .qmode__opt { display: none; }
    html body .qmode__select { display: block; }
    html body .logo_word__text { display: none !important; }
}

/* -------- Give up: flag icon in the header (proxies the hidden button) ---
   Hide the engine's in-row "Give up" (only present while playing); the action
   now lives on the header flag icon. "Start over" renders in .Game-options
   WITHOUT the -playing modifier, so it stays visible when the game ends. */
html body #root .Game-options-playing .App-button-marked { display: none !important; }

/* Hide the technical "seed …, length …, game …" line (not useful, and it also
   shows an unfilled {Quordlength} placeholder). */
html body #root .Game-seed-info { display: none !important; }
html body #root .Game-options-playing { min-height: 0 !important; padding: 0 !important; margin: 0 !important; }

html body .q-icons { padding-left: 5px; }
html body .q-icon {
    display: none;
    align-items: center; justify-content: center;
    width: 38px; height: 38px; flex-shrink: 0;
    margin: 0; padding: 8px;
    border: 0; border-radius: 999px;
    background: transparent;
    color: var(--q-ink, #161c2d);
    cursor: pointer;
    transition: background .16s ease, color .16s ease;
}
html body #q_giveup.q-icon { padding-left: 11px; }
html body .q-icon.is-on { display: inline-flex; }
html body .q-icon svg { width: 100%; height: 100%; color: currentColor; stroke: currentColor; }
html body .q-icon:hover { background: var(--q-accent-soft); color: var(--q-accent-dark); }
body.dark html body .q-icon:hover { color: var(--q-accent); }

/* simple hover tooltip */
html body .q-tip { position: relative; }
html body .q-tip::after {
    content: attr(data-tip);
    position: absolute; top: calc(100% + 7px); left: 50%;
    transform: translateX(-50%) translateY(-3px);
    padding: 5px 9px; border-radius: 7px;
    background: var(--q-ink, #161c2d); color: var(--q-surface, #fff);
    font-family: 'Montserrat', 'Nunito', sans-serif;
    font-size: 12px; font-weight: 700; white-space: nowrap;
    opacity: 0; pointer-events: none;
    transition: opacity .14s ease, transform .14s ease;
    z-index: 10060;
}
html body .q-tip:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 479px) {
    html body .q-tip::after { display: none; } /* no hover on touch */
}

/* -------- Daily / Unlimited switch inside the statistics window --------- */
html body .App-statistics .qstats-tabs {
    display: flex; justify-content: center; gap: 4px;
    width: fit-content;
    margin: 2px auto 16px;
    padding: 4px;
    border-radius: 999px;
    background: var(--q-surface-2, #f3f7f4);
    border: 1px solid var(--q-border, #e4e9e2);
}
html body .qstats-tab {
    appearance: none; border: 0; cursor: pointer;
    min-width: 104px;
    padding: 7px 18px;
    border-radius: 999px;
    font-family: 'Montserrat', 'Nunito', sans-serif;
    font-size: 13.5px; font-weight: 800; letter-spacing: .01em;
    color: var(--q-muted, #69758e);
    background: transparent;
    transition: background .16s ease, color .16s ease, box-shadow .16s ease;
}
html body .qstats-tab:hover { color: var(--q-ink, #161c2d); }
html body .qstats-tab.is-active {
    background: var(--q-green, #22c55e);
    color: #fff;
    box-shadow: 0 8px 16px -8px rgba(34, 197, 94, 0.7);
}
html body .qstats-tab.is-active:hover { color: #fff; }
body.dark html body .qstats-tab:hover { color: var(--q-ink, #e6e8ec); }

/* Word-length selector inside the stats window */
html body .App-statistics .qstats-lens {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 6px;
    margin: -8px auto 16px;
}
html body .qstats-lens__label {
    font-family: 'Montserrat', 'Nunito', sans-serif;
    font-size: 12px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase;
    color: var(--q-muted, #69758e);
    margin-right: 4px;
}
html body .qstats-len {
    appearance: none; cursor: pointer;
    min-width: 34px;
    padding: 5px 9px;
    border-radius: 10px;
    border: 1px solid var(--q-border, #e4e9e2);
    background: var(--q-surface-2, #f3f7f4);
    color: var(--q-ink, #161c2d);
    font-family: 'Montserrat', 'Nunito', sans-serif;
    font-size: 13px; font-weight: 800;
    transition: background .16s ease, color .16s ease, box-shadow .16s ease, border-color .16s ease;
}
html body .qstats-len:hover { border-color: var(--q-green, #22c55e); color: var(--q-accent-dark, #15803d); }
html body .qstats-len.is-active {
    background: var(--q-green, #22c55e);
    border-color: var(--q-green, #22c55e);
    color: #fff;
    box-shadow: 0 8px 16px -8px rgba(34, 197, 94, 0.7);
}
html body .qstats-len.is-active:hover { color: #fff; }

/* -------- Daily archive: same in-page sheet as Settings / Stats / About ---
   Outer .qcal-page is NOT .App-page: a global `html body .App-page { display:block
   !important }` was forcing the archive to stay on screen after "close". */
#qgame-wrap > .qcal-page,
.qcal-page {
    display: none !important;
}
#qgame-wrap.qcal-open > .qcal-page {
    display: block !important;
}
#qgame-wrap.qcal-open > #root {
    display: none !important;
}
#qgame-wrap.qcal-open > #qloader {
    display: none !important;
    pointer-events: none !important;
}

html body .qcal {
    width: 100%;
    max-width: 100%;
    padding: 8px 2px 10px;
    background: transparent;
    color: var(--q-ink, #161c2d);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-family: 'Montserrat', 'Nunito', sans-serif;
}
html body .qcal__head {
    display: flex; align-items: center; gap: 8px;
    margin: 4px 0 12px;
    padding: 4px;
    background: var(--q-surface-2, #f3f7f4);
    border: 1px solid var(--q-border, #e4e9e2);
    border-radius: 999px;
}
html body .qcal__label {
    flex: 1; text-align: center;
    font-weight: 800; font-size: 15px;
    letter-spacing: -0.01em;
}
html body .qcal__nav {
    width: 36px; height: 36px; flex-shrink: 0;
    border: 0; border-radius: 999px; cursor: pointer;
    background: transparent; color: var(--q-ink, #161c2d);
    font-size: 22px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s ease, color .15s ease;
}
html body .qcal__nav:hover { background: var(--q-accent-soft); color: var(--q-accent-dark); }
html body .qcal__nav:disabled { opacity: .35; cursor: default; background: transparent; color: var(--q-muted); }
html body .qcal__dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 0 0 6px; }
html body .qcal__dow span { text-align: center; font-size: 11px; font-weight: 800; color: var(--q-muted, #69758e); text-transform: uppercase; }
html body .qcal__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
html body .qcal__day {
    position: relative;
    height: 46px; border: 0; border-radius: 12px; cursor: pointer;
    background: var(--q-surface-2, #f3f7f4);
    color: var(--q-ink, #161c2d);
    font-family: 'Montserrat', 'Nunito', sans-serif;
    font-size: 15px; font-weight: 700;
    transition: background .14s ease, color .14s ease, box-shadow .14s ease;
}
html body .qcal__day:hover { background: var(--q-accent-soft); color: var(--q-accent-dark); }
html body .qcal__day.is-empty { background: transparent; pointer-events: none; }
html body .qcal__day.is-disabled { opacity: .3; pointer-events: none; background: transparent; }
html body .qcal__day.is-today { box-shadow: inset 0 0 0 2px var(--q-accent, #22c55e); }
html body .qcal__day.is-selected { background: var(--q-green, #22c55e) !important; color: #fff !important; box-shadow: 0 8px 16px -8px rgba(34,197,94,.7); }
html body .qcal__day.is-won  { box-shadow: inset 0 0 0 1px var(--q-green, #22c55e); }
html body .qcal__day.is-done { box-shadow: inset 0 0 0 1px rgba(148,163,175,.7); }
html body .qcal__badge {
    position: absolute; top: 4px; right: 5px;
    width: 14px; height: 14px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 9px; font-weight: 900; line-height: 1; color: #fff;
    box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
html body .qcal__day.is-won  .qcal__badge { background: var(--q-green, #22c55e); }
html body .qcal__day.is-done .qcal__badge { background: #9aa3af; }
html body .qcal__day.is-progress .qcal__badge { background: var(--q-yellow, #eab308); color: #3a2f00; }
html body .qcal__day.is-selected .qcal__badge { box-shadow: 0 0 0 1.5px rgba(255,255,255,.85); }
html body .qcal__foot {
    margin-top: 16px;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
}
html body .qcal__today {
    border: 1px solid var(--q-border, #e4e9e2); cursor: pointer;
    background: var(--q-surface-2, #f3f7f4); color: var(--q-ink, #161c2d);
    font-family: 'Montserrat', 'Nunito', sans-serif; font-weight: 800; font-size: 13px;
    padding: 8px 16px; border-radius: 999px;
    transition: background .15s ease, color .15s ease;
}
html body .qcal__today:hover { background: var(--q-accent-soft); color: var(--q-accent-dark); }
html body .qcal__legend {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 14px;
    font-size: 12px; font-weight: 700; color: var(--q-muted, #69758e);
}
html body .qcal__legend span { display: inline-flex; align-items: center; gap: 6px; }
html body .qcal__swatch {
    width: 10px; height: 10px; border-radius: 50%; display: inline-block;
}
html body .qcal__swatch.is-won { background: var(--q-green, #22c55e); }
html body .qcal__swatch.is-done { background: #9aa3af; }
html body .qcal__swatch.is-progress { background: var(--q-yellow, #eab308); }
body.dark html body .qcal__head,
body.dark html body .qcal__day,
body.dark html body .qcal__today {
    background: var(--q-surface-2, #191c21);
}

/* ============================================================================
   Long-word modes (7-11 letters). qwin.js sets body[data-qlen] to the current
   word length so the board layout can adapt. Tiles already auto-fit their row
   width via flexbox, so the only real problems are (a) desktop tiles getting
   small and (b) mobile tiles becoming unreadable with two boards side-by-side.
   ============================================================================ */

/* Desktop: give longer words more horizontal room so tiles stay comfortable. */
@media (min-width: 700px) {
    html body[data-qlen="7"]  .game__container-inner,
    html body[data-qlen="8"]  .game__container-inner,
    html body[data-qlen="9"]  .game__container-inner,
    html body[data-qlen="10"] .game__container-inner,
    html body[data-qlen="11"] .game__container-inner { max-width: 740px; }
}

/* Mobile: two boards per row make long words tiny, so stack the four boards
   into a single full-width column — each board then uses the whole screen
   width and the letters stay readable. */
@media (max-width: 640px) {
    html body[data-qlen="7"]  .game__boards-row,
    html body[data-qlen="8"]  .game__boards-row,
    html body[data-qlen="9"]  .game__boards-row,
    html body[data-qlen="10"] .game__boards-row,
    html body[data-qlen="11"] .game__boards-row { flex-direction: column; }
}

/* Scale the glyph down a touch at the largest lengths so it never clips. */
html body[data-qlen="9"]  .Row-letter { font-size: 15px; }
html body[data-qlen="10"] .Row-letter { font-size: 14px; }
html body[data-qlen="11"] .Row-letter { font-size: 13px; }

/* ============================================================================
   Loading state. While the engine bundle + dictionaries load and mount, #root
   is empty and the raw board/keyboard pop in with layout shifts. We reserve the
   space and cover it with a themed tile spinner until qwin.js says it's ready.
   ============================================================================ */
#qgame-wrap { position: relative; }
#qgame-wrap.qloading { min-height: min(74vh, 560px); }

#qloader {
    position: absolute; inset: 0; z-index: 6;
    display: none;
    flex-direction: column; align-items: center; justify-content: center;
    gap: 16px;
    background: #fff;
}
body.dark #qloader { background: #404040; }
#qgame-wrap.qloading #qloader { display: flex; }

.qloader__quad {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: 8px;
    width: 84px; height: 84px;
}
.qloader__tile {
    border-radius: 10px;
    background: var(--q-cell, #e7ebf1);
    animation: qloaderPulse 1.25s infinite ease-in-out;
}
body.dark .qloader__tile { background: #5a5a5a; }
.qloader__tile:nth-child(1) { animation-delay: 0s; }
.qloader__tile:nth-child(2) { animation-delay: .16s; }
.qloader__tile:nth-child(4) { animation-delay: .32s; }
.qloader__tile:nth-child(3) { animation-delay: .48s; }
@keyframes qloaderPulse {
    0%, 100% { transform: scale(.72); background: var(--q-cell, #e7ebf1); }
    35%      { transform: scale(1);   background: var(--q-green, #22c55e); }
    65%      { transform: scale(1);   background: var(--q-yellow, #eab308); }
}
body.dark .qloader__tile { animation-name: qloaderPulseDark; }
@keyframes qloaderPulseDark {
    0%, 100% { transform: scale(.72); background: #5a5a5a; }
    35%      { transform: scale(1);   background: var(--q-green, #22c55e); }
    65%      { transform: scale(1);   background: var(--q-yellow, #eab308); }
}
.qloader__text {
    font-family: 'Montserrat', 'Nunito', sans-serif;
    font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
    color: var(--q-muted, #69758e);
}
@media (prefers-reduced-motion: reduce) {
    .qloader__tile { animation-duration: 2.4s; }
}

/* ============================================================================
   Mobile app install banner. smartbanner.js paints a 2014-era gray strip;
   restyle it to match the site and keep Ezoic/AdSense out of it.
   ============================================================================ */
html.smartbanner-show,
html:has(.smartbanner) {
    margin-top: 0 !important;
    padding-top: 68px !important;
}
html body .smartbanner,
html body .smartbanner.smartbanner--ios,
html body .smartbanner.smartbanner--android,
html body .smartbanner.smartbanner--quordle {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px;
    width: 100% !important;
    height: 68px !important;
    padding: 8px 12px 8px 8px !important;
    overflow: hidden;
    isolation: isolate;
    z-index: 10050 !important;
    box-sizing: border-box;
    background: var(--q-surface, #fff) !important;
    border: 0 !important;
    border-bottom: 1px solid var(--q-border, rgba(20,20,20,.10)) !important;
    font-family: 'Montserrat', 'Nunito', sans-serif !important;
    box-shadow: none !important;
}
html body .smartbanner ins.adsbygoogle,
html body .smartbanner .ezoic-ad,
html body .smartbanner [id^="ezoic-pub-ad"],
html body .smartbanner iframe[id*="google_ads"] { display: none !important; }

html body .smartbanner__exit,
html body .smartbanner.smartbanner--android .smartbanner__exit {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    display: inline-flex !important;
    align-items: center; justify-content: center;
    width: 28px !important; height: 28px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--q-surface-2, #f3f7f4) !important;
    color: var(--q-muted, #69758e) !important;
    flex-shrink: 0;
    cursor: pointer;
}
html body .smartbanner__exit::before,
html body .smartbanner__exit::after,
html body .smartbanner.smartbanner--android .smartbanner__exit::before,
html body .smartbanner.smartbanner--android .smartbanner__exit::after {
    top: 50% !important; left: 50% !important;
    width: 12px !important; height: 2px !important;
    background: currentColor !important;
    border-radius: 2px;
}
html body .smartbanner__exit::before { transform: translate(-50%, -50%) rotate(45deg) !important; }
html body .smartbanner__exit::after  { transform: translate(-50%, -50%) rotate(-45deg) !important; }

html body .smartbanner__icon,
html body .smartbanner.smartbanner--android .smartbanner__icon {
    position: relative !important;
    top: auto !important; left: auto !important;
    width: 48px !important; height: 48px !important;
    border-radius: 12px !important;
    background-size: cover !important;
    background-color: var(--q-green, #22c55e) !important;
    box-shadow: 0 6px 14px -6px rgba(22, 163, 74, 0.55);
    flex-shrink: 0;
}

html body .smartbanner__info,
html body .smartbanner.smartbanner--android .smartbanner__info {
    position: relative !important;
    top: auto !important; left: auto !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    width: auto !important;
    height: auto !important;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    color: var(--q-ink, #161c2d) !important;
    line-height: 1.2 !important;
    text-align: left;
}
html body .smartbanner__info__title,
html body .smartbanner.smartbanner--android .smartbanner__info__title {
    font-family: 'Montserrat', 'Nunito', sans-serif !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em;
    color: var(--q-ink, #161c2d) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
html body .smartbanner__info__author,
html body .smartbanner__info__price,
html body .smartbanner.smartbanner--android .smartbanner__info__author,
html body .smartbanner.smartbanner--android .smartbanner__info__price {
    font-size: 11px !important;
    font-weight: 700 !important;
    color: var(--q-muted, #69758e) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

html body .smartbanner__button,
html body .smartbanner.smartbanner--android .smartbanner__button {
    position: relative !important;
    top: auto !important; right: auto !important;
    display: inline-flex !important;
    align-items: center; justify-content: center;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    flex-shrink: 0;
}
html body .smartbanner__button__label,
html body .smartbanner.smartbanner--android .smartbanner__button__label {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    min-width: 64px;
    padding: 8px 16px !important;
    border-radius: 999px !important;
    background: var(--q-green, #22c55e) !important;
    color: #fff !important;
    box-shadow: 0 8px 16px -8px rgba(34, 197, 94, 0.7);
    line-height: 1 !important;
    text-transform: uppercase;
    letter-spacing: .04em;
    text-shadow: none !important;
}
html body .smartbanner__button:hover .smartbanner__button__label,
html body .smartbanner.smartbanner--android .smartbanner__button__label:hover {
    background: var(--q-accent-dark, #16a34a) !important;
}

html body.dark .smartbanner,
html body.dark .smartbanner.smartbanner--android {
    background: var(--q-surface, #1e2126) !important;
    border-bottom-color: var(--q-border, rgba(255,255,255,.09)) !important;
}
html body.dark .smartbanner__exit {
    background: var(--q-surface-2, #191c21) !important;
    color: var(--q-muted, #a2a9b4) !important;
}
html body.dark .smartbanner__info,
html body.dark .smartbanner__info__title { color: var(--q-ink, #e6e8ec) !important; }

@media (max-width: 900px) {
    ins.adsbygoogle[data-anchor-status][style*="top: 0"],
    ins.adsbygoogle[data-anchor-status][style*="top:0"],
    .google-auto-placed[style*="top: 0"],
    .ez-sticky-ad-top,
    .ezoic-floating-top { display: none !important; }
}