/* ========================================================================== Воздушный Шар — оформление игрового прототипа. Мобильная вёрстка базовая, десктоп добавляет боковые колонки. Тема (красная / зелёная) переключается атрибутом data-theme на . ========================================================================== */ :root { --panel: #fbf1dc; --panel-edge: #e3cfa6; --panel-deep: #f0e0c2; --ink: #4a3823; --ink-soft: #7d6b52; --ink-mute: #9b8a70; --top: #191d2e; --gold: #ffc531; --gold-deep: #e79a10; --coin: #f0762b; --danger: #e04b3c; --green-1: #9fdb56; --green-2: #5ea62c; --red-1: #f2744a; --red-2: #c33a24; --radius-lg: 20px; --radius-md: 14px; --radius-sm: 10px; --shadow-panel: 0 10px 24px rgba(30, 20, 8, .18); --shadow-btn: 0 4px 0 rgba(0, 0, 0, .22), 0 8px 18px rgba(0, 0, 0, .18); --font: "Nunito", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; } /* Палитра зелёной темы: день, светлое небо. */ body[data-theme="green"] { --accent-1: var(--green-1); --accent-2: var(--green-2); --accent-ink: #2f5c14; --sky-a: #3fb6f0; --sky-b: #9fe0fb; --ladder: rgba(255, 255, 255, .45); } /* Палитра красной темы: закат в горах, выше риск — драматичнее фон. */ body[data-theme="red"] { --accent-1: var(--red-1); --accent-2: var(--red-2); --accent-ink: #7a2413; --sky-a: #14204a; --sky-b: #f7a85c; --ladder: rgba(255, 255, 255, .3); } /* Закат: холодная высота, тёплый горизонт. Четыре стопа, чтобы середина не уходила в серо-сиреневый. */ body[data-theme="red"] .game { background: linear-gradient(180deg, #14204a 0%, #472a5e 34%, #9c4450 62%, #dd7046 84%, #f7a85c 100%); } * { box-sizing: border-box; } /* Скрытие атрибутом должно побеждать любой display у класса. */ [hidden] { display: none !important; } /* ========================== Воздушный шар ============================= Один компонент на все места: логотип, карточки тем, отметки уровней, летящий шар, переключатель темы. Цвета задаются переменными --hab-1/2, поэтому красный и зелёный шар — это одна и та же вёрстка. ====================================================================== */ .hab { position: relative; border-radius: 50% 50% 47% 47% / 56% 56% 44% 44%; background: /* блик */ radial-gradient(ellipse 62% 46% at 31% 19%, rgba(255, 255, 255, .62), rgba(255, 255, 255, 0) 72%), /* клинья оболочки */ repeating-linear-gradient(90deg, rgba(255, 255, 255, .11) 0 14%, rgba(0, 0, 0, .10) 14% 28%), /* основной объём */ radial-gradient(ellipse at 40% 30%, var(--hab-1), var(--hab-2) 76%); filter: drop-shadow(0 4px 7px rgba(0, 0, 0, .3)); } /* Канаты: две сходящиеся линии от оболочки к корзине. */ .hab::before { content: ""; position: absolute; left: 50%; bottom: -15%; transform: translateX(-50%); width: 38%; height: 17%; background-image: linear-gradient(to bottom right, transparent 46%, rgba(92, 62, 24, .85) 46% 54%, transparent 54%), linear-gradient(to bottom left, transparent 46%, rgba(92, 62, 24, .85) 46% 54%, transparent 54%); background-size: 50% 100%; background-position: left top, right top; background-repeat: no-repeat; } /* Корзина: трапеция под канатами. */ .hab::after { content: ""; position: absolute; left: 50%; bottom: -28%; transform: translateX(-50%); width: 30%; height: 15%; min-height: 4px; background: linear-gradient(#d09a48, #7e5017); clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%); } .hab--red { --hab-1: #ff9e74; --hab-2: #c9301a; } .hab--green { --hab-1: #bdf27f; --hab-2: #35820f; } .hab--gold { --hab-1: #ffeda6; --hab-2: #d99510; } /* Тема-зависимые шары: свой цвет и цвет противоположной темы. */ body[data-theme="green"] .hab--theme { --hab-1: #bdf27f; --hab-2: #35820f; } body[data-theme="red"] .hab--theme { --hab-1: #ff9e74; --hab-2: #c9301a; } body[data-theme="green"] .hab--other { --hab-1: #ff9e74; --hab-2: #c9301a; } body[data-theme="red"] .hab--other { --hab-1: #bdf27f; --hab-2: #35820f; } html, body { margin: 0; height: 100%; font-family: var(--font); color: var(--ink); background: #0f1322; -webkit-text-size-adjust: 100%; overscroll-behavior: none; } button { font-family: inherit; cursor: pointer; } h1, h2, h3, p, ol, ul, dl, dd { margin: 0; } ol, ul { padding-left: 1.1em; } .muted { color: var(--ink-mute); } .small { font-size: 12px; line-height: 1.45; } .mono { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11px; word-break: break-all; } /* ============================== Каркас ================================== */ .stage { display: grid; grid-template-columns: 1fr; justify-items: center; min-height: 100%; padding: 0; } .side { display: none; } .game { position: relative; width: 100%; max-width: 460px; min-height: 100dvh; display: flex; flex-direction: column; overflow: hidden; background: linear-gradient(180deg, var(--sky-a), var(--sky-b)); transition: background .6s ease; } /* Небо рисуется на canvas под всеми экранами. */ .sky { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } .screen { position: relative; z-index: 1; flex: 1; display: flex; flex-direction: column; min-height: 0; } .screen[hidden] { display: none; } /* ============================== Шапка =================================== */ .topbar { position: relative; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top)); background: var(--top); } .icon-btn { width: 38px; height: 38px; flex: none; border: none; border-radius: 12px; background: #2a3048; color: #fff; font-size: 18px; font-weight: 700; line-height: 1; transition: background .15s; } .icon-btn:hover { background: #3a4265; } .balance { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; height: 38px; border-radius: 12px; background: #2a3048; color: #fff; font-weight: 800; font-size: 17px; } .balance__value { font-variant-numeric: tabular-nums; } .balance__topup { margin-left: 6px; border: none; border-radius: 8px; padding: 4px 8px; background: #4a5580; color: #fff; font-size: 11px; font-weight: 800; } .balance__topup:hover { background: #5d6a9c; } /* Монета бонусных баллов и кубок турнирных очков — рисуем без картинок. */ .coin { width: 17px; height: 17px; flex: none; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffd78a, var(--coin) 70%); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45); position: relative; } .coin::after { content: ""; position: absolute; inset: 4px; border-radius: 3px; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); } /* Кубок турнирных очков: чаша, ножка и подставка одной фигурой. */ .trophy { width: 20px; height: 20px; flex: none; position: relative; background: linear-gradient(160deg, #ffe79a, #e0a01b 60%, #b97d0c); clip-path: polygon( 16% 4%, 84% 4%, 84% 30%, 96% 30%, 96% 42%, 78% 56%, 58% 62%, 58% 76%, 78% 76%, 78% 92%, 22% 92%, 22% 76%, 42% 76%, 42% 62%, 22% 56%, 4% 42%, 4% 30%, 16% 30%); } .trophy--sm { width: 14px; height: 14px; } /* ========================== Экран выбора темы =========================== */ .screen--theme { align-items: center; justify-content: center; gap: 22px; padding: 20px 16px calc(20px + env(safe-area-inset-bottom)); } .logo { display: flex; align-items: center; gap: 10px; } .logo__balloon { width: 58px; height: 74px; flex: none; margin-bottom: 16px; animation: hover-a 4.2s ease-in-out infinite; } .logo__text { display: flex; flex-direction: column; align-items: flex-start; line-height: .92; text-transform: uppercase; font-weight: 900; letter-spacing: .02em; text-shadow: 0 3px 0 #1b4a86, 0 5px 12px rgba(0, 0, 0, .35); color: #fff; } .logo__text span { font-size: 22px; } .logo__text strong { font-size: 46px; color: var(--gold); -webkit-text-stroke: 1px #1b4a86; } .theme-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; max-width: 380px; } .theme-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 10px 14px; border: 2px solid rgba(255, 255, 255, .6); border-radius: var(--radius-lg); background: rgba(255, 255, 255, .82); box-shadow: var(--shadow-panel); transition: transform .18s, box-shadow .18s; } .theme-card:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(20, 12, 0, .28); } .theme-card:active { transform: translateY(-1px); } .theme-card__balloon { width: 52px; height: 66px; margin-bottom: 14px; } /* Разная длительность у двух шаров — парение не синхронизировано. */ .theme-card__balloon--red { animation: hover-a 3.6s ease-in-out infinite; } .theme-card__balloon--green { animation: hover-b 4.9s ease-in-out infinite; } .theme-card__name { font-size: 15px; font-weight: 900; margin-top: 8px; } .theme-card__name--red { color: #d2381f; } .theme-card__name--green { color: #3f8f1c; } .theme-card__meta { font-size: 11px; font-weight: 700; color: #7d6b52; } @keyframes hover-a { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-9px) rotate(2deg); } } @keyframes hover-b { 0%, 100% { transform: translateY(-3px) rotate(2.5deg); } 50% { transform: translateY(-12px) rotate(-2deg); } } .tournament-teaser { display: flex; align-items: center; gap: 12px; width: 100%; max-width: 380px; padding: 12px 14px; border: 2px solid rgba(255, 255, 255, .6); border-radius: var(--radius-lg); background: rgba(255, 255, 255, .82); box-shadow: var(--shadow-panel); text-align: left; } .tournament-teaser .trophy { width: 30px; height: 30px; animation: sway 3s ease-in-out infinite; } .tournament-teaser__text { flex: 1; display: flex; flex-direction: column; gap: 2px; } .tournament-teaser__text strong { font-size: 14px; color: var(--ink); } .tournament-teaser__text span { font-size: 11.5px; color: #7d6b52; line-height: 1.35; } .tournament-teaser__days { flex: none; padding: 4px 8px; border-radius: 8px; background: var(--gold); color: #5a3c00; font-size: 10px; font-weight: 900; white-space: nowrap; } @keyframes sway { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } } /* =========================== История раундов ============================ */ .history-strip { position: relative; z-index: 2; padding: 8px 10px 6px; background: linear-gradient(180deg, rgba(10, 14, 30, .55), rgba(10, 14, 30, 0)); } .history-strip__label { display: block; margin-bottom: 5px; font-size: 11px; font-weight: 800; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); } .history-strip__list { display: flex; gap: 5px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .history-strip__list::-webkit-scrollbar { display: none; } .chip { flex: none; padding: 5px 9px; border-radius: 9px; background: var(--panel); color: var(--ink); font-size: 12.5px; font-weight: 800; font-variant-numeric: tabular-nums; box-shadow: 0 2px 5px rgba(0, 0, 0, .2); } .chip--hot { background: linear-gradient(180deg, var(--gold), var(--gold-deep)); color: #5a3c00; } .chip--new { animation: chip-in .45s ease; } @keyframes chip-in { from { transform: scale(.5); opacity: 0; } to { transform: scale(1); opacity: 1; } } /* ====================== Игровое поле и лестница ========================= */ .field { position: relative; flex: 1; min-height: 220px; z-index: 1; } .ladder { position: absolute; inset: 0; } /* Линия уровня: тонкая черта через поле + шар-маркер слева. */ .rung { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--ladder); display: flex; align-items: center; } .rung__mark { width: 18px; height: 23px; margin-left: 9px; flex: none; transition: transform .25s, filter .25s; } .rung__coef { margin-left: 6px; padding: 1px 5px; border-radius: 6px; background: rgba(14, 18, 34, .42); font-size: 10px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; letter-spacing: .01em; } .rung--passed .rung__mark { transform: scale(.78); filter: grayscale(.55) drop-shadow(0 2px 3px rgba(0, 0, 0, .25)); } .rung--passed { border-top-color: rgba(255, 255, 255, .75); } /* Уровень с бустером: золотой шар и подпись множителя. */ .rung--loot .rung__mark { --hab-1: #ffeda6; --hab-2: #d99510; animation: loot-pulse 1.5s ease-in-out infinite; } .rung--loot .rung__coef { color: var(--gold); background: rgba(14, 18, 34, .72); } .rung__loot { margin-left: 4px; padding: 1px 5px; border-radius: 6px; background: #241a05; color: var(--gold); font-size: 9.5px; font-weight: 900; } .rung--loot::after { content: ""; position: absolute; left: 0; right: 0; top: -1px; border-top: 2px solid rgba(255, 197, 49, .55); } .rung--loot-used .rung__mark { animation: none; filter: grayscale(.3) brightness(1.3); } @keyframes loot-pulse { 0%, 100% { transform: scale(1); filter: drop-shadow(0 0 3px rgba(255, 197, 49, .7)); } 50% { transform: scale(1.18); filter: drop-shadow(0 0 10px rgba(255, 197, 49, 1)); } } .trophy-btn { position: absolute; left: 10px; bottom: 10px; display: flex; flex-direction: column; align-items: center; gap: 2px; border: none; background: none; padding: 0; } .trophy-btn .trophy { width: 34px; height: 34px; animation: sway 3.4s ease-in-out infinite; } .trophy-btn__days { padding: 2px 6px; border-radius: 6px; background: var(--gold); color: #5a3c00; font-size: 9px; font-weight: 900; white-space: nowrap; } /* Шар противоположного цвета — переключение темы прямо на поле. */ .swap-balloon { position: absolute; right: 20px; bottom: 30px; width: 44px; height: 56px; border: none; padding: 0; animation: hover-b 5.2s ease-in-out infinite; } /* Подсказка про действие бустера до подтверждения ставки. */ .booster-hint { position: absolute; left: 12px; right: 12px; top: 38%; display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: var(--radius-md); background: rgba(18, 22, 38, .92); color: #fff; box-shadow: 0 8px 20px rgba(0, 0, 0, .35); animation: hint-in .3s ease; } .booster-hint__icon { width: 28px; height: 35px; flex: none; margin-bottom: 8px; } .booster-hint__text { display: flex; flex-direction: column; gap: 2px; } .booster-hint__text strong { font-size: 13.5px; } .booster-hint__text span { font-size: 11.5px; opacity: .8; } @keyframes hint-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ========================= Панель выбора ставки ========================= */ .betpanel { position: relative; z-index: 2; padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); border-radius: var(--radius-lg) var(--radius-lg) 0 0; background: var(--panel); box-shadow: 0 -6px 20px rgba(0, 0, 0, .22); } .betpanel__head { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; } .betpanel__head h2 { font-size: 15px; font-weight: 900; } .hint-btn { width: 20px; height: 20px; flex: none; border: none; border-radius: 50%; background: #d9c49a; color: #6a5330; font-size: 12px; font-weight: 900; line-height: 1; } .theme-toggle { margin-left: auto; display: flex; align-items: center; gap: 4px; border: none; border-radius: 10px; padding: 4px 8px; background: var(--panel-deep); } .theme-toggle__balloon { width: 15px; height: 19px; margin-bottom: 5px; } .theme-toggle__icon { font-size: 13px; color: var(--ink-soft); } .tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; } .tier { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 9px 4px 8px; border: 2px solid var(--panel-edge); border-radius: var(--radius-md); background: #fffaf0; transition: transform .16s, border-color .16s, box-shadow .16s; } .tier:hover:not(:disabled) { transform: translateY(-3px); } .tier__piece { width: 32px; height: 32px; /* Фрагмент пазла рисуем клипом — без растровых ассетов. */ clip-path: polygon( 10% 10%, 38% 10%, 38% 4%, 44% 0%, 56% 0%, 62% 4%, 62% 10%, 90% 10%, 90% 38%, 96% 38%, 100% 44%, 100% 56%, 96% 62%, 90% 62%, 90% 90%, 62% 90%, 62% 84%, 56% 80%, 44% 80%, 38% 84%, 38% 90%, 10% 90%, 10% 62%, 16% 62%, 20% 56%, 20% 44%, 16% 38%, 10% 38%); background: linear-gradient(140deg, #f2c982, #d99a3f); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); } .tier:nth-child(2) .tier__piece { background: linear-gradient(140deg, #9ddcf7, #4aa3d8); } .tier:nth-child(3) .tier__piece { background: linear-gradient(140deg, #f7b0d8, #d05fa4); } .tier:nth-child(4) .tier__piece { background: linear-gradient(140deg, #ffcf8a, #e8871e); } .tier__cost { display: flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 900; font-variant-numeric: tabular-nums; } .tier__cost .coin { width: 13px; height: 13px; } .tier__booster { padding: 2px 7px; border-radius: 8px; background: #241a05; color: var(--gold); font-size: 10px; font-weight: 900; } .tier__booster--none { background: none; color: var(--ink-soft); font-weight: 700; font-size: 9.5px; } .tier.is-selected { border-color: var(--accent-2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-1) 45%, transparent), 0 8px 16px rgba(0, 0, 0, .18); transform: translateY(-3px); background: #fff; } .tier:disabled { opacity: .45; cursor: not-allowed; filter: grayscale(.6); } /* ============================== Кнопки ================================= */ .btn { border: none; border-radius: var(--radius-md); padding: 12px 18px; font-size: 15px; font-weight: 900; color: #fff; transition: transform .12s, filter .18s, box-shadow .18s; } .btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0, 0, 0, .22); } .btn:disabled { cursor: not-allowed; filter: grayscale(.75) brightness(.92); opacity: .75; } .btn--block { display: block; width: 100%; } .btn--primary { background: linear-gradient(180deg, #9fdb56, #5ea62c); box-shadow: var(--shadow-btn); text-shadow: 0 1px 2px rgba(0, 0, 0, .25); } .btn--secondary { background: linear-gradient(180deg, #f7b44d, #d97a14); box-shadow: var(--shadow-btn); } .btn--ghost { background: rgba(255, 255, 255, .14); color: var(--ink); border: 1.5px solid var(--panel-edge); box-shadow: none; font-size: 13px; padding: 9px 14px; } .btn--ghost:hover { background: rgba(255, 255, 255, .3); } .btn--start { margin-top: 10px; font-size: 17px; padding: 14px; } /* ============================ Экран полёта ============================= */ .field--flight { overflow: hidden; } .balloon { position: absolute; right: 18%; bottom: 4%; width: 54px; height: 68px; will-change: transform, bottom; z-index: 2; } .balloon.is-boosted { animation: boost-flash .7s ease; } .balloon.is-popped { animation: pop .5s cubic-bezier(.3, 1.6, .5, 1) forwards; } @keyframes boost-flash { 0% { filter: drop-shadow(0 0 0 rgba(255, 197, 49, 0)) brightness(1); transform: scale(1); } 35% { filter: drop-shadow(0 0 22px rgba(255, 197, 49, 1)) brightness(1.7); transform: scale(1.22); } 100% { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .3)) brightness(1); transform: scale(1); } } @keyframes pop { 0% { transform: scale(1); opacity: 1; } 30% { transform: scale(1.45); opacity: 1; filter: brightness(2); } 100% { transform: scale(.15) rotate(25deg); opacity: 0; } } .multiplier { position: absolute; left: 50%; top: 44%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; z-index: 3; pointer-events: none; transition: color .4s, text-shadow .4s, font-size .4s; } .multiplier__win { font-size: 46px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; color: #22252e; text-shadow: 0 2px 6px rgba(255, 255, 255, .5); transition: all .35s ease; } .multiplier__coef { margin-top: 2px; font-size: 17px; font-weight: 900; font-variant-numeric: tabular-nums; color: #3a3d47; text-shadow: 0 1px 4px rgba(255, 255, 255, .5); transition: all .35s ease; } /* Стиль коэффициента меняется по мере набора уровней. */ .multiplier[data-tier="1"] .multiplier__win, .multiplier[data-tier="1"] .multiplier__coef { color: var(--gold); text-shadow: 0 2px 6px rgba(0, 0, 0, .35); } .multiplier[data-tier="2"] .multiplier__win, .multiplier[data-tier="2"] .multiplier__coef { color: var(--gold); text-shadow: 0 0 16px rgba(255, 197, 49, .95), 0 2px 6px rgba(0, 0, 0, .4); } .multiplier[data-tier="3"] .multiplier__win { font-size: 66px; color: var(--gold); text-shadow: 0 0 26px rgba(255, 197, 49, 1), 0 0 50px rgba(255, 150, 0, .7), 0 3px 8px rgba(0, 0, 0, .45); } .multiplier[data-tier="3"] .multiplier__coef { font-size: 21px; color: var(--gold); text-shadow: 0 0 18px rgba(255, 197, 49, .95); } .multiplier.is-locked .multiplier__win { animation: locked 0.5s ease; } @keyframes locked { 0% { transform: scale(1); } 45% { transform: scale(1.25); } 100% { transform: scale(1); } } /* Всплывающие «+10» за уровень. */ .float-layer { position: absolute; inset: 0; pointer-events: none; z-index: 4; } .float-gain { position: absolute; font-size: 19px; font-weight: 900; color: var(--gold); text-shadow: 0 0 10px rgba(255, 197, 49, .9), 0 2px 4px rgba(0, 0, 0, .5); animation: float-up 1.1s ease-out forwards; white-space: nowrap; } .float-gain--big { font-size: 26px; color: #fff; text-shadow: 0 0 16px rgba(255, 197, 49, 1); } @keyframes float-up { 0% { opacity: 0; transform: translateY(6px) scale(.7); } 20% { opacity: 1; transform: translateY(-4px) scale(1.1); } 100% { opacity: 0; transform: translateY(-56px) scale(1); } } .flightbar { position: relative; z-index: 3; display: flex; align-items: stretch; gap: 10px; padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, rgba(10, 14, 30, 0), rgba(10, 14, 30, .45)); } .payout { flex: none; display: flex; flex-direction: column; gap: 1px; padding: 9px 12px; border: 2px solid var(--panel-edge); border-radius: var(--radius-md); background: var(--panel); min-width: 104px; } .payout__label { font-size: 11.5px; font-weight: 800; color: #7d6b52; } .payout__row { display: flex; align-items: center; gap: 5px; font-size: 16px; font-weight: 900; font-variant-numeric: tabular-nums; } /* Объяснение остановившегося счётчика очков: уровни закончились. */ .payout__max { margin-top: 2px; font-size: 9.5px; font-weight: 800; line-height: 1.2; color: var(--gold-deep); text-transform: uppercase; letter-spacing: .02em; } .cashout-wrap { position: relative; flex: 1; display: flex; } .btn--cashout { flex: 1; background: linear-gradient(180deg, #9fdb56, #4f8f24); box-shadow: var(--shadow-btn); font-size: 21px; text-transform: uppercase; letter-spacing: .03em; text-shadow: 0 2px 3px rgba(0, 0, 0, .3); } .btn--cashout:disabled { background: linear-gradient(180deg, #b9c0ad, #8a9182); } .btn--cashout.is-ready { animation: ready-pulse 1.6s ease-in-out infinite; } @keyframes ready-pulse { 0%, 100% { box-shadow: var(--shadow-btn); } 50% { box-shadow: 0 4px 0 rgba(0, 0, 0, .22), 0 0 22px rgba(159, 219, 86, .9); } } /* Мини-онбординг у кнопки «Забрать» — облачко с хвостиком. */ .onboarding { position: absolute; bottom: calc(100% + 14px); left: -8px; right: -8px; padding: 12px 14px; border-radius: 18px; background: #fff; color: #2b2f3d; font-size: 13.5px; font-weight: 800; text-align: center; line-height: 1.3; box-shadow: 0 8px 22px rgba(0, 0, 0, .3); animation: hint-in .35s ease; } .onboarding::after { content: ""; position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); border: 10px solid transparent; border-top-color: #fff; border-bottom: 0; } .onboarding::before { content: "▼"; position: absolute; left: 50%; bottom: -34px; transform: translateX(-50%); color: #fff; font-size: 17px; text-shadow: 0 2px 5px rgba(0, 0, 0, .4); animation: arrow-bounce .85s ease-in-out infinite; } .onboarding.is-hiding { animation: fade-out .5s ease forwards; } @keyframes arrow-bounce { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } } @keyframes fade-out { to { opacity: 0; transform: translateY(-6px); } } /* =========================== Живой рейтинг ============================= */ .live-rating { position: relative; z-index: 3; display: flex; gap: 4px; padding: 7px 10px; overflow-x: auto; scrollbar-width: none; background: linear-gradient(180deg, rgba(10, 14, 30, .5), rgba(10, 14, 30, 0)); } .live-rating::-webkit-scrollbar { display: none; } .live-rating[hidden] { display: none; } .live-cell { flex: none; display: flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 9px; background: rgba(255, 255, 255, .88); font-size: 11.5px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); transition: transform .4s cubic-bezier(.3, 1.4, .5, 1), background .3s; } .live-cell .trophy { width: 12px; height: 12px; } .live-cell--me { background: linear-gradient(180deg, var(--accent-1), var(--accent-2)); color: #fff; } /* Короткая вспышка — очки изменились, место прежнее. */ .live-cell.flash-short { animation: flash-short .4s ease; } /* Длинная вспышка со свечением — место изменилось. */ .live-cell.flash-long { animation: flash-long 1s ease; } @keyframes flash-short { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.6); } } @keyframes flash-long { 0% { filter: brightness(1); box-shadow: none; } 35% { filter: brightness(1.9); box-shadow: 0 0 18px rgba(255, 197, 49, 1); transform: scale(1.14); } 100% { filter: brightness(1); box-shadow: none; transform: scale(1); } } /* ============================== Модалки ================================ */ .modal { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; padding: 16px; } .modal[hidden] { display: none; } .modal__backdrop { position: absolute; inset: 0; background: rgba(12, 10, 20, .62); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: fade-in .2s ease; } .modal--stacked { z-index: 41; } .modal--stacked .modal__backdrop { background: rgba(12, 10, 20, .18); -webkit-backdrop-filter: none; backdrop-filter: none; } .modal__box { position: relative; width: 100%; max-width: 400px; max-height: calc(100dvh - 32px); overflow-y: auto; padding: 20px; border-radius: var(--radius-lg); background: var(--panel); box-shadow: 0 24px 60px rgba(0, 0, 0, .5); animation: modal-in .28s cubic-bezier(.2, 1.3, .5, 1); } .modal__box h2 { font-size: 19px; font-weight: 900; margin-bottom: 6px; } .modal__close { position: absolute; top: 10px; right: 12px; width: 30px; height: 30px; border: none; border-radius: 50%; background: rgba(0, 0, 0, .08); color: var(--ink); font-size: 19px; line-height: 1; } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes modal-in { from { opacity: 0; transform: translateY(24px) scale(.94); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Результат раунда */ .result { text-align: center; } .ribbon { position: relative; margin: 6px auto 18px; width: 76%; padding: 11px 8px; background: linear-gradient(180deg, #f4547f, #cf1e4c); color: #fff; font-size: 19px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; text-shadow: 0 2px 3px rgba(0, 0, 0, .3); box-shadow: 0 6px 14px rgba(0, 0, 0, .25); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%); } .ribbon--lose { background: linear-gradient(180deg, #6d7486, #434a5c); } .result__caption { font-size: 12px; font-weight: 800; color: #8b7a60; letter-spacing: .1em; text-transform: uppercase; } .rewards { display: flex; justify-content: center; gap: 14px; margin: 12px 0 16px; } .reward { display: flex; flex-direction: column; align-items: center; gap: 6px; } .reward__icon { width: 58px; height: 58px; border-radius: 50%; position: relative; animation: reward-in .45s cubic-bezier(.2, 1.6, .5, 1) backwards; } .reward:nth-child(2) .reward__icon { animation-delay: .1s; } .reward:nth-child(3) .reward__icon { animation-delay: .2s; } .reward__icon--coin { background: radial-gradient(circle at 35% 30%, #ffd78a, var(--coin) 72%); box-shadow: inset 0 0 0 4px rgba(255, 255, 255, .5), 0 0 24px rgba(255, 170, 60, .7); } .reward__icon--coin::after { content: ""; position: absolute; inset: 16px; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); } .reward__icon--puzzle { border-radius: 6px; background: linear-gradient(140deg, #f2c982, #cf8f35); clip-path: polygon( 10% 10%, 38% 10%, 38% 4%, 44% 0%, 56% 0%, 62% 4%, 62% 10%, 90% 10%, 90% 38%, 96% 38%, 100% 44%, 100% 56%, 96% 62%, 90% 62%, 90% 90%, 62% 90%, 62% 84%, 56% 80%, 44% 80%, 38% 84%, 38% 90%, 10% 90%, 10% 62%, 16% 62%, 20% 56%, 20% 44%, 16% 38%, 10% 38%); } .reward__icon--trophy { background: linear-gradient(160deg, #ffe79a, #e0a01b 60%, #b97d0c); border-radius: 0; filter: drop-shadow(0 0 14px rgba(255, 200, 60, .8)); clip-path: polygon( 16% 4%, 84% 4%, 84% 30%, 96% 30%, 96% 42%, 78% 56%, 58% 62%, 58% 76%, 78% 76%, 78% 92%, 22% 92%, 22% 76%, 42% 76%, 42% 62%, 22% 56%, 4% 42%, 4% 30%, 16% 30%); } .reward__value { min-width: 46px; padding: 3px 8px; border-radius: 9px; background: #fff; border: 2px solid var(--panel-edge); font-size: 12.5px; font-weight: 900; font-variant-numeric: tabular-nums; } @keyframes reward-in { from { opacity: 0; transform: scale(.3) rotate(-25deg); } to { opacity: 1; transform: scale(1) rotate(0); } } .result__note { padding: 11px 14px; border-radius: var(--radius-md); background: #ffd9b0; border: 2px solid #eeba7d; color: #7a5220; font-size: 13px; font-weight: 800; line-height: 1.45; } .result__note b { display: block; font-size: 17px; } .result__early { display: inline-block; margin-top: 6px; font-size: 11.5px; font-weight: 700; line-height: 1.4; color: #8a6a3a; } .result__actions { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; } .result__timer { margin-top: 10px; font-size: 11.5px; color: #9b8a70; } /* Апсейл */ .upsell { text-align: center; } .upsell__text { margin: 8px 0 14px; font-size: 13.5px; line-height: 1.5; color: #6d5c43; } .upsell__tickets { display: flex; justify-content: center; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; } .ticket { width: 44px; height: 30px; border-radius: 5px; background: linear-gradient(135deg, #ffd98a, #f0762b); box-shadow: 0 3px 8px rgba(0, 0, 0, .25), inset 0 0 0 2px rgba(255, 255, 255, .4); position: relative; animation: reward-in .4s cubic-bezier(.2, 1.6, .5, 1) backwards; } .ticket::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 2px dashed rgba(255, 255, 255, .7); } /* Турнирная таблица */ .board__timer { font-size: 12.5px; color: #8b7a60; margin-bottom: 12px; font-weight: 700; } .board__top { padding: 6px; border-radius: var(--radius-md); background: linear-gradient(180deg, #ffdcae, #ffc98a); margin-bottom: 8px; } .board__list { max-height: 40dvh; overflow-y: auto; border-radius: var(--radius-sm); } .board__me { margin-top: 8px; border-radius: var(--radius-sm); overflow: hidden; box-shadow: 0 -4px 12px rgba(0, 0, 0, .12); } .board-row { display: flex; align-items: center; gap: 9px; padding: 8px 9px; border-bottom: 1px solid rgba(0, 0, 0, .06); font-size: 13px; } .board-row:last-child { border-bottom: none; } .board-row__avatar { width: 32px; height: 32px; flex: none; border-radius: 50%; background: linear-gradient(140deg, #b9c7e0, #7d8bab); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6); display: grid; place-items: center; font-size: 13px; font-weight: 900; color: #fff; } .board-row__info { flex: 1; min-width: 0; } .board-row__name { font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .board-row__points { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #7d6b52; font-variant-numeric: tabular-nums; } .board-row__points .trophy { width: 13px; height: 13px; } .board-row__place { flex: none; font-size: 12px; font-weight: 800; color: #7d6b52; white-space: nowrap; } .board-row--me { background: #fffdf5; box-shadow: inset 3px 0 0 var(--accent-2); } .board-row--1 .board-row__avatar { background: linear-gradient(140deg, #ffd76a, #e09b12); } .board-row--2 .board-row__avatar { background: linear-gradient(140deg, #e6e9f2, #9aa3bb); } .board-row--3 .board-row__avatar { background: linear-gradient(140deg, #f0b98a, #b9743c); } /* Правила */ .rules__body { font-size: 13.5px; line-height: 1.6; color: #5a4a33; } .rules__body h3 { font-size: 14px; font-weight: 900; margin: 14px 0 5px; color: var(--ink); } .rules__body ul { margin: 4px 0; padding-left: 1.15em; } .rules__body li { margin-bottom: 4px; } .rules__body table { width: 100%; border-collapse: collapse; margin: 6px 0; font-size: 12.5px; } .rules__body th, .rules__body td { padding: 5px 7px; border-bottom: 1px solid rgba(0, 0, 0, .08); text-align: left; } .rules__body th { font-weight: 900; color: var(--ink); } .rules__body .btn { margin-top: 14px; } /* ============================== Служебное ============================== */ .toast { position: fixed; left: 50%; bottom: 150px; transform: translateX(-50%); z-index: 60; padding: 11px 18px; border-radius: var(--radius-md); background: rgba(20, 16, 30, .94); color: #fff; font-size: 13.5px; font-weight: 800; box-shadow: 0 10px 26px rgba(0, 0, 0, .4); animation: toast-in .25s ease; max-width: calc(100vw - 32px); text-align: center; } .toast[hidden] { display: none; } @media (max-height: 720px) { .toast { bottom: 120px; } } @keyframes toast-in { from { opacity: 0; transform: translate(-50%, 14px); } to { opacity: 1; transform: translate(-50%, 0); } } /* Динамик рисуем фигурой: emoji по-разному выглядят в браузерах. */ .icon-btn--sound { width: 34px; } .spk { display: block; width: 15px; height: 14px; margin: 0 auto; position: relative; background: #fff; clip-path: polygon(0 32%, 32% 32%, 62% 4%, 62% 96%, 32% 68%, 0 68%); } .spk::after { content: ""; position: absolute; right: -1px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border: 2px solid #fff; border-radius: 50%; border-left-color: transparent; border-bottom-color: transparent; transform: rotate(-45deg); } /* Выключенный звук: волны гаснут, появляется перечёркивание. */ .is-muted .spk { opacity: .55; } .is-muted .spk::after { border: none; width: 17px; height: 2px; margin-top: -1px; right: -4px; background: #ff8a7a; border-radius: 1px; transform: rotate(-32deg); } /* ============================ Боковые панели =========================== */ .card { padding: 14px 16px; border-radius: var(--radius-lg); background: var(--panel); box-shadow: var(--shadow-panel); } .card__title { font-size: 14px; font-weight: 900; margin-bottom: 8px; } .card .btn--ghost { margin-top: 10px; } .rules-short { font-size: 12.5px; line-height: 1.55; color: #6d5c43; } .rules-short li { margin-bottom: 3px; } .my-history { display: flex; flex-direction: column; gap: 5px; max-height: 210px; overflow-y: auto; } .my-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--radius-sm); background: #fffaf0; font-size: 12px; font-variant-numeric: tabular-nums; } .my-row__coef { font-weight: 900; min-width: 46px; } .my-row--won .my-row__coef { color: #4b8f22; } .my-row--lost .my-row__coef { color: var(--danger); } .my-row__sum { margin-left: auto; font-weight: 800; } .fair { display: grid; grid-template-columns: 1fr; gap: 2px; margin-top: 8px; font-size: 11px; } .fair dt { font-weight: 900; color: #8b7a60; margin-top: 6px; } .fair dd { margin: 0; } .mini-board { display: flex; flex-direction: column; gap: 3px; } .mini-row { display: flex; align-items: center; gap: 7px; padding: 5px 7px; border-radius: 8px; background: #fffaf0; font-size: 12px; } .mini-row--me { background: linear-gradient(90deg, color-mix(in srgb, var(--accent-1) 30%, #fffaf0), #fffaf0); font-weight: 900; } .mini-row__place { width: 22px; font-weight: 900; color: #9b8a70; font-size: 11px; } .mini-row__name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mini-row__pts { font-variant-numeric: tabular-nums; font-weight: 800; } .puzzle { display: flex; flex-wrap: wrap; gap: 6px; } .puzzle-piece { display: flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 8px; background: #fffaf0; border: 1.5px solid var(--panel-edge); font-size: 11.5px; font-weight: 800; } .puzzle-piece__dot { width: 14px; height: 14px; background: linear-gradient(140deg, #f2c982, #cf8f35); clip-path: polygon( 10% 10%, 38% 10%, 38% 4%, 44% 0%, 56% 0%, 62% 4%, 62% 10%, 90% 10%, 90% 38%, 96% 38%, 100% 44%, 100% 56%, 96% 62%, 90% 62%, 90% 90%, 62% 90%, 62% 84%, 56% 80%, 44% 80%, 38% 84%, 38% 90%, 10% 90%, 10% 62%, 16% 62%, 20% 56%, 20% 44%, 16% 38%, 10% 38%); } /* ========================= Адаптив: десктоп ============================ */ @media (min-width: 900px) { body { background: #12172a radial-gradient(ellipse at 50% 0%, #223055, #0d1120 70%); } .stage { grid-template-columns: minmax(0, 300px) minmax(320px, 460px) minmax(0, 300px); gap: 20px; align-items: start; justify-content: center; padding: 20px; } .side { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 20px; } .side--left { justify-self: end; } .side--right { justify-self: start; } .game { /* Потолок выше высоты типового ноутбука: на мониторе 1080p и выше колонка занимает экран, а не оставляет широкую пустую полосу снизу. */ min-height: min(1000px, calc(100dvh - 40px)); height: min(1000px, calc(100dvh - 40px)); border-radius: 24px; box-shadow: 0 30px 70px rgba(0, 0, 0, .55); } } @media (min-width: 1400px) { .stage { grid-template-columns: 320px 480px 320px; } } /* ========================= Адаптив: узкий экран ========================= */ @media (max-width: 359px) { .tiers { gap: 5px; } .tier { padding: 7px 2px 6px; } .tier__piece { width: 26px; height: 26px; } .tier__cost { font-size: 11.5px; } .multiplier__win { font-size: 38px; } .multiplier[data-tier="3"] .multiplier__win { font-size: 52px; } .btn--cashout { font-size: 17px; padding: 12px 10px; } .payout { min-width: 88px; padding: 7px 9px; } .logo__text strong { font-size: 38px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* ======================= Коллекция «Маршрут» =========================== Награда за раунд — не иконка, а прогресс: видно, чего не хватает до комплекта и сколько бесплатных полётов уже заработано. ====================================================================== */ .collection { display: flex; flex-wrap: wrap; gap: 5px; } .collect { display: flex; align-items: center; gap: 5px; padding: 4px 8px; border-radius: 8px; border: 1.5px dashed var(--panel-edge); background: rgba(255, 255, 255, .35); font-size: 11.5px; font-weight: 800; color: var(--ink-mute); } .collect__dot { width: 14px; height: 14px; flex: none; background: #cbb894; clip-path: polygon( 10% 10%, 38% 10%, 38% 4%, 44% 0%, 56% 0%, 62% 4%, 62% 10%, 90% 10%, 90% 38%, 96% 38%, 100% 44%, 100% 56%, 96% 62%, 90% 62%, 90% 90%, 62% 90%, 62% 84%, 56% 80%, 44% 80%, 38% 84%, 38% 90%, 10% 90%, 10% 62%, 16% 62%, 20% 56%, 20% 44%, 16% 38%, 10% 38%); } .collect--have { border-style: solid; background: #fffaf0; color: var(--ink); } .collect--have .collect__dot { background: linear-gradient(140deg, #f2c982, #cf8f35); } .collect__count { color: var(--gold-deep); } .collection__bar { height: 6px; margin: 9px 0 6px; border-radius: 3px; background: rgba(0, 0, 0, .08); overflow: hidden; } .collection__bar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--gold), var(--gold-deep)); transition: width .5s cubic-bezier(.2, 1, .4, 1); } .collection__note { line-height: 1.45; } .collection__free { color: #4b8f22; } .reward__sub { font-size: 10.5px; font-weight: 800; color: var(--ink-mute); font-variant-numeric: tabular-nums; } .result__bonus { margin-top: 10px; padding: 10px 13px; border-radius: var(--radius-md); background: #e9f7d6; border: 2px solid #b9de8d; color: #3f6b1c; font-size: 12.5px; font-weight: 800; line-height: 1.45; } /* Кнопка старта, оплаченная собранным комплектом. */ .btn--free { background: linear-gradient(180deg, #ffd76a, #e09b12); color: #5a3c00; text-shadow: none; animation: free-glow 1.8s ease-in-out infinite; } @keyframes free-glow { 0%, 100% { box-shadow: var(--shadow-btn); } 50% { box-shadow: 0 4px 0 rgba(0, 0, 0, .22), 0 0 24px rgba(255, 197, 49, .95); } } /* ======================= Мобильные шторки ============================== На телефоне модальное окно — не маленькая коробка по центру, а шторка снизу на всю ширину с одним скроллом. Вложенная прокрутка внутри модалки на сенсорном экране мучительна: листаешь одно, двигается другое. ====================================================================== */ @media (max-width: 720px) { .modal { padding: 0; align-items: flex-end; } .modal__box { max-width: none; width: 100%; max-height: 92dvh; border-radius: 22px 22px 0 0; padding: 28px 16px calc(18px + env(safe-area-inset-bottom)); animation: sheet-in .3s cubic-bezier(.2, .9, .3, 1); /* Инерционная прокрутка и запрет «протягивания» страницы под шторкой. */ -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; } /* Ручка: подсказывает, что шторку можно стянуть вниз. */ .modal__box::before { content: ""; position: absolute; left: 50%; top: 11px; transform: translateX(-50%); width: 46px; height: 4px; border-radius: 2px; background: rgba(74, 56, 35, .22); } .modal__close { top: 18px; right: 12px; } /* Турнирная таблица одним скроллом: список больше не прокручивается сам, а топ-3 и своя строка держатся на краях — как требует постановка. */ .board__list { max-height: none; overflow: visible; } .board__top { position: sticky; top: 0; z-index: 2; box-shadow: 0 6px 12px -6px rgba(0, 0, 0, .25); } .board__me { position: sticky; bottom: calc(-18px - env(safe-area-inset-bottom)); z-index: 2; background: var(--panel); padding-bottom: 2px; } /* Строки таблицы крупнее: попасть пальцем и прочитать с телефона. */ .board-row { padding: 11px 9px; font-size: 14px; } .board-row__avatar { width: 36px; height: 36px; font-size: 14px; } .board-row__place { font-size: 11.5px; } .rules__body { font-size: 14.5px; } .rules__body h3 { font-size: 15px; margin-top: 18px; } /* У шторки с панелями карточки идут во всю ширину с самого верха, поэтому content должен начинаться ниже кнопки закрытия — иначе она их перекрывает. У остальных окон сверху короткий заголовок, и запаса хватает. */ .modal__box.panels { padding-top: 56px; } } @keyframes sheet-in { from { transform: translateY(100%); opacity: .6; } to { transform: translateY(0); opacity: 1; } } /* Шторка с боковыми панелями: внутри неё колонки снова показываются. */ .panels__host { display: flex; flex-direction: column; gap: 14px; } .panels__host .side { display: flex; flex-direction: column; gap: 14px; position: static; } /* Внутри шторки фон уже кремовый, поэтому карточкам хватает рамки. */ .panels__host .card { box-shadow: none; border: 1.5px solid var(--panel-edge); background: #fffaf0; } /* Иконка кнопки панелей — три полосы, без emoji. */ .icon-btn--panels { width: 34px; } .bars { display: block; width: 16px; height: 12px; margin: 0 auto; background: linear-gradient(#fff, #fff) top / 100% 2px no-repeat, linear-gradient(#fff, #fff) center / 100% 2px no-repeat, linear-gradient(#fff, #fff) bottom / 100% 2px no-repeat; } @media (max-width: 359px) { /* Пять кнопок в шапке на узком экране: сжимаем, чтобы баланс не выдавило. */ .topbar { gap: 5px; padding-left: 8px; padding-right: 8px; } .icon-btn { width: 32px; height: 34px; font-size: 16px; } .icon-btn--sound, .icon-btn--panels { width: 30px; } .balance { font-size: 15px; gap: 4px; } .balance__topup { padding: 3px 6px; font-size: 10px; margin-left: 4px; } }