:root { --bg: #ffffff; --fg: #1a1a1b; --muted: #787c7e; --border: #d3d6da; --tile-border: #d3d6da; --tile-border-filled: #878a8c; --key-bg: #e4e6ea; --key-fg: #1a1a1b; --correct: #6aab5b; --present: #cbb43f; --absent: #7c8085; --header-border: #e9e9e9; --accent: #4a90e2; } .dark { --bg: #121213; --fg: #ffffff; --muted: #818384; --border: #3a3a3c; --tile-border: #3a3a3c; --tile-border-filled: #565758; --key-bg: #818384; --key-fg: #ffffff; --correct: #538d4e; --present: #b59f3b; --absent: #3a3a3c; --header-border: #2a2a2b; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } [hidden] { display: none !important; } /* Дуэльный запуск: тему и скрытие соло-UI применяем ДО первой отрисовки (inline-скрипт в ), чтобы не мелькали белый экран и соло-поле перед показом дуэльного оверлея. */ html.duel-mode .topbar, html.duel-mode .board-wrap, html.duel-mode #keyboard { display: none !important; } html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--fg); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; user-select: none; } body { display: flex; flex-direction: column; height: 100vh; height: 100dvh; position: relative; /* якорь для абсолютной плашки коинов в углу */ } /* ── Шапка ─────────────────────────────────────── */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px; border-bottom: 1px solid var(--header-border); flex: 0 0 auto; } .title { font-size: 22px; font-weight: 800; letter-spacing: 1px; margin: 0; text-align: center; } .side { display: flex; align-items: center; gap: 6px; flex: 1 1 0; min-width: 0; } .side.right { justify-content: flex-end; } .icon { background: none; border: none; padding: 4px; cursor: pointer; color: var(--muted); width: 34px; height: 34px; } .icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .icon svg .dot { fill: currentColor; stroke-width: 3; } /* ── Вордликоины (бета) ────────────────────────── */ /* Плашка баланса — в шапке, слева (вместо кнопки новой игры). */ .coin-pill { display: inline-flex; align-items: center; gap: 6px; background: var(--key-bg); color: var(--fg); border: none; border-radius: 999px; padding: 5px 12px; font-size: 15px; font-weight: 700; cursor: pointer; font-variant-numeric: tabular-nums; } .coin-pill[hidden] { display: none; } /* Иконка коина в шапке крупнее (+30% к базовым 1.05em). */ .coin-pill .coin { width: 1.37em; height: 1.37em; vertical-align: -0.24em; } .coin-pill:active { filter: brightness(.93); } .coin-pill.bump { animation: coinbump .4s ease; } @keyframes coinbump { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.28); } } .coins-legend { list-style: none; padding: 0; margin: 8px 0; } .coins-legend li { display: flex; align-items: center; justify-content: space-between; padding: 6px 2px; border-bottom: 1px solid var(--border); font-size: 14px; } .coins-legend li:last-child { border-bottom: none; } /* ── Аватарки и иконка коина ───────────────────── */ .avatar { width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto; position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: #fff; background: var(--absent); } .avatar.me { background: var(--me); } .avatar.opp { background: var(--opp); } .avatar-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .coin { width: 1.05em; height: 1.05em; vertical-align: -0.18em; } /* ── Поле ──────────────────────────────────────── */ .board-wrap { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 8px; } .board { display: grid; grid-template-rows: repeat(6, 1fr); gap: 6px; height: min(100%, 420px); aspect-ratio: 5 / 6; } .row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; } .tile { display: flex; align-items: center; justify-content: center; border: 2px solid var(--tile-border); font-size: clamp(22px, 8vw, 34px); font-weight: 700; text-transform: uppercase; color: var(--fg); aspect-ratio: 1 / 1; backface-visibility: hidden; } .tile.filled { border-color: var(--tile-border-filled); animation: pop .12s ease-out; } @keyframes pop { 0% { transform: scale(.86); } 100% { transform: scale(1); } } /* Активная ячейка текущей строки — куда будет введена буква. */ .tile.active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); cursor: pointer; } .tile.correct { background: var(--correct); border-color: var(--correct); color: #fff; } .tile.present { background: var(--present); border-color: var(--present); color: #fff; } .tile.absent { background: var(--absent); border-color: var(--absent); color: #fff; } /* Плавный переворот: цвет меняется в фазе «ребром» (45–55%), поэтому без снапа. */ .tile.flip { animation: flip .58s ease forwards; will-change: transform; } @keyframes flip { 0% { transform: rotateX(0deg); } 45% { transform: rotateX(-90deg); } 55% { transform: rotateX(-90deg); } 100% { transform: rotateX(0deg); } } .tile.win { animation: bounce .55s ease; } @keyframes bounce { 0%, 100% { transform: translateY(0); } 35% { transform: translateY(-16px); } 65% { transform: translateY(-5px); } } .row.shake { animation: shake .5s; } @keyframes shake { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-7px); } 40%, 60% { transform: translateX(7px); } } /* ── Клавиатура ────────────────────────────────── */ .keyboard { flex: 0 0 auto; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 6px; } .kb-row { display: flex; gap: 4px; justify-content: center; } .key { flex: 1 1 0; min-width: 0; height: 52px; border: none; border-radius: 5px; background: var(--key-bg); color: var(--key-fg); font-size: 15px; font-weight: 600; text-transform: uppercase; cursor: pointer; display: flex; align-items: center; justify-content: center; } .key:active { filter: brightness(.92); } .key.wide { flex: 1.5 1 0; font-size: 12px; } .kb-spacer { flex: 0.5 1 0; } .key.correct { background: var(--correct); color: #fff; } .key.present { background: var(--present); color: #fff; } .key.absent { background: var(--absent); color: #fff; } .key svg { width: 24px; height: 24px; flex: 0 0 auto; display: block; } /* Стирание теперь обычной ширины (1 юнит) — уменьшаем значок, чтобы влезал на узких экранах. */ .key:not(.wide) svg { width: 20px; height: 20px; } .key .kb-body { fill: currentColor; } .key .kb-x { fill: none; stroke: var(--key-bg); stroke-width: 2.4; stroke-linecap: round; } .key .kb-arrow { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; } .key.enter-key { background: var(--accent); } .key.enter-key:active { filter: brightness(.9); } /* ── Тост ──────────────────────────────────────── */ .toast { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); background: var(--fg); color: var(--bg); padding: 10px 16px; border-radius: 6px; font-weight: 600; font-size: 14px; opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 300; white-space: nowrap; } .toast.show { opacity: 1; } /* ── Модалки ───────────────────────────────────── */ .modal { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px; } .modal[hidden] { display: none; } /* Модалка «нет монет» должна показываться ПОВЕРХ дуэльного оверлея (.duel z-150, экраны результата z-200) — иначе уезжает под борд. Остальные модалки в дуэли не нужны. */ #modalBroke { z-index: 260; } .modal-card { background: var(--bg); color: var(--fg); border-radius: 14px; padding: 22px 20px; width: 100%; max-width: 360px; position: relative; max-height: 84vh; overflow: auto; } .modal-card h2 { margin: 0 0 12px; font-size: 20px; } .modal-card h3 { margin: 18px 0 8px; font-size: 15px; } .modal-close { position: absolute; top: 10px; right: 12px; background: none; border: none; font-size: 20px; cursor: pointer; color: var(--muted); } .legend { list-style: none; padding: 0; margin: 12px 0; } .legend li { display: flex; align-items: center; gap: 10px; margin: 8px 0; } .chip { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; border-radius: 3px; } .chip.correct { background: var(--correct); } .chip.present { background: var(--present); } .chip.absent { background: var(--absent); } .stats-row { display: flex; justify-content: space-between; text-align: center; margin: 8px 0; } .stat { flex: 1; } .stat b { display: block; font-size: 26px; } .stat span { font-size: 11px; color: var(--muted); } .dist { display: flex; flex-direction: column; gap: 5px; } .dist .bar-row { display: flex; align-items: center; gap: 8px; font-size: 13px; } .dist .bar-row > b { width: 12px; } .dist .bar { background: var(--absent); color: #fff; padding: 2px 8px; border-radius: 3px; min-width: 22px; text-align: right; font-weight: 600; } .dist .bar.hi { background: var(--correct); } .switch-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--border); } .switch-row input { width: 20px; height: 20px; } .muted { color: var(--muted); font-size: 13px; } .danger-btn { background: #d9534f; color: #fff; border: none; border-radius: 8px; padding: 8px 16px; font-weight: 600; cursor: pointer; flex: 0 0 auto; } .danger-btn:active { filter: brightness(.9); } .admin-row small { font-size: 11px; } /* ── Модалка результата ────────────────────────── */ .result-card { text-align: center; } .result-card h2 { text-align: center; } .result-pct { font-size: 15px; color: var(--fg); margin: 4px 0 14px; } .result-grid { display: flex; flex-direction: column; gap: 4px; align-items: center; margin: 6px 0 16px; } .result-row { display: flex; gap: 4px; } .result-cell { width: 26px; height: 26px; border-radius: 4px; background: var(--absent); } .result-cell.correct { background: var(--correct); } .result-cell.present { background: var(--present); } .result-cell.absent { background: var(--absent); } .result-next { margin: 4px 0 14px; } .result-next .muted { display: block; font-size: 13px; margin-bottom: 2px; } .countdown { font-size: 30px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 1px; } .remind-btn, .share-btn { display: block; width: 100%; border: none; border-radius: 10px; padding: 13px; font-size: 15px; font-weight: 600; cursor: pointer; margin-top: 10px; } .remind-btn { background: var(--key-bg); color: var(--fg); } .remind-btn.on { background: var(--correct); color: #fff; } .share-btn { background: var(--correct); color: #fff; } .remind-btn:active, .share-btn:active { filter: brightness(.93); } /* ── Топ игроков ───────────────────────────────── */ .leaderboard { margin: 2px 0 14px; text-align: left; } .leaderboard h3 { text-align: center; font-size: 14px; margin: 0 0 8px; } .lead-row { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; font-size: 14px; } .lead-row + .lead-row { margin-top: 2px; } .lead-row.me { background: rgba(106, 171, 91, .18); font-weight: 600; } .lead-rank { width: 22px; text-align: center; flex: 0 0 auto; font-weight: 700; } .lead-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lead-stat { flex: 0 0 auto; font-weight: 700; white-space: nowrap; min-width: 44px; text-align: right; } .lead-sep { height: 1px; background: var(--border); margin: 6px 10px; } .lead-legend { text-align: center; font-size: 11px; color: var(--muted); margin: 8px 0 0; } /* ── Дуэль (бета) ───────────────────────────────── */ :root { --me: #e0492f; --opp: #3b7bd6; } .duel { position: fixed; top: 0; left: 0; width: 100%; z-index: 150; height: 100vh; height: 100dvh; /* dvh — видимая высота на iOS (без обрезки нижней строки) */ background: var(--bg); color: var(--fg); display: flex; flex-direction: column; overflow: hidden; /* safe-area снизу уже добавляет клавиатура — тут НЕ дублируем */ } .duel[hidden] { display: none !important; } .duel-top { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--header-border); gap: 8px; } .duel-side { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; } .duel-side.me { justify-content: flex-end; } .duel-ava { display: inline-flex; } .duel-ava .avatar { width: 30px; height: 30px; font-size: 14px; } .avatar.me.turn { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--me); } .avatar.opp.turn { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--opp); } /* Шапка в 2 строки: сверху ник, снизу баланс коинов (иконка + сумма). */ .duel-who { display: flex; flex-direction: column; min-width: 0; gap: 1px; } .duel-side.me .duel-who { align-items: flex-end; } .duel-name { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .duel-side.me .duel-name { color: var(--me); } .duel-side.opp .duel-name { color: var(--opp); } .duel-bal { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 700; color: var(--muted); } .duel-bal .coin { width: 13px; height: 13px; } .duel-bal b { font-variant-numeric: tabular-nums; } .duel-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; background: var(--muted); } .duel-side.me .duel-dot { background: var(--me); } .duel-dot.on { box-shadow: 0 0 0 3px rgba(59,123,214,.25); } .duel-timer { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; flex: 0 0 auto; padding: 2px 10px; border-radius: 8px; background: var(--key-bg); } .duel-timer.low { background: var(--me); color: #fff; animation: timerpulse .5s ease infinite; } @keyframes timerpulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.08); } } .duel-boardwrap { position: relative; flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 6px; } /* Отсчёт «3-2-1» перед первым ходом — поверх видимого борда (item 3). */ .duel-countdown { position: absolute; inset: 0; z-index: 6; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: rgba(0,0,0,.28); } .duel-countdown[hidden] { display: none; } .duel-count-num { font-size: 96px; font-weight: 800; line-height: 1; color: var(--fg); text-shadow: 0 2px 12px rgba(0,0,0,.5); } .duel-count-num.pop { animation: countpop .5s ease; } @keyframes countpop { 0% { transform: scale(1.6); opacity: .2; } 60% { transform: scale(.92); opacity: 1; } 100% { transform: scale(1); } } .duel-count-who { font-size: 17px; font-weight: 700; color: var(--fg); max-width: 88vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Счётчик зрителей 👁 — правый верхний угол поля. */ /* Капсула зрителей — единый блок в рамке: белый SVG-глаз + круглые аватарки. Живёт в ряду реакций (под бордом), чтобы не налезать на буквы при нехватке высоты экрана. */ .duel-viewers { display: inline-flex; align-items: center; gap: 4px; background: rgba(0,0,0,.4); border: 1.5px solid rgba(255,255,255,.3); border-radius: 999px; padding: 3px 8px; } .duel-viewers .vw-eye { width: 16px; height: 16px; flex: 0 0 auto; display: block; } .duel-viewers .vw-ava.avatar { width: 20px; height: 20px; font-size: 10px; } .duel-viewers .vw-more { color: #fff; font-size: 12px; font-weight: 700; padding: 0 2px; } .duel-viewers[hidden] { display: none; } /* Плашка реконнекта (3.7): соперник теряет связь / я переподключаюсь. */ .duel-conn { text-align: center; font-weight: 700; font-size: 13px; padding: 6px 10px; } .duel-conn[hidden] { display: none; } .duel-conn.opp { color: #e0a52f; } .duel-conn.me { color: var(--opp); animation: connblink 1s ease-in-out infinite; } @keyframes connblink { 0%,100% { opacity: 1; } 50% { opacity: .45; } } /* Режим зрителя: клавиатуру и кнопку тапа не показываем (зритель не ходит и не тапает). */ .duel.spectator #duelKeyboard, .duel.spectator #duelTap { display: none; } /* Кнопка «Позвать»: без эмодзи; на кулдауне серая с полосой, которая тает справа налево. */ .summon-btn { position: relative; overflow: hidden; } .summon-btn .summon-label { position: relative; z-index: 1; } .summon-btn .summon-prog { position: absolute; left: 0; top: 0; bottom: 0; width: 0; z-index: 0; background: var(--absent); transition: width .25s linear; } .summon-btn:disabled { background: var(--key-bg); color: var(--muted); cursor: default; } /* Толстый левый бордер (индикатор чьей строки) — отдельным прямоугольником СНАРУЖИ слева (::before, поверх ячеек). Тонкая рамка активной строки — outline СНАРУЖИ и ПОВЕРХ ячеек (не inset — тот уходил под серые рамки клеток). Слева бар перекрывает рамку тем же цветом → выглядят единым элементом: толстый слева, тонкий вокруг. */ .duel-board .row { position: relative; border-radius: 4px; } .duel-board .row.mine::before, .duel-board .row.opp::before { content: ""; position: absolute; left: -9px; top: 0; bottom: 0; width: 6px; border-radius: 3px 0 0 3px; z-index: 2; } .duel-board .row.mine::before { background: var(--me); } .duel-board .row.opp::before { background: var(--opp); } /* На активной строке бар той же высоты, что тонкая рамка (::after inset -3) — иначе бар ниже рамки. На завершённых строках бар остаётся вровень со строкой (top/bottom 0). */ .duel-board .row.active.mine::before, .duel-board .row.active.opp::before { top: -3px; bottom: -3px; } /* Тонкая рамка активной строки — ::after, ЛЕВЫЕ углы прямые (border-radius 0 слева), правые скруглены. Так левый край рамки — ровная вертикаль ВПРИТЫК к толстому бордеру (у того скругление слева), без косого 1px-зазора от скругления. inset -3 + border 2 → 1px зазор от ячеек со всех сторон, внешний край рамки (-3) = правый край бордера. */ .duel-board .row.active::after { content: ""; position: absolute; inset: -3px; border: 2px solid var(--me); border-radius: 0 5px 5px 0; pointer-events: none; z-index: 3; } .duel-board .row.active.opp::after { border-color: var(--opp); animation: oppwait 1.2s ease-in-out infinite; } @keyframes oppwait { 0%,100% { border-color: var(--opp); } 50% { border-color: rgba(59,123,214,.4); } } .duel-status { text-align: center; font-weight: 700; font-size: 14px; padding: 8px; min-height: 20px; } .duel-status.mine { color: var(--me); } .duel-status.wait { color: var(--muted); } /* Затенение клавиатуры, когда ходит соперник (верстка не плывёт). Без grayscale — чтобы синяя вспышка живых нажатий соперника оставалась видимой. */ #duelKeyboard.locked { opacity: .55; pointer-events: none; } /* Живое нажатие соперника — краткая синяя вспышка на клавише (событие, не постоянно). */ .key.opp-flash { animation: oppflash .9s ease-out; position: relative; z-index: 1; } @keyframes oppflash { 0% { box-shadow: 0 0 0 3px var(--opp), 0 0 12px var(--opp); } 100% { box-shadow: 0 0 0 0 rgba(59,123,214,0); } } /* Реакции 🔥🤡💩 — свёрнуты в левом нижнем углу над клавой (1 кнопка = последняя использованная), на ховер/тап остальные всплывают вверх. */ /* Ряд эмодзи — пикер строго по центру. Капсула зрителей вынесена ОТДЕЛЬНОЙ строкой ниже (.duel-viewers-row), чтобы раскрытие пикера её не перекрывало. */ .duel-reactions { display: flex; justify-content: center; align-items: center; padding: 2px 14px 6px 14px; flex: 0 0 auto; } .react-widget { position: relative; } .duel-viewers-row { display: flex; justify-content: flex-end; padding: 0 14px 5px 14px; flex: 0 0 auto; } .react-main { font-size: 30px; line-height: 1; background: none; border: none; cursor: pointer; padding: 2px 4px; opacity: .7; transition: opacity .15s; } .react-widget:hover .react-main, .react-widget.open .react-main { opacity: 1; } .react-main:active { transform: scale(1.2); } /* Раскрывается СИММЕТРИЧНО от центра: главный эмодзи (последний использованный) остаётся на месте, остальные выезжают влево и вправо. padding — прозрачный «мост», чтобы панель не пропадала в зазоре между главной кнопкой и эмодзи. */ .react-fan { position: absolute; top: 50%; display: flex; flex-direction: row; align-items: center; gap: 8px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; } .react-fan-l { right: 100%; padding-right: 12px; transform: translate(8px, -50%); } .react-fan-r { left: 100%; padding-left: 12px; transform: translate(-8px, -50%); } .react-widget:hover .react-fan, .react-widget.open .react-fan { opacity: 1; transform: translate(0, -50%); pointer-events: auto; } /* без контейнеров — только сам эмодзи */ .react-fan button { font-size: 28px; line-height: 1; background: none; border: none; cursor: pointer; padding: 2px 4px; } .react-fan button:active { transform: scale(1.2); } .duel-react-float { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 7; } /* всплывает из точки, заданной JS (место иконки, +20px выше) */ .react-fly { position: absolute; font-size: 34px; --dx: 0px; animation: reactup 1.9s ease-out forwards; will-change: transform, opacity; } .react-fly.spec { font-size: 22px; opacity: .5; } /* реакции зрителей — мельче/прозрачнее */ @keyframes reactup { 0% { transform: translate(0, 0) scale(.5); opacity: 0; } 15% { transform: translate(calc(var(--dx) * .2), -12px) scale(1.15); opacity: 1; } 100% { transform: translate(var(--dx), -210px) scale(1); opacity: 0; } } /* Фазы до борда (оверлеи поверх борда/клавы). */ .duel-phase { position: absolute; inset: 0; z-index: 6; background: var(--bg); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; text-align: center; } .duel-phase[hidden] { display: none; } .duel-phase-inner { max-width: 320px; } .duel-phase-emoji { font-size: 56px; margin-bottom: 10px; } .duel-phase h2 { margin: 0 0 8px; } #duelRace { justify-content: flex-start; padding: 18px 24px calc(20px + env(safe-area-inset-bottom)); gap: 6px; } .duel-race-head { font-size: 30px; font-weight: 800; min-height: 38px; letter-spacing: 1px; } .duel-race-hint { margin: 0 0 4px; max-width: 300px; } .duel-race-cols { display: flex; gap: 44px; align-items: center; justify-content: center; flex: 1; } .duel-race-side { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 96px; } .duel-race-col { display: flex; flex-direction: column; gap: 6px; } .duel-race-cell { width: 44px; height: 44px; border: 2px solid var(--tile-border); border-radius: 6px; transition: background .12s, transform .12s; } .duel-race-cell.on { transform: scale(1.04); } .duel-race-col.me .duel-race-cell.on { background: var(--me); border-color: var(--me); } .duel-race-col:not(.me) .duel-race-cell.on { background: var(--opp); border-color: var(--opp); } .duel-race-lbl { font-size: 12px; font-weight: 800; letter-spacing: 1px; color: var(--muted); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .duel-race-lbl.me { color: var(--me); } .duel-race-lbl.opp { color: var(--opp); } .duel-tap { width: 100%; max-width: 320px; padding: 22px; font-size: 22px; font-weight: 800; border: none; border-radius: 16px; background: var(--me); color: #fff; cursor: pointer; user-select: none; -webkit-user-select: none; } .duel-tap:active { transform: scale(.97); filter: brightness(.95); } .duel-tap:disabled { opacity: .45; filter: grayscale(.35); cursor: default; transform: none; } /* во время «приготовься» */ .duel-result { position: absolute; inset: 0; z-index: 10; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; padding: 24px; } .duel-result[hidden] { display: none; } .duel-result-card { position: relative; z-index: 2; background: var(--bg); border-radius: 18px; padding: 24px 24px; width: 100%; max-width: 400px; text-align: center; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 4px; } /* Анимировка монет — блок В ПОТОКЕ (под словом, над суммой), только у победы. Бокс ниже (короче окно ~10%), сам SVG отрисован крупнее (+30%) через scale — переполнение обрежет overflow:hidden карточки. */ /* origin bottom → увеличение 1.3 растёт ВВЕРХ (дождь не свисает вниз на «+10»); margin-bottom держит зазор до суммы, margin-top приподнимает над словом. */ .duel-coins-anim { height: 130px; margin: -19px 0 10px; pointer-events: none; transform: scale(1.3); transform-origin: center bottom; } .duel-coins-anim[hidden] { display: none; } .duel-coins-anim svg { width: 100% !important; height: 100% !important; } .duel-result-emoji { font-size: 56px; margin-bottom: 6px; } .duel-result-emoji[hidden] { display: none; } .duel-result-card h2 { margin: 0 0 6px; } .duel-result-word { font-size: 34px; font-weight: 800; letter-spacing: 6px; text-transform: uppercase; margin: 4px 0 6px; color: var(--correct); } /* У проигравшего загаданное слово — красным (не зелёным). */ .duel-result-card.lose .duel-result-word { color: #e23b3b; } /* Сумма выигрыша/проигрыша с анимацией счётчика + жёлтая иконка коина рядом. */ .duel-result-amount-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 2px 0 14px; } .duel-result-amount-row[hidden] { display: none; } .duel-result-amount-row .coin { width: 30px; height: 30px; vertical-align: 0; } .duel-result-amount { font-size: 32px; font-weight: 800; font-variant-numeric: tabular-nums; } .duel-result-amount.plus { color: var(--correct); } .duel-result-amount.minus { color: #e23b3b; } .duel-result p.muted { margin: 2px 0 14px; } /* ── Мост для анонимного inline-запуска ────────── */ .gate { position: fixed; inset: 0; z-index: 200; background: var(--bg); display: flex; align-items: center; justify-content: center; padding: 28px; } .gate[hidden] { display: none; } .gate-box { text-align: center; max-width: 300px; } .gate-logo { font-size: 54px; margin-bottom: 14px; } .gate-box p { font-size: 15px; color: var(--fg); margin: 0 0 20px; line-height: 1.5; }