@charset "UTF-8"; /* ============================================================ WORDLEPLAY — BOARD REDESIGN LAYER Оверрайд поверх static/css/main.2de5550b.css. Осовременивает игровое поле, клавиатуру и окна, сохраняя классическую 3-цветную схему (серый/жёлтый/зелёный). Подключается ПОСЛЕ main.*.css (в ), чтобы выигрывать каскад. ============================================================ */ /* --- Палитра доски (ретюн, в духе оригинала) --- */ body { --letter-neutral: #eef1f7; /* нейтральная (клавиши) */ --letter-correct: #16a34a; /* зелёный бренд */ --letter-elsewhere: #eab308; /* жёлтый */ --letter-absent: #94a3b8; /* серый */ --letter-text: #fff; --cell-empty-bg: #ffffff; --cell-empty-border: #dbe1ee; --cell-filled-border: #b7c0d6; --key-bg: #e7ebf3; --key-shadow: 0 2px 0 rgba(15,23,42,.10); /* Окна (как на quordly.org) */ --wp-win-ink: var(--wp-ink, #14181f); --wp-win-muted: var(--wp-ink-soft, #55606f); --wp-win-border: var(--wp-line, rgba(15, 23, 42, .08)); --wp-win-surface: var(--wp-surface, #ffffff); --wp-win-surface-2: #f3f5f8; --wp-win-accent: #16a34a; --wp-win-accent-soft: #dcfce7; --wp-win-accent-dark: #12833c; } body.dark { --letter-neutral: #475569; --letter-correct: #22a55d; --letter-elsewhere: #c6a934; --letter-absent: #2b3646; --cell-empty-bg: #0f1a2e; --cell-empty-border: #2a3852; --cell-filled-border: #3a4a67; --key-bg: #33415a; --key-shadow: 0 2px 0 rgba(0,0,0,.35); --wp-win-ink: #e6e8ec; --wp-win-muted: #9aa3b2; --wp-win-border: rgba(255, 255, 255, .09); --wp-win-surface: #161b22; --wp-win-surface-2: #1d232c; --wp-win-accent: #22a55d; --wp-win-accent-soft: rgba(34, 165, 93, .18); --wp-win-accent-dark: #4ade80; } /* --- Плитки --- */ .cell { background-color: var(--cell-empty-bg); border: 2px solid var(--cell-empty-border); border-radius: 12px; font-size: 30px; font-weight: 800; height: 58px; max-width: 58px; margin: 4px; color: var(--text); transition: transform .12s cubic-bezier(.22,1,.36,1), border-color .12s ease, background-color .12s ease; } body.dark .cell { border: 2px solid var(--cell-empty-border); } /* Набранная, но не отправленная буква — заметнее рамка + лёгкий «поп» */ .cell-fill-animation { border-color: var(--cell-filled-border); box-shadow: 0 2px 6px rgba(15,23,42,.08); } /* Раскрытые состояния — сплошная заливка, без рамки */ .cell.absent, .cell.elsewhere, .cell.correct { border-color: transparent; box-shadow: 0 3px 8px rgba(15,23,42,.10); } .cell.correct { background-color: var(--letter-correct); } .cell.elsewhere{ background-color: var(--letter-elsewhere); } .cell.absent { background-color: var(--letter-absent); } @media screen and (max-width:550px){ .cell { height: 50px; max-width: 50px; border-radius: 10px; margin: 3px; font-size: 26px; } } /* --- Клавиатура --- */ .Game-keyboard { gap: 0; } .Game-keyboard-button { background-color: var(--key-bg); border-radius: 10px; min-height: 48px; margin: 3px; font-size: 17px; font-weight: 800; color: var(--text); box-shadow: var(--key-shadow); transition: transform .08s ease, background-color .12s ease, box-shadow .08s ease; } .Game-keyboard-button:hover { background-color: #dbe1ee; } .Game-keyboard-button:active { transform: translateY(1px); box-shadow: none; } body.dark .Game-keyboard-button:hover { background-color: #3d4d68; } /* Цветные клавиши-подсказки (после ходов) */ .Game-keyboard-button.correct { background-color: var(--letter-correct); color: #fff; box-shadow: none; } .Game-keyboard-button.elsewhere{ background-color: var(--letter-elsewhere); color: #fff; box-shadow: none; } .Game-keyboard-button.absent { background-color: var(--letter-absent); color: #fff; box-shadow: none; } /* Широкие клавиши (Enter / Backspace) — акцентный вид */ .Game-keyboard-button-wide { background-color: #d7e3f6; text-transform: uppercase; font-size: 13px; letter-spacing: .3px; } .Game-keyboard-button-wide:hover { background-color: #c3d4f0; } body.dark .Game-keyboard-button-wide { background-color: #3a4c6b; } /* Backspace: unicode ⌫ на iOS рисуется крошечным — ставим SVG */ html body .Game-keyboard-button.wp-key-backspace { font-size: 0 !important; line-height: 0 !important; letter-spacing: 0 !important; } html body .Game-keyboard-button.wp-key-backspace svg.wp-backspace-icon { width: 19px; height: 19px; display: block; flex-shrink: 0; pointer-events: none; stroke: currentColor; } @media screen and (max-width:768px){ .Game-keyboard-button { min-height: 52px; border-radius: 8px; margin: 2.5px; } html body .Game-keyboard-button.wp-key-backspace svg.wp-backspace-icon { width: 23px; height: 23px; } } /* --- Верхняя панель / кнопки --- */ .App-button { border-radius: 10px; transition: background-color .15s ease, transform .1s ease; } .App-button-marked { border-radius: 12px; } .App-button-circle, .App-button-circle-fixed { border-radius: 12px; border: 1px solid var(--cell-empty-border); transition: background-color .15s ease, border-color .15s ease, transform .1s ease; } .App-button-circle:hover, .App-button-circle-fixed:hover { transform: translateY(-1px); } .page-icon svg { border-radius: 12px; border-color: var(--cell-empty-border); transition: background-color .15s ease, color .15s ease, transform .1s ease; } .page-icon svg:hover { background-color: #eafaf0; color: #16a34a; transform: translateY(-1px); } /* Бургер: иконка как остальные, меню — карточка в стиле окон */ html body .page-icon:has(.dropdown) { position: relative !important; overflow: visible !important; z-index: 30; } html body .page-icon .dropdown { display: inline-block !important; position: relative !important; overflow: visible !important; } html body .page-icon:has(.dd_input:checked) svg { background-color: var(--wp-win-accent-soft) !important; color: var(--wp-win-accent-dark) !important; border-color: #bbf7d0 !important; } html body .dd_menu { min-width: 204px !important; margin: 8px 0 0 !important; padding: 8px !important; background: var(--wp-win-surface) !important; background-color: var(--wp-win-surface) !important; border: 1px solid var(--wp-win-border) !important; border-radius: 16px !important; box-shadow: 0 14px 36px rgba(15, 23, 42, .14) !important; z-index: 40 !important; right: 0 !important; top: 100% !important; } html body .dd_menu li { padding: 12px 14px !important; border-radius: 12px !important; font-size: 15px !important; font-weight: 700 !important; letter-spacing: -0.01em; color: var(--wp-win-ink) !important; line-height: 1.25 !important; } html body .dd_menu li + li { margin-top: 2px !important; } html body .dd_menu li:hover { background: var(--wp-win-accent-soft) !important; color: var(--wp-win-accent-dark) !important; } html body .dd_menu li a { color: inherit !important; margin: -12px -14px !important; padding: 12px 14px !important; border-radius: 12px !important; } html body .dd_menu li.divider { border-bottom: 1px solid var(--wp-win-border) !important; margin: 6px 4px !important; padding: 0 !important; } body.dark html body .page-icon:has(.dd_input:checked) svg { border-color: rgba(34, 165, 93, .45) !important; } body.dark html body .dd_menu { box-shadow: 0 16px 40px rgba(0, 0, 0, .45) !important; } /* --- Режимы Today / Unlimited --- */ .mode-button { border-radius: 999px; border: 1px solid var(--cell-empty-border); padding: 6px 12px; transition: background-color .15s ease, color .15s ease, border-color .15s ease; } .mode-button.active { background-color: var(--wp-win-accent); border-color: var(--wp-win-accent); color: #fff; } body.dark .mode-button.active { background-color: var(--wp-win-accent); border-color: var(--wp-win-accent); } #select-show-button { background-color: var(--wp-win-accent); border-radius: 12px; font-weight: 800; box-shadow: 0 8px 20px rgba(22,163,74,.28); } #select-show-button:hover { background-color: var(--wp-win-accent-dark); } /* ============================================================ ОКНА — как на quordly.org In-place: Settings / Stats / About / Archive без серой плашки, только текст + нижняя линия + круглый X Overlay: Generator / Result — плавающая карточка 22px ============================================================ */ html body .App-page { position: relative !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(--wp-win-ink) !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; text-align: left !important; } html body .App-page > .App-title, html body .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(--wp-win-ink) !important; border: 0 !important; border-bottom: 1px solid var(--wp-win-border) !important; border-radius: 0 !important; box-shadow: none !important; font-size: 20px !important; font-weight: 800 !important; letter-spacing: -0.02em !important; line-height: 48px !important; } html body .App-title-content { padding: 0 !important; width: auto !important; max-width: 100%; font-size: inherit !important; font-weight: 800 !important; letter-spacing: -0.02em !important; color: inherit !important; } /* Круглый CSS-крестик: прячем SVG у Settings и у плавающих окон */ html body .App-title-close, html body .App-button-close { position: absolute !important; top: 6px !important; right: 6px !important; left: auto !important; width: 36px !important; height: 36px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; background-color: transparent !important; border: 0 !important; border-radius: 50% !important; z-index: 2; cursor: pointer; color: var(--wp-win-muted) !important; display: block !important; } html body .App-title-close svg, html body .App-button-close svg { display: none !important; } html body .App-title-close:before, html body .App-title-close:after, 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 !important; background: currentColor !important; background-color: currentColor !important; } html body .App-title-close:before, html body .App-button-close:before { transform: translate(-50%, -50%) rotate(45deg) !important; } html body .App-title-close:after, html body .App-button-close:after { transform: translate(-50%, -50%) rotate(-45deg) !important; } html body .App-title-close:hover, html body .App-button-close:hover { background: var(--wp-win-accent-soft) !important; color: var(--wp-win-accent-dark) !important; } html body .App-page .app-statistics, 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(--wp-win-ink) !important; } body.dark html body .App-page, body.dark html body .App-page > .App-title, body.dark html body .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(--wp-win-ink) !important; } body.dark html body .App-page > .App-title, body.dark html body .App-title { border-bottom-color: var(--wp-win-border) !important; } /* ---- Settings: каждая опция — карточка ---- */ html body .App-page .Settings > hr { display: none !important; height: 0 !important; margin: 0 !important; border: 0 !important; } html body .App-page .Settings-setting { display: block !important; align-items: stretch !important; position: relative !important; margin: 0 0 10px !important; padding: 16px 62px 16px 16px !important; background: var(--wp-win-surface-2) !important; border: 1px solid var(--wp-win-border) !important; border-radius: 16px !important; box-shadow: none !important; } html body .App-page .Settings-setting:first-child { padding-right: 16px !important; } html body .wp-archive-page .Settings-setting { padding: 8px 4px 12px !important; background: transparent !important; border: 0 !important; } html body .App-page .Settings-param-title { font-size: 15.5px !important; font-weight: 800 !important; margin: 0 0 4px !important; margin-left: 0 !important; margin-top: 0 !important; text-transform: none !important; text-align: left !important; color: var(--wp-win-ink) !important; } html body .wp-archive-page .Settings-param-title, html body .wp-archive-page .Settings-param-desc { text-align: center !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(--wp-win-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, html body .Top-window-content .App-button-circle, html body .Top-window-content .App-button-circle-fixed { width: 42px !important; height: 42px !important; margin: 10px 6px 0 0 !important; background: var(--wp-win-surface) !important; border: 1px solid var(--wp-win-border) !important; border-radius: 50% !important; color: var(--wp-win-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(--wp-win-accent) !important; color: #fff !important; border-color: transparent !important; } html body .App-button-circle:hover, html body .App-button-circle-fixed:hover { background: var(--wp-win-accent-soft) !important; color: var(--wp-win-accent-dark) !important; border-color: transparent !important; } /* Тумблер как на quordly */ 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(--wp-win-border) !important; background: #e2e8f0 none no-repeat !important; background-image: none !important; box-shadow: 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(--wp-win-accent) !important; border-color: var(--wp-win-accent) !important; background-image: none !important; } html body input.App-switch-checkbox:checked::after { transform: translateX(18px); } body.dark html body input.App-switch-checkbox { background-color: #3a4454 !important; } html body .Settings-setting input[type=radio] { accent-color: var(--wp-win-accent); } /* ---- Stats ---- */ 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: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 10px !important; margin: 0 0 12px !important; padding: 0 !important; justify-content: stretch !important; } /* Мобильные: две группы по 3 карточки сливаются в одну сетку 2×3 */ @media (max-width: 720px) { html body .stats-content { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; } html body .stats-container { display: contents !important; margin: 0 !important; gap: 0 !important; } html body .stats-chart { grid-column: 1 / -1 !important; margin-top: 2px !important; } } html body .stat-item { flex: none !important; width: auto !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; margin: 0 !important; padding: 14px 8px 12px !important; background: var(--wp-win-surface-2) !important; border: 1px solid var(--wp-win-border) !important; border-radius: 16px !important; box-shadow: none !important; text-align: center !important; color: var(--wp-win-ink) !important; } html body .stat-value { font-weight: 800 !important; font-size: 26px !important; letter-spacing: -0.03em; color: var(--wp-win-ink) !important; line-height: 1.1 !important; } html body .stat-description { margin-top: 6px; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .04em; line-height: 1.3 !important; color: var(--wp-win-muted) !important; } html body .stats-chart { margin: 8px 0 4px !important; padding: 16px !important; background: var(--wp-win-surface-2) !important; border: 1px solid var(--wp-win-border) !important; border-radius: 16px !important; } html body .chart-title { font-weight: 800 !important; font-size: 15px !important; text-align: left !important; margin: 0 0 12px !important; color: var(--wp-win-ink) !important; } html body .stats-chart table { display: block !important; height: auto !important; width: 100% !important; border-collapse: collapse !important; } html body .stats-chart tbody { display: block; width: 100%; } html body .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 .stats-chart td { display: block !important; padding: 0 !important; border: 0 !important; height: auto !important; } html body .stats-chart .number { font-weight: 800 !important; font-size: 13px !important; padding: 0 !important; color: var(--wp-win-muted) !important; } html body .stats-chart .amount { font-weight: 800 !important; font-size: 13px !important; padding: 0 !important; text-align: right !important; color: var(--wp-win-ink) !important; } html body .stats-chart .percentage, html body .stats-chart table .percentage { display: block !important; width: 100% !important; height: 18px !important; background: var(--cell-empty-border, #e6eae3) !important; color: transparent !important; font-size: 0 !important; border-radius: 999px !important; overflow: hidden !important; position: relative !important; line-height: 18px !important; padding: 0 !important; } html body .stats-chart .percentage span, html body .stats-chart table td .percentage span { position: absolute !important; left: 0; top: 0; bottom: 0; height: 100% !important; background: var(--wp-win-accent) !important; color: transparent !important; border-radius: 999px !important; min-width: 0 !important; padding: 0 !important; } html body .stats-share-button { background: var(--wp-win-accent) !important; color: #fff !important; border: 0 !important; border-radius: 12px !important; box-shadow: 0 6px 16px rgba(22,163,74,.25); font-weight: 800 !important; } html body .stats-share-button:hover { background: var(--wp-win-accent-dark) !important; } /* ---- About ---- */ html body .App-page .App-about { display: flex !important; flex-direction: column; gap: 12px; padding: 16px 4px 12px !important; } html body .App-page .App-about .text, 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(--wp-win-muted) !important; text-align: left !important; } html body .App-page .App-about .row { display: flex !important; flex-direction: row; align-items: center; justify-content: center; flex-wrap: wrap; gap: 5px; height: auto !important; width: 100% !important; margin: 4px 0 8px !important; padding: 18px 14px !important; background: var(--wp-win-surface-2) !important; border: 1px solid var(--wp-win-border) !important; border-radius: 16px !important; } html body .App-page .App-about .cell { width: 36px !important; height: 36px !important; max-width: 36px !important; min-width: 36px !important; font-size: 16px !important; margin: 0 !important; border-radius: 8px !important; } html body .App-page .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(--letter-absent, #94a3b8) !important; color: #fff !important; font-weight: 800 !important; } html body .App-page .App-about b.correct { background: var(--letter-correct, #16a34a) !important; } html body .App-page .App-about b.elsewhere { background: var(--letter-elsewhere, #eab308) !important; } html body .App-page .App-about b.absent { background: var(--letter-absent, #94a3b8) !important; } /* ========== Overlay: Generator / Result ========== */ 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; height: 100% !important; width: 100% !important; left: 0 !important; top: 0 !important; right: 0 !important; bottom: 0 !important; } html body .Top-window-background::before { display: none !important; content: none !important; } html body .Top-window-frame { display: flex !important; flex-direction: column !important; width: 460px !important; max-width: calc(100vw - 24px) !important; margin: 0 auto !important; border-radius: 22px !important; border: 1px solid var(--wp-win-border) !important; background: var(--wp-win-surface) !important; color: var(--wp-win-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; flex-shrink: 0; } html body .Top-window-frame:has(.App-statistics), 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(--wp-win-surface) !important; background-color: var(--wp-win-surface) !important; color: var(--wp-win-ink) !important; border: 0 !important; border-bottom: 1px solid var(--wp-win-border) !important; border-radius: 22px 22px 0 0 !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(--wp-win-ink) !important; background: var(--wp-win-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(--wp-win-surface) !important; background-color: var(--wp-win-surface) !important; color: var(--wp-win-ink) !important; } html body .Top-window-content .App-button { width: 100%; margin: 8px 0 0 !important; border-radius: 999px !important; background: var(--wp-win-surface-2) !important; border: 1px solid var(--wp-win-border) !important; color: var(--wp-win-ink) !important; font-weight: 800 !important; box-shadow: none !important; } html body .Top-window-content .App-button:hover { background: var(--wp-win-accent-soft) !important; color: var(--wp-win-accent-dark) !important; border-color: transparent !important; } html body .App-button-marked { background: var(--wp-win-accent) !important; color: #fff !important; border: none !important; border-radius: 14px !important; box-shadow: 0 8px 20px rgba(22,163,74,.28); } html body .App-button-marked:hover { background: var(--wp-win-accent-dark) !important; } html body .App-button-marked .App-button-icon svg { stroke: #fff; fill: #fff; } html body .Top-window-content .App-button-marked { background: var(--wp-win-accent) !important; color: #fff !important; border: none !important; } .App-button { background: #eef2f9; color: #3a4457; border: 1px solid var(--cell-empty-border); box-shadow: none; font-weight: 700; border-radius: 999px; transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease; } .App-button:hover { background: #e5fbec; border-color: rgba(22,163,74,.30); color: #14532d; } .App-button:disabled { background-color: #eef2f9; color: #aab2c0; border-color: var(--cell-empty-border); } body.dark .App-button { background: #2a3852; color: hsla(0,0%,100%,.9); border-color: rgba(255,255,255,.10); } body.dark .App-button:hover { background: #264a34; border-color: #22a55d; color: #fff; } .button-startover, .button-giveup { border-radius: 999px; border: 1px solid var(--cell-empty-border); transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease; } .button-startover { background: #e5fbec; color: #14532d; } .button-startover:hover { background: #c9f6d8; border-color: rgba(22,163,74,.35); } .button-giveup { background: #eef2f9; color: #3a4457; } .button-giveup:hover { background: #fde7ea; border-color: rgba(220,60,80,.35); color: #8a1c2b; } html body .Result-window-content { display: flex !important; flex-direction: column; align-items: center; gap: 10px; } html body .Result-window-content > span { color: var(--wp-win-muted) !important; font-size: 14.5px !important; margin: 0 !important; } html body .Result-window-answer { background: var(--wp-win-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 .Result-window-link { color: var(--wp-win-accent-dark) !important; font-weight: 700; } html body .Generator-content-input, html body .Generator-content-input-good, html body .Generator-content-input-warn { border: 2px solid var(--wp-win-border) !important; border-radius: 12px !important; background: var(--wp-win-surface) !important; color: var(--wp-win-ink) !important; } html body .Generator-content-input:focus { outline: none; border-color: var(--wp-win-accent) !important; } html body .Generator-content-input-good { background: #dcfce7 !important; border-color: rgba(22,163,74,.45) !important; } html body .Generator-content-input-warn { background: #fde7ea !important; border-color: rgba(220,60,80,.45) !important; } html body .Generator-content-text, html body .Generator-content-text-small { color: var(--wp-win-muted) !important; } /* Generator: in-page sheet from FIRST paint (no popup flash). :has() applies in the same frame React mounts the overlay. */ html body .App-container:has(.Generator-content) > .Game, html body .App-container:has(.Generator-content) > .Game-keyboard, html body .App-container:has(.Generator-content) > .Game-options, html body .App-container:has(.Generator-content) > .Game-challenge-bar, html body .App-container:has(.Generator-content) > .Game-hint-bar, html body .App-container:has(.Generator-content) > .Game-info, html body .App-container:has(.Generator-content) > .mode-button__container, html body .App-container:has(.dict-loader__container) > .Game, html body .App-container:has(.dict-loader__container) > .Game-keyboard, html body .App-container:has(.dict-loader__container) > .Game-options, html body .App-container:has(.dict-loader__container) > .Game-challenge-bar, html body .App-container:has(.dict-loader__container) > .Game-hint-bar, html body .App-container:has(.dict-loader__container) > .Game-info, html body .App-container:has(.dict-loader__container) > .mode-button__container { display: none !important; } html body .App-container:has(.Generator-content) > .Top-window-background:not(:has(.Generator-content)):not(:has(.dict-loader__container)), html body .App-container:has(.dict-loader__container) > .Top-window-background:not(:has(.Generator-content)):not(:has(.dict-loader__container)) { display: none !important; pointer-events: none !important; } html body .Top-window-background:has(.Generator-content), html body .Top-window-background:has(.dict-loader__container) { position: relative !important; inset: auto !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; display: block !important; width: 100% !important; height: auto !important; max-height: none !important; padding: 0 !important; margin: 0 auto !important; background: transparent !important; background-color: transparent !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; z-index: auto !important; overflow: visible !important; } html body .Top-window-frame:has(.Generator-content), html body .Top-window-frame:has(.dict-loader__container) { width: 100% !important; max-width: 620px !important; margin: 2px auto 22px !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; background-color: transparent !important; box-shadow: none !important; max-height: none !important; overflow: visible !important; } html body .Top-window-frame:has(.Generator-content) .Top-window-title, html body .Top-window-frame:has(.dict-loader__container) .Top-window-title { height: 48px !important; min-height: 48px !important; background: transparent !important; background-color: transparent !important; border: 0 !important; border-bottom: 1px solid var(--wp-win-border) !important; border-radius: 0 !important; font-size: 20px !important; box-shadow: none !important; } html body .Top-window-frame:has(.Generator-content) .Top-window-content, html body .Top-window-frame:has(.dict-loader__container) .Top-window-content { padding: 8px 2px 12px !important; background: transparent !important; background-color: transparent !important; } html body .Generator-content { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 0 !important; width: 100% !important; } html body .Generator-content > div[style*="height"] { display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } html body .Generator-content-text { margin: 0 !important; padding: 16px 16px 4px !important; font-size: 15.5px !important; font-weight: 800 !important; color: var(--wp-win-ink) !important; text-align: left !important; line-height: 1.4 !important; background: var(--wp-win-surface-2) !important; border: 1px solid var(--wp-win-border) !important; border-bottom: 0 !important; border-radius: 16px 16px 0 0 !important; } html body .Generator-content-text-small { margin: 0 !important; padding: 0 16px 12px !important; font-size: 13.5px !important; font-weight: 500 !important; color: var(--wp-win-muted) !important; text-align: left !important; line-height: 1.45 !important; background: var(--wp-win-surface-2) !important; border-left: 1px solid var(--wp-win-border) !important; border-right: 1px solid var(--wp-win-border) !important; } html body .Generator-content > input.Generator-content-input, html body .Generator-content > input.Generator-content-input-good, html body .Generator-content > input.Generator-content-input-warn { display: block !important; width: 100% !important; max-width: none !important; box-sizing: border-box !important; margin: 0 0 10px !important; min-height: 52px !important; padding: 4px 16px 16px !important; font-size: 16px !important; border: 1px solid var(--wp-win-border) !important; border-top: 0 !important; border-radius: 0 0 16px 16px !important; background: var(--wp-win-surface-2) !important; color: var(--wp-win-ink) !important; box-shadow: none !important; } html body .Generator-content > input.Generator-content-input-good { background: #e8f8ee !important; } html body .Generator-content > input.Generator-content-input-warn { background: #fde7ea !important; } html body .Generator-random-checkbox { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 12px; margin: 0 0 10px !important; padding: 16px !important; background: var(--wp-win-surface-2) !important; border: 1px solid var(--wp-win-border) !important; border-radius: 16px !important; text-align: left !important; } html body .Generator-random-text { margin: 0 !important; font-size: 15.5px !important; font-weight: 800 !important; color: var(--wp-win-ink) !important; text-align: left !important; } html body .Generator-random-bar { margin: 0 0 10px !important; padding: 16px !important; background: var(--wp-win-surface-2) !important; border: 1px solid var(--wp-win-border) !important; border-radius: 16px !important; text-align: left !important; } html body .Generator-random-bar .Generator-random-text { display: block !important; margin: 0 0 10px !important; font-size: 13.5px !important; font-weight: 700 !important; color: var(--wp-win-muted) !important; } html body .Generator-content > .App-button { width: 100% !important; margin: 0 0 10px !important; min-height: 48px !important; border-radius: 14px !important; } html body .Generator-content > .App-button:has(.App-button-icon) { background: var(--wp-win-accent) !important; color: #fff !important; border: 0 !important; box-shadow: 0 8px 20px rgba(22,163,74,.28); } html body .Generator-content > .App-button:has(.App-button-icon) .App-button-icon svg { stroke: #fff !important; fill: #fff !important; } html body .Generator-content > .App-button:has(.App-button-icon):hover { background: var(--wp-win-accent-dark) !important; color: #fff !important; } html body .dict-loader__container { padding: 28px 16px !important; background: var(--wp-win-surface-2) !important; border: 1px solid var(--wp-win-border) !important; border-radius: 16px !important; } /* Toast-подсказка */ 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; 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; border: 1px solid rgba(255, 255, 255, 0.16) !important; background: #1b1f2a !important; color: #fff !important; box-shadow: 0 14px 32px -12px rgba(0,0,0,.5) !important; overflow: hidden !important; pointer-events: none !important; } html body .Hint-content { display: flex !important; align-items: center; justify-content: center; padding: 12px 22px !important; color: #fff !important; text-transform: none !important; font-size: 14px !important; font-weight: 700 !important; } @media (max-width: 520px) { html body .App-page > .App-title, html body .App-title { font-size: 17px !important; } html body .App-page .stat-value { font-size: 22px !important; } }