/* NEXT — базовый визуальный слой. Премиальный минимализм в языке OleHov (ТЗ §62): графит, дымчатое стекло, серебро. Никакого казино-неона, радужных плиток и красного Tinder-UI. Это функциональная база; финальная визуальная отделка — отдельный проход. */ .next-page { padding: 0; margin: 0; } /* Экранная запись Олега (2026-08-29) доказала: свайп по доске не долетает до игры вообще — вместо этого нижняя панель Safari разворачивается в адресную строку, а один раз страница даже перезагрузилась. Это нативный жест Safari "показать/скрыть панель по скроллу": WKWebView отдаёт вертикальную (или почти вертикальную — палец не бывает идеально горизонтальным) составляющую свайпа своему собственному UIScrollView-распознавателю раньше, чем наш touchmove/preventDefault успевает его перехватить — но только если у страницы вообще ЕСТЬ что скроллить. `touch-action: none` на самой доске этого не решает: он не даёт странице скроллиться ЧЕРЕЗ доску, но если у документа в целом есть хоть немного лишней высоты, Safari всё равно считает его "скроллящимся" документом и держит наготове свой жест на уровне рута. Первая попытка фикса ставила position:fixed на — это и есть нестандартное поведение, ломавшее вёрстку в реальном Safari (см. историю изменений). Правильный, широко используемый паттерн — фиксировать ТОЛЬКО body (не html): html получает обычный overflow:hidden без смены position, а весь contentbox прибивается через position:fixed на body. Так документ гарантированно нескроллящийся, и Safari не за что зацепиться своим жестом, но верстка не ломается — position:fixed на body, в отличие от html, стандартная и предсказуемая техника (её использует, например, пакет body-scroll-lock). Класс ставится JS только на экране игры (next_play.html) — /store остаётся обычной скроллящейся страницей. */ html.next-lock { height: 100%; overflow: hidden; } body.next-lock { position: fixed; inset: 0; width: 100%; height: 100%; overflow: hidden; overscroll-behavior: none; } .next { --next-bg: #0c0d10; --next-surface: rgba(255, 255, 255, 0.05); --next-line: rgba(255, 255, 255, 0.10); --next-text: #f2f3f5; --next-muted: rgba(242, 243, 245, 0.55); --next-silver: linear-gradient(145deg, #e8eaee, #b9bec7 55%, #8f959f); min-height: 100dvh; background: radial-gradient(120% 90% at 50% 0%, #16181d 0%, var(--next-bg) 62%); color: var(--next-text); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, system-ui, sans-serif; display: flex; flex-direction: column; align-items: center; gap: 20px; padding: max(16px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom)); -webkit-user-select: none; user-select: none; overscroll-behavior: none; } .next__top { width: 100%; max-width: 460px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .next__brand { font-size: 22px; font-weight: 700; letter-spacing: 0.32em; color: var(--next-text); text-decoration: none; } .next__stats { display: flex; gap: 8px; } .next__stat { min-width: 68px; padding: 8px 12px; border-radius: 14px; background: var(--next-surface); border: 1px solid var(--next-line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); display: flex; flex-direction: column; align-items: center; gap: 2px; text-decoration: none; color: inherit; } .next__stat span { font-size: 10px; letter-spacing: 0.16em; color: var(--next-muted); line-height: 1.4; } .next__stat--link span { font-size: 13px; letter-spacing: 0; } .next__stat b { font-size: 17px; font-variant-numeric: tabular-nums; } /* Отказ по недостатку ⚡ подсвечивает сам счётчик, а не только тост — взгляд уже на нём после неудачной попытки потратить (ТЗ §31, §43). */ @keyframes next-balance-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-3px); } 75% { transform: translateX(3px); } } .next__stat--empty { border-color: rgba(201, 169, 97, 0.65); animation: next-balance-shake 260ms ease-in-out; } .next__board { width: min(92vw, 460px); aspect-ratio: 1; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); gap: 10px; padding: 10px; border-radius: 22px; /* Без backdrop-filter здесь намеренно (было blur(18px)): это единственный элемент, который перерисовывается на каждый свайп (16 плиток внутри тоже репэйнтятся), и живой blur поверх постоянно меняющегося контента — самая дорогая GPU-операция на мобильном Safari, реальная причина подтормаживания при свайпах, а не сеть (2026-08-29, LTE на видео Олега не была узким местом — задержка хода уже скрыта оптимистичным рендером в game.js). Фон и так почти сливается с задником страницы, разницы на глаз без блюра практически нет. */ background: rgba(6, 7, 9, 0.55); border: 1px solid var(--next-line); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), inset 0 0 40px rgba(0, 0, 0, 0.25); touch-action: none; /* свайп по доске не должен скроллить страницу (ТЗ §69) */ } /* Плитки — brushed metal (ТЗ §62): тонкие диагональные полосы поверх базового градиента дают эффект шлифованного металла вместо плоской заливки, плюс мягкий верхний блик и внутренняя тень для объёма. */ .next-tile { --tile-brush: repeating-linear-gradient( 115deg, rgba(255, 255, 255, 0.16) 0px, rgba(255, 255, 255, 0.16) 1px, rgba(0, 0, 0, 0.04) 1px, rgba(0, 0, 0, 0.04) 3px ); border: 0; border-radius: 14px; font: inherit; font-weight: 650; font-variant-numeric: tabular-nums; color: #10121a; background-image: var(--tile-brush), var(--next-silver); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), inset 0 -6px 10px rgba(0, 0, 0, 0.12); display: flex; align-items: center; justify-content: center; font-size: clamp(18px, 6.4vw, 32px); transition: transform 110ms ease, opacity 110ms ease; } .next-tile--empty { background-image: none; background-color: rgba(255, 255, 255, 0.035); box-shadow: none; } .next-tile--2, .next-tile--4 { background-image: var(--tile-brush), linear-gradient(145deg, #f4f5f7, #cfd3da); } .next-tile--8, .next-tile--16 { background-image: var(--tile-brush), linear-gradient(145deg, #e3e6ec, #b3b9c4); } .next-tile--32, .next-tile--64 { background-image: var(--tile-brush), linear-gradient(145deg, #cfd4de, #9aa2b1); } .next-tile--128, .next-tile--256, .next-tile--512 { background-image: var(--tile-brush), linear-gradient(145deg, #b9c0cd, #7d8797); color: #0c0d10; } .next-tile--1024, .next-tile--2048, .next-tile--max { background-image: var(--tile-brush), linear-gradient(145deg, #f0e3c2, #c9a961 60%, #9c7b34); color: #14100a; font-size: clamp(15px, 5.2vw, 27px); } .next-tile--target { outline: 2px solid rgba(201, 169, 97, 0.85); cursor: pointer; } .next-tile:disabled { cursor: default; } /* Плитка появляется с лёгким подскоком — единственный момент, где взгляд должен зацепиться за новое значение, а не бегать по всей доске. */ @keyframes next-tile-pop { 0% { transform: scale(0.4); opacity: 0; } 70% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } } .next-tile--pop { animation: next-tile-pop 220ms cubic-bezier(.2, .9, .3, 1.3); } /* Мерж даёт доске один общий импульс вместо анимирования каждой плитки — заметно, но не отвлекает от следующего хода. */ @keyframes next-board-pulse { 0% { box-shadow: inset 0 0 0 0 rgba(201, 169, 97, 0); } 35% { box-shadow: inset 0 0 0 2px rgba(201, 169, 97, 0.45); } 100% { box-shadow: inset 0 0 0 0 rgba(201, 169, 97, 0); } } .next__board--merged { animation: next-board-pulse 320ms ease-out; } .next__actions { display: flex; gap: 10px; width: min(92vw, 460px); } .next__action { flex: 1; padding: 13px 10px; border-radius: 15px; cursor: pointer; background: var(--next-surface); border: 1px solid var(--next-line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); color: var(--next-text); font: inherit; font-size: 13px; letter-spacing: 0.14em; display: flex; flex-direction: column; gap: 3px; align-items: center; } .next__action em { font-style: normal; font-size: 11px; color: var(--next-muted); letter-spacing: 0.06em; } .next__action:disabled { opacity: 0.35; cursor: default; } .next__action.is-active { border-color: rgba(201, 169, 97, 0.8); } .next__action--ghost { flex: 0 0 84px; } /* Оверлей поверх доски, а не блок в потоке — иначе на iPhone SE/mini карточка game over уезжает за нижний край экрана и требует скролла (ТЗ §64, §68). */ .next__over:not([hidden]) { position: fixed; inset: 0; z-index: 15; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(8, 9, 11, 0.72); backdrop-filter: blur(6px); } .next__over-card { width: min(92vw, 380px); padding: 26px 24px; border-radius: 20px; text-align: center; background: rgba(14, 15, 19, 0.78); border: 1px solid var(--next-line); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 20px 60px rgba(0, 0, 0, 0.45); } /* Game over — единственный момент, который стоит подчеркнуть паузой перед решением: экран не выскакивает мгновенно, а слегка проявляется (ТЗ §64). */ @keyframes next-over-enter { 0% { opacity: 0; transform: translateY(10px) scale(0.97); } 100% { opacity: 1; transform: translateY(0) scale(1); } } .next__over--enter { animation: next-over-enter 260ms ease-out; } .next__over-title { margin: 0 0 12px; letter-spacing: 0.2em; font-size: 14px; color: var(--next-muted); } .next__over-line { margin: 4px 0; color: var(--next-muted); font-size: 14px; } .next__over-line b { color: var(--next-text); font-size: 20px; margin-left: 6px; } .next__cta { margin-top: 18px; width: 100%; padding: 15px; border: 0; border-radius: 15px; cursor: pointer; background: linear-gradient(145deg, #f0e3c2, #c9a961 60%, #9c7b34); color: #14100a; font: inherit; font-weight: 650; letter-spacing: 0.12em; } .next__cta em { font-style: normal; } /* Нет доступных Continue и нет аккаунта — ведём в магазин, а не прячем кнопку молча. */ .next__cta--locked { background: var(--next-surface); color: var(--next-muted); border: 1px solid var(--next-line); } .next__secondary { margin-top: 10px; width: 100%; padding: 12px; border-radius: 14px; cursor: pointer; background: transparent; border: 1px solid var(--next-line); color: var(--next-muted); font: inherit; font-size: 12px; letter-spacing: 0.14em; } .next__install { margin-top: 16px; padding: 14px 16px; border-radius: 14px; background: rgba(201, 169, 97, 0.08); border: 1px solid rgba(201, 169, 97, 0.35); text-align: left; } .next__install-text { margin: 0; font-size: 13px; color: var(--next-text); line-height: 1.5; } .next__install-actions { display: flex; gap: 10px; margin-top: 10px; } .next__install-btn { flex: 1; padding: 10px; border: 0; border-radius: 10px; cursor: pointer; background: linear-gradient(145deg, #f0e3c2, #c9a961 60%, #9c7b34); color: #14100a; font: inherit; font-weight: 650; font-size: 13px; } .next__install-skip { padding: 10px 14px; border-radius: 10px; cursor: pointer; background: transparent; border: 1px solid var(--next-line); color: var(--next-muted); font: inherit; font-size: 13px; } .next__share { margin-top: 16px; padding: 14px 16px; border-radius: 14px; background: rgba(201, 169, 97, 0.08); border: 1px solid rgba(201, 169, 97, 0.35); text-align: left; } .next__share-text { margin: 0; font-size: 13px; color: var(--next-text); line-height: 1.5; } .next__cta--share { margin-top: 10px; padding: 12px; font-size: 13px; } .next__referral-row { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; } .next__referral-row input { width: 100%; box-sizing: border-box; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--next-line); background: rgba(255,255,255,0.04); color: var(--next-text); font: inherit; font-size: 13px; } .next__referral-copy-btn { width: 100%; padding: 10px 12px; border-radius: 10px; cursor: pointer; border: 1px solid var(--next-line); background: transparent; color: var(--next-text); font: inherit; font-weight: 600; font-size: 12px; white-space: nowrap; } .next__title { margin: 8px 0 0; font-size: 26px; letter-spacing: 0.04em; } .next__lede { margin: 0; color: var(--next-muted); font-size: 14px; } /* Форма профиля (SHIP 2) — те же графит/серебро/золото, что и в игре. */ .next__profile-form { width: min(92vw, 460px); display: flex; flex-direction: column; gap: 16px; } .next__field { display: flex; flex-direction: column; gap: 6px; border: 0; padding: 0; margin: 0; } .next__field > span, .next__field legend { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--next-muted); padding: 0; } .next__field input[type="text"], .next__field input[type="date"], .next__field select, .next__field textarea { padding: 12px 14px; border-radius: 12px; border: 1px solid var(--next-line); background: var(--next-surface); color: var(--next-text); font: inherit; font-size: 15px; } .next__field textarea { resize: vertical; font-family: inherit; } .next__field--checkbox { flex-direction: row; align-items: center; gap: 10px; font-size: 14px; color: var(--next-text); } .next__field--checkbox input { width: 18px; height: 18px; } .next__radio { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--next-text); padding: 8px 0; font-weight: 400; text-transform: none; letter-spacing: normal; } .next__interests { display: flex; flex-wrap: wrap; gap: 8px; } .next__interest-chip { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--next-line); background: var(--next-surface); font-size: 13px; color: var(--next-text); cursor: pointer; } .next__interest-chip input { width: 14px; height: 14px; } .next__photos { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0; } .next__photo-cell { position: relative; width: 96px; height: 96px; border-radius: 10px; overflow: hidden; border: 1px solid var(--next-line); background: var(--next-surface); } .next__photo-cell img { width: 100%; height: 100%; object-fit: cover; display: block; } .next__photo-badge { position: absolute; left: 0; right: 0; bottom: 0; padding: 3px 6px; font-size: 10px; text-align: center; text-transform: uppercase; letter-spacing: .03em; color: #fff; background: rgba(0,0,0,.55); } .next__photo-badge--approved { background: rgba(46,125,50,.75); } .next__photo-badge--rejected { background: rgba(192,57,43,.75); } .next__photo-main { position: absolute; top: 4px; left: 4px; font-size: 9px; padding: 2px 6px; border-radius: 999px; background: var(--next-gold, #c9a24b); color: #14151a; text-transform: uppercase; } .next__photo-remove { position: absolute; top: 2px; right: 2px; width: 20px; height: 20px; border-radius: 50%; border: none; background: rgba(0,0,0,.55); color: #fff; font-size: 13px; line-height: 1; cursor: pointer; } .next__photo-add { display: inline-flex; align-items: center; padding: 10px 16px; border-radius: 10px; border: 1px dashed var(--next-line); color: var(--next-muted); font-size: 13px; cursor: pointer; } .next__photo-hint { font-size: 12px; color: var(--next-muted); margin-top: 6px; } .next__discovery-stage { position: relative; width: 100%; max-width: 420px; margin: 16px auto; } .next__discovery-card { background: var(--next-surface); border: 1px solid var(--next-line); border-radius: 18px; overflow: hidden; touch-action: pan-y; } .next__discovery-photo { width: 100%; height: min(38vh, 300px); background-color: #1a1b20; background-size: cover; background-position: center; } .next__discovery-info { padding: 16px; } .next__discovery-name { font-size: 20px; color: var(--next-text); } .next__discovery-name span { color: var(--next-muted); font-weight: 400; } .next__discovery-city { font-size: 13px; color: var(--next-muted); margin: 4px 0 10px; } .next__discovery-playstyle { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: 12px; color: var(--next-muted); } .next__discovery-playstyle span:first-child { padding: 3px 10px; border-radius: 999px; border: 1px solid var(--next-line); color: var(--next-gold, #c9a24b); text-transform: uppercase; letter-spacing: .04em; } .next__discovery-playstyle b { color: var(--next-text); } .next__discovery-bio { font-size: 14px; color: var(--next-text); margin: 10px 0 0; } .next__discovery-empty { padding: 60px 20px; text-align: center; color: var(--next-muted); border: 1px dashed var(--next-line); border-radius: 18px; } .next__discovery-actions { display: flex; justify-content: center; gap: 18px; margin: 18px 0; } .next__swipe-btn { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--next-line); background: var(--next-surface); color: var(--next-text); font-size: 22px; cursor: pointer; } .next__swipe-btn--pass { color: #e0555c; } .next__swipe-btn--like { color: #2e9e5b; } .next__swipe-btn--super { color: var(--next-gold, #c9a24b); } .next__matches { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; } .next__match-row { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; border: 1px solid var(--next-line); background: var(--next-surface); text-decoration: none; color: var(--next-text); } .next__match-photo { width: 52px; height: 52px; border-radius: 50%; background-size: cover; background-position: center; background-color: #1a1b20; flex-shrink: 0; } .next__match-meta { display: flex; flex-direction: column; gap: 2px; overflow: hidden; } .next__match-meta span { font-size: 12px; color: var(--next-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .next--chat { display: flex; flex-direction: column; height: 100vh; padding-bottom: 0; } .next__challenge-actions { display: flex; gap: 8px; margin: 10px 0; } .next__challenge-panel { margin-bottom: 10px; padding: 10px 12px; border-radius: 12px; font-size: 13px; border: 1px solid var(--next-line); background: var(--next-surface); color: var(--next-text); } .next__challenge-panel button { margin-left: 8px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--next-line); background: transparent; color: var(--next-gold, #c9a24b); font-size: 12px; cursor: pointer; } .next__icebreakers { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; } .next__icebreaker-chip { text-align: left; padding: 8px 12px; border-radius: 12px; border: 1px dashed var(--next-line); background: transparent; color: var(--next-muted); font-size: 13px; cursor: pointer; } .next__icebreaker-chip:hover { color: var(--next-text); border-color: var(--next-gold, #c9a24b); } .next__messages { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 10px 0; } .next__message { max-width: 78%; padding: 8px 12px; border-radius: 14px; font-size: 14px; line-height: 1.35; } .next__message--mine { align-self: flex-end; background: var(--next-gold, #c9a24b); color: #14151a; } .next__message--theirs { align-self: flex-start; background: var(--next-surface); border: 1px solid var(--next-line); color: var(--next-text); } .next__chat-form { display: flex; gap: 8px; padding: 10px 0; } .next__chat-form input { flex: 1; padding: 10px 12px; border-radius: 999px; border: 1px solid var(--next-line); background: var(--next-surface); color: var(--next-text); } .next__chat-form button { width: 44px; height: 44px; border-radius: 50%; padding: 0; } .next__safety-section { margin: 22px 0; } .next__safety-section h2 { font-size: 17px; margin: 0 0 6px; color: var(--next-text); } .next__safety-section p, .next__safety-section li { font-size: 14px; color: var(--next-muted); line-height: 1.5; } .next__safety-section ul { margin: 6px 0 0; padding-left: 20px; } .next__packs { width: min(92vw, 460px); display: grid; gap: 10px; } .next__pack { display: flex; align-items: center; justify-content: space-between; padding: 17px 19px; border-radius: 16px; cursor: pointer; background: var(--next-surface); border: 1px solid var(--next-line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); color: var(--next-text); font: inherit; } .next__pack-credits { font-size: 18px; font-weight: 650; } .next__pack-price { color: var(--next-muted); font-variant-numeric: tabular-nums; } .next__note { color: var(--next-muted); font-size: 13px; text-align: center; } .next__note a, .next-toast__action { color: #c9a961; margin-left: 6px; } .next__toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: max(18px, env(safe-area-inset-bottom)); padding: 12px 18px; border-radius: 14px; font-size: 13px; background: rgba(20, 21, 26, 0.95); border: 1px solid var(--next-line); max-width: min(92vw, 460px); } /* :not([hidden]) — author `display` иначе перебивает UA-правило `[hidden]{display:none}` при равной специфичности, и элемент остаётся видимым даже после того, как JS выставил атрибут hidden (наступил на этом с next__over). */ .next__intro:not([hidden]) { position: fixed; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(8, 9, 11, 0.92); backdrop-filter: blur(6px); } .next__intro-card { width: min(92vw, 380px); padding: 32px 26px; border-radius: 22px; text-align: center; background: rgba(18, 19, 24, 0.78); border: 1px solid var(--next-line); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 20px 60px rgba(0, 0, 0, 0.45); } .next__intro-brand { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: 0.34em; } .next__intro-tagline { margin: 10px 0 0; color: var(--next-muted); font-size: 15px; } .next__intro-hint { margin: 18px 0 0; color: var(--next-muted); font-size: 13px; line-height: 1.5; } .next__intro .next__cta { margin-top: 22px; } @media (prefers-reduced-motion: reduce) { .next-tile, .next-tile--pop, .next__board--merged, .next__over--enter, .next__stat--empty { animation: none; transition: none; } }