/* ========================================================= НАСТЯ — интерфейс игры. Современный дизайн: обрамлённое игровое окно, бирюзовая (Tiffany) палитра, чистые шрифты, плавные переходы. ========================================================= */ /* ---------------- Шрифт New People (локальные файлы, assets/fonts) ---------------- Начертания подключены с диапазонами весов, чтобы браузер не «досинтезировал» промежуточные значения, а брал ближайший настоящий файл. */ @font-face { font-family: 'New People'; src: url('../assets/fonts/NewPeople-Light.ttf') format('truetype'); font-weight: 200 350; font-style: normal; font-display: swap; } @font-face { font-family: 'New People'; src: url('../assets/fonts/NewPeople-Regular.ttf') format('truetype'); font-weight: 351 450; font-style: normal; font-display: swap; } @font-face { font-family: 'New People'; src: url('../assets/fonts/NewPeople-Medium.ttf') format('truetype'); font-weight: 451 550; font-style: normal; font-display: swap; } @font-face { font-family: 'New People'; src: url('../assets/fonts/NewPeople-SemiBold.ttf') format('truetype'); font-weight: 551 650; font-style: normal; font-display: swap; } @font-face { font-family: 'New People'; src: url('../assets/fonts/NewPeople-Bold.ttf') format('truetype'); font-weight: 651 750; font-style: normal; font-display: swap; } @font-face { font-family: 'New People'; src: url('../assets/fonts/NewPeople-Black.ttf') format('truetype'); font-weight: 751 900; font-style: normal; font-display: swap; } @font-face { font-family: 'New People'; src: url('../assets/fonts/NewPeople-Italic.ttf') format('truetype'); font-weight: 351 450; font-style: italic; font-display: swap; } :root { /* Бирюза / Tiffany как фирменная палитра */ --tiffany: #0abab5; --turq: #2fe0cf; --turq-lt: #7ff2e6; --turq-dk: #0b8f88; --gold: #ffd34d; --red: #ff6a5c; --bg-0: #071619; --bg-1: #0c2226; --panel: rgba(12, 34, 38, 0.86); --panel-brd: rgba(47, 224, 207, 0.55); --text: #eafcfa; --text-dim: #9fc7c4; --shadow: rgba(2, 10, 12, 0.6); --font-ui: "New People", "Segoe UI", system-ui, -apple-system, "Roboto", "Helvetica Neue", Arial, sans-serif; --radius: 16px; /* Панель экранных кнопок под игрой (высота учитывается в размере окна игры) */ --tc-h: 62px; --tc-gap: 8px; --tc-space: 0px; /* на сенсорных устройствах = высота панели + отступ */ --frame-w: min(96vw, calc((100vh - 32px - var(--tc-space)) * 16 / 9)); } /* Классы состояния висят на : --frame-w объявлена здесь же, и var() внутри неё подставляется значениями именно этого элемента. */ :root.is-touch { --tc-space: calc(var(--tc-h) + var(--tc-gap)); } /* В главном меню экранные кнопки не нужны — их место занимают выходные данные (высоту блока подставляет скрипт), поэтому размер окна игры почти не меняется. */ :root.is-touch.menu-open { --tc-space: var(--legal-space, 0px); } /* Единый шрифт для всего интерфейса, включая элементы форм. */ html, body, button, input, select, textarea, .pix-btn, .pix-toggle, .touch-btn { font-family: var(--font-ui); font-optical-sizing: auto; } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; font-family: var(--font-ui); color: var(--text); -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; overflow: hidden; } /* Сцена: центрирует игровое окно на насыщенном фоне */ #stage { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--tc-gap, 10px); padding: 16px; background: radial-gradient(1200px 700px at 50% -10%, rgba(10,186,181,0.22), transparent 60%), radial-gradient(900px 600px at 90% 110%, rgba(47,224,207,0.12), transparent 55%), linear-gradient(160deg, #06181b 0%, #04262a 50%, #051114 100%); } /* ================= ОБРАМЛЁННОЕ ОКНО ИГРЫ ================= */ #game-frame { position: relative; flex: 0 0 auto; /* не сжимать: иначе теряется пропорция 16:9 */ /* Контейнер для cq-единиц: элементы меню масштабируются от размера окна игры */ container-type: size; container-name: frame; width: min(var(--frame-w), 1320px); aspect-ratio: 16 / 9; overflow: hidden; /* ничего не выходит за рамку */ border-radius: var(--radius); /* Рамка нарисована тенью, а не border: иначе внутренняя область перестаёт быть 16:9 и по краям появляются полосы. */ border: 0; background: #0a1a1d; box-shadow: 0 0 0 3px rgba(47, 224, 207, 0.35), 0 0 0 9px rgba(4, 20, 22, 0.9), 0 24px 70px rgba(0, 0, 0, 0.6), 0 0 60px rgba(10, 186, 181, 0.25); } /* Тонкая внутренняя бирюзовая окантовка-«стекло» */ #game-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: var(--radius); box-shadow: inset 0 0 0 2px rgba(127, 242, 230, 0.14), inset 0 0 40px rgba(0, 0, 0, 0.35); z-index: 30; } #game-canvas { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; image-rendering: crisp-edges; display: block; } /* ---------------- Экраны ---------------- */ .screen { position: absolute; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: clamp(6px, 1.6vh, 14px); padding: clamp(10px, 2.4vw, 26px); z-index: 20; text-align: center; overflow: hidden; animation: fade-in 0.35s ease; } .screen.active { display: flex; } .screen.overlay { background: rgba(4, 14, 16, 0.78); backdrop-filter: blur(3px); } @keyframes fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* ---------------- Стартовое меню ---------------- */ /* Баннер занимает всю область игрового окна */ #screen-menu { padding: 0; background: #06181b url("../assets/banner.png@v=2") center center / cover no-repeat; justify-content: flex-end; /* кнопки и выходные данные прижаты к низу */ gap: clamp(10px, 2.2vh, 22px); /* воздух между кнопками и выходными данными */ } /* Нижний блок меню: кнопки слева, соцсети справа, под ними — выходные данные */ .menu-bottom { width: 100%; height: 40%; /* 2/5 страницы по вертикали */ display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 0 clamp(12px, 3.5%, 56px); } /* Кнопки меню — левый низ; занимают строго 2/5 высоты окна по вертикали */ #screen-menu .menu-buttons { position: static; width: min(42%, 268px); height: 100%; margin: 0; display: flex; flex-direction: column; gap: clamp(6px, 1.4vh, 14px); } #screen-menu .menu-buttons .pix-btn { flex: 1 1 0; /* кнопки поровну заполняют 2/5 высоты */ display: flex; align-items: center; justify-content: center; font-size: clamp(13px, 2.8vw, 18px); background: linear-gradient(180deg, rgba(12,40,44,0.93), rgba(8,26,30,0.93)); box-shadow: 0 6px 18px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06); } #screen-menu .menu-buttons .pix-btn--primary { background: linear-gradient(180deg, var(--turq-lt), var(--tiffany)); font-weight: 900; /* «ИГРАТЬ» — самая заметная кнопка меню */ letter-spacing: 2px; } /* Выходные данные (мелким шрифтом) — самый низ главного меню */ .menu-legal { width: 100%; max-height: 34%; overflow-y: auto; padding: clamp(5px, 1vh, 10px) clamp(12px, 3.5%, 56px) calc(clamp(6px, 1.2vh, 12px) + env(safe-area-inset-bottom)); font-size: clamp(6px, 0.72vw, 10px); font-weight: 400; line-height: 1.45; letter-spacing: 0.2px; color: rgba(234, 252, 250, 0.5); text-align: center; background: linear-gradient(180deg, rgba(4, 16, 18, 0) 0%, rgba(4, 16, 18, 0.72) 30%, rgba(4, 16, 18, 0.88) 100%); } .menu-banner { width: min(88%, 620px); height: clamp(38px, 11%, 110px); flex-shrink: 0; border: 2px dashed rgba(47,224,207,0.5); border-radius: 12px; background: repeating-linear-gradient(45deg, rgba(10,186,181,0.08) 0 14px, transparent 14px 28px), rgba(6, 26, 30, 0.6); display: flex; align-items: center; justify-content: center; } .banner-hint { color: var(--text-dim); letter-spacing: 4px; font-size: clamp(10px, 2.4vw, 14px); font-weight: 600; } .game-title { line-height: 1.02; } .title-line-1, .title-line-2 { display: block; font-weight: 800; letter-spacing: 1px; font-size: clamp(28px, 6.4vw, 60px); line-height: 1.04; text-shadow: 0 4px 24px rgba(0,0,0,0.5); } .title-line-1 { color: #ffffff; } .title-line-2 { background: linear-gradient(180deg, var(--turq-lt), var(--tiffany)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 20px rgba(10,186,181,0.45)); } .title-sub { display: block; margin-top: 4px; font-weight: 600; font-size: clamp(11px, 2.3vw, 17px); color: var(--gold); letter-spacing: 5px; } .menu-buttons { display: flex; flex-direction: column; gap: 10px; width: min(78%, 320px); margin-top: 4px; } .menu-footer { color: var(--text-dim); font-size: 12px; } /* ---------------- Кнопки ---------------- */ .pix-btn { font-family: inherit; font-weight: 700; font-size: clamp(14px, 3vw, 18px); letter-spacing: 1.5px; color: var(--text); background: linear-gradient(180deg, rgba(24, 60, 64, 0.95), rgba(14, 40, 44, 0.95)); border: 1.5px solid rgba(47, 224, 207, 0.4); border-radius: 12px; padding: clamp(10px, 1.6vh, 13px) 22px; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06); transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.2s ease, border-color 0.2s ease; } .pix-btn:hover { transform: translateY(-2px); border-color: var(--turq); box-shadow: 0 10px 26px rgba(0,0,0,0.4), 0 0 22px rgba(47,224,207,0.35); } .pix-btn:active { transform: translateY(1px); box-shadow: 0 4px 12px rgba(0,0,0,0.4); } .pix-btn--primary { color: #04201d; background: linear-gradient(180deg, var(--turq-lt), var(--tiffany)); border-color: rgba(127,242,230,0.6); box-shadow: 0 8px 22px rgba(10,186,181,0.4), inset 0 1px 0 rgba(255,255,255,0.35); } .pix-btn--primary:hover { background: linear-gradient(180deg, #a6fbef, var(--turq)); box-shadow: 0 12px 30px rgba(10,186,181,0.55); } .pix-btn--small { padding: 8px 14px; font-size: 16px; border-radius: 10px; } /* Иконочные кнопки тумблеров (музыка / звуки) */ .pix-btn--icon { height: 42px; padding: 0; display: grid; place-items: center; } .pix-btn--icon .ico { width: 24px; height: 24px; display: block; } .ico-slash { display: none; } .pix-btn--icon.off { color: #c8d7d8; border-color: rgba(200, 215, 216, 0.35); background: linear-gradient(180deg, rgba(74, 92, 96, 0.96), rgba(43, 59, 63, 0.96)); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } .pix-btn--icon.off .ico-slash { display: block; } .pix-btn--icon.off .ico-wave { display: none; } /* Ряд тумблеров занимает всю ширину — как обычная кнопка над ним */ .toggle-row { display: flex; gap: 10px; align-items: stretch; } .toggle-row .pix-btn--icon { flex: 1 1 0; min-width: 0; } /* ---------------- Панели ---------------- */ .panel { width: min(92%, 440px); max-height: calc(100% - 12px); /* не выходит за рамку окна */ overflow-y: auto; background: var(--panel); backdrop-filter: blur(10px); border: 1.5px solid var(--panel-brd); border-radius: var(--radius); padding: clamp(16px, 3vw, 28px) clamp(16px, 3vw, 24px); display: flex; flex-direction: column; gap: clamp(9px, 1.6vh, 14px); box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 40px rgba(10,186,181,0.12); } /* ---------------- Полосы прокрутки ---------------- Ползунок заметный, сверху и снизу — стрелки-подсказки, что содержимое можно листать. Стрелки нарисованы здесь же (SVG). */ :root { --sb-up: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 3 10.4 8.6H1.6z' fill='%237ff2e6'/%3E%3C/svg%3E"); --sb-down: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 9 1.6 3.4h8.8z' fill='%237ff2e6'/%3E%3C/svg%3E"); } .panel, .menu-legal, .howto-body { scrollbar-width: auto; /* Firefox: обычная, не тонкая */ scrollbar-color: var(--turq) rgba(4, 18, 21, 0.9); } .panel::-webkit-scrollbar, .menu-legal::-webkit-scrollbar { width: 14px; } .panel::-webkit-scrollbar-track, .menu-legal::-webkit-scrollbar-track { background: rgba(4, 18, 21, 0.9); border: 1px solid rgba(47, 224, 207, 0.22); border-radius: 8px; } .panel::-webkit-scrollbar-thumb, .menu-legal::-webkit-scrollbar-thumb { min-height: 32px; background: linear-gradient(180deg, var(--turq-lt), var(--tiffany)); border: 2px solid rgba(4, 18, 21, 0.9); border-radius: 8px; box-shadow: 0 0 8px rgba(47, 224, 207, 0.55); } .panel::-webkit-scrollbar-thumb:hover, .menu-legal::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #bffef5, var(--turq)); } /* Стрелочки на концах дорожки */ .panel::-webkit-scrollbar-button:single-button, .menu-legal::-webkit-scrollbar-button:single-button { display: block; width: 14px; height: 14px; background-color: rgba(6, 26, 30, 0.95); background-repeat: no-repeat; background-position: center; background-size: 9px 9px; border-radius: 5px; } .panel::-webkit-scrollbar-button:single-button:vertical:decrement, .menu-legal::-webkit-scrollbar-button:single-button:vertical:decrement { background-image: var(--sb-up); } .panel::-webkit-scrollbar-button:single-button:vertical:increment, .menu-legal::-webkit-scrollbar-button:single-button:vertical:increment { background-image: var(--sb-down); } .panel::-webkit-scrollbar-button:single-button:hover, .menu-legal::-webkit-scrollbar-button:single-button:hover { background-color: rgba(47, 224, 207, 0.25); } /* --- Своя полоса прокрутки (ScrollRail): системная почти везде накладная и полупрозрачная, а на iOS не стилизуется вовсе. Там, где работает свой ползунок, системный прячем, чтобы не было двух полос. --- */ .has-rail { scrollbar-width: none; } .has-rail::-webkit-scrollbar { width: 0; height: 0; } /* Освобождаем место под полосу, чтобы она не легла на содержимое */ .panel.is-scrollable { padding-right: calc(clamp(16px, 3vw, 24px) + 22px); } .menu-legal.is-scrollable { padding-right: 26px; } /* Координаты задаёт скрипт: полоса стоит у правого края блока и не участвует в его прокрутке. */ .scroll-rail { position: absolute; width: 16px; z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px 0; } .scroll-rail.is-hidden { display: none; } .rail-track { position: relative; flex: 1 1 auto; width: 100%; background: rgba(4, 18, 21, 0.9); border: 1px solid rgba(47, 224, 207, 0.3); border-radius: 8px; } .rail-thumb { position: absolute; left: 1px; right: 1px; top: 0; border-radius: 7px; background: linear-gradient(180deg, var(--turq-lt), var(--tiffany)); box-shadow: 0 0 10px rgba(47, 224, 207, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.45); cursor: grab; touch-action: none; } .rail-thumb:hover { background: linear-gradient(180deg, #bffef5, var(--turq)); } .rail-thumb.is-dragging { cursor: grabbing; filter: brightness(1.12); } /* Стрелки-подсказки на концах полосы */ .rail-arrow { flex: 0 0 auto; width: 16px; height: 11px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; color: var(--turq-lt); transition: color 0.15s ease, opacity 0.2s ease; } .rail-arrow::before { content: ""; display: block; border-left: 5px solid transparent; border-right: 5px solid transparent; filter: drop-shadow(0 0 4px rgba(47, 224, 207, 0.55)); } .rail-arrow--up::before { border-bottom: 7px solid currentColor; } .rail-arrow--down::before { border-top: 7px solid currentColor; } .rail-arrow:hover { color: #ffffff; } .scroll-rail.at-top .rail-arrow--up, .scroll-rail.at-bottom .rail-arrow--down { opacity: 0.28; cursor: default; } /* Пока не листали — нижняя стрелка мягко «зовёт» вниз */ .scroll-rail.at-top .rail-arrow--down { animation: rail-hint 1.5s ease-in-out infinite; } @keyframes rail-hint { 0%, 100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(2px); opacity: 0.5; } } @media (prefers-reduced-motion: reduce) { .scroll-rail.at-top .rail-arrow--down { animation: none; } } .panel--win { border-color: rgba(255,211,77,0.6); box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 60px rgba(255,211,77,0.3); } .panel--lose { border-color: rgba(255,106,92,0.55); } /* Компактные панели (пауза, настройки): меньше полей, плотнее ряды */ .panel--compact { width: min(84%, 340px); gap: clamp(6px, 1.1vh, 9px); padding: clamp(12px, 2.2vw, 18px) clamp(14px, 2.4vw, 20px); } .panel--compact .panel-title { font-size: clamp(18px, 4.2vw, 26px); letter-spacing: 2px; margin-bottom: 2px; } .panel--compact .pix-btn:not(.pix-btn--icon) { padding: clamp(7px, 1.1vh, 10px) 14px; font-size: clamp(12px, 2.6vw, 15px); } .panel--compact .pix-btn--icon { height: 36px; } .panel--compact .pix-btn--icon .ico { width: 21px; height: 21px; } .panel--compact .setting-row { font-size: clamp(12px, 2.6vw, 15px); padding: 2px; } .panel-title { letter-spacing: 3px; font-weight: 800; font-size: clamp(22px, 5.5vw, 34px); text-shadow: 0 3px 16px rgba(0,0,0,0.5); } .panel-title--win { color: var(--gold); filter: drop-shadow(0 0 18px rgba(255,211,77,0.5)); } .panel-title--lose { color: var(--red); } .setting-row { display: flex; align-items: center; justify-content: space-between; font-size: 16px; padding: 4px 2px; } .pix-toggle { font-family: inherit; font-weight: 700; cursor: pointer; background: linear-gradient(180deg, var(--turq-lt), var(--tiffany)); color: #04201d; border: none; border-radius: 10px; padding: 7px 18px; box-shadow: 0 4px 12px rgba(10,186,181,0.4); transition: transform 0.1s, box-shadow 0.15s, background 0.2s; } .pix-toggle:hover { transform: translateY(-1px); } .pix-toggle.off { background: linear-gradient(180deg, #567077, #3a5057); color: #cfe6e8; box-shadow: none; } .pix-range { width: 55%; accent-color: var(--tiffany); } .howto-body { display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.55; text-align: left; color: var(--text); } .howto-list { list-style: none; display: flex; flex-direction: column; gap: 7px; } .howto-list li { padding: 5px 10px; border-left: 3px solid var(--turq); background: rgba(47,224,207,0.06); border-radius: 6px; } .howto-list b { color: var(--turq-lt); } /* Стрелки нарисованы, а не набраны символом: знаков ↑ и ↓ в New People нет, браузер подставлял бы системный шрифт. */ .key-arrow { width: 0.74em; height: 0.74em; vertical-align: -0.04em; fill: currentColor; display: inline-block; } .key-arrow--down { transform: rotate(180deg); } .howto-mobile { color: var(--gold); } /* ---------------- HUD ---------------- */ .hud { position: absolute; top: 0; left: 0; right: 0; z-index: 15; padding: 12px 16px; pointer-events: none; display: flex; flex-direction: column; gap: 9px; } .hud.hidden, .touch-controls.hidden, .control-hint.hidden { display: none; } .hud-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .hud-stats { display: flex; gap: 8px; flex-wrap: wrap; } .hud-item { display: flex; flex-direction: column; line-height: 1.05; background: rgba(6, 24, 28, 0.55); border: 1px solid rgba(47,224,207,0.18); border-radius: 9px; padding: 5px 10px; min-width: 60px; } .hud-label { font-size: 9px; letter-spacing: 2px; color: var(--turq-lt); font-weight: 700; margin-bottom: 3px; } .hud-item span:last-child { font-size: clamp(15px, 3.6vw, 21px); font-weight: 800; } .hud-actions { display: flex; align-items: center; gap: 8px; pointer-events: auto; } .hud-icon-btn { width: 48px; height: 46px; padding: 0; display: grid; place-items: center; line-height: 1; } .sound-icon { width: 24px; height: 24px; display: block; } .sound-icon--off { display: none; } #btn-sound.is-muted { color: #c8d7d8; border-color: rgba(200, 215, 216, 0.35); background: linear-gradient(180deg, rgba(74, 92, 96, 0.96), rgba(43, 59, 63, 0.96)); } #btn-sound.is-muted .sound-icon--on { display: none; } #btn-sound.is-muted .sound-icon--off { display: block; } .hud-support { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .hud-support-label { font-size: 11px; letter-spacing: 0.5px; color: var(--gold); font-weight: 700; text-shadow: 0 1px 4px rgba(0,0,0,0.6); } .support-bar { display: flex; gap: 4px; } .support-cell { width: 16px; height: 16px; border-radius: 4px; background: rgba(6, 26, 30, 0.7); border: 1.5px solid rgba(47,224,207,0.35); transition: background 0.25s, transform 0.25s, box-shadow 0.25s; } .support-cell.filled { background: linear-gradient(180deg, #ffe58a, var(--gold)); border-color: #d8a41f; transform: scale(1.15); box-shadow: 0 0 10px rgba(255,211,77,0.75); } /* ---------------- Экранные кнопки (моб.): панель ПОД игровым полем ---------------- */ .touch-controls { flex: 0 0 auto; display: flex; gap: clamp(8px, 2.2vw, 18px); width: min(var(--frame-w), 1320px); height: var(--tc-h); z-index: 5; } .touch-controls.hidden { display: none; } /* На сенсорных устройствах панель всегда занимает место — окно игры не «прыгает» */ .is-touch .touch-controls.hidden { display: flex; visibility: hidden; } /* Исключение — главное меню: там под окном игры стоят выходные данные */ .is-touch.menu-open .touch-controls { display: none; } .touch-btn { --ch: 14px; /* глубина скоса краёв */ position: relative; flex: 1 1 0; min-width: 0; height: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 700; letter-spacing: 2px; font-size: clamp(11px, 3.2vw, 17px); color: #04231f; border: 0; padding: 0; cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none; background: rgba(225, 255, 251, 0.85); /* внешний контур */ clip-path: polygon(var(--ch) 0%, calc(100% - var(--ch)) 0%, 100% var(--ch), 100% calc(100% - var(--ch)), calc(100% - var(--ch)) 100%, var(--ch) 100%, 0% calc(100% - var(--ch)), 0% var(--ch)); filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.38)); transition: transform 80ms ease, filter 80ms ease; } /* Внутренняя заливка — даёт «рамку» при срезанных углах */ .touch-btn::before { content: ""; position: absolute; inset: 2px; clip-path: polygon(calc(var(--ch) - 2px) 0%, calc(100% - var(--ch) + 2px) 0%, 100% calc(var(--ch) - 2px), 100% calc(100% - var(--ch) + 2px), calc(100% - var(--ch) + 2px) 100%, calc(var(--ch) - 2px) 100%, 0% calc(100% - var(--ch) + 2px), 0% calc(var(--ch) - 2px)); background: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 45%), var(--tc-fill, rgba(46, 224, 207, 0.95)); } .touch-btn > * { position: relative; } .touch-btn__icon { display: grid; place-items: center; width: clamp(20px, 6vw, 26px); height: clamp(20px, 6vw, 26px); border-radius: 50%; color: #eafffc; background: rgba(3, 44, 43, 0.68); font-size: clamp(14px, 4vw, 18px); line-height: 1; } .touch-btn__icon .key-arrow { width: 58%; height: 58%; vertical-align: middle; } .touch-btn--slide { --tc-fill: rgba(28, 196, 182, 0.95); } .touch-btn--jump { --tc-fill: rgba(123, 242, 230, 0.97); } .touch-btn:active, .touch-btn.is-pressed { transform: translateY(2px) scale(0.985); filter: brightness(1.1) drop-shadow(0 3px 8px rgba(0, 0, 0, 0.35)); } /* ---------------- Всплывашка района (яркая) ---------------- */ .district-popup { position: absolute; top: 32%; left: 50%; transform: translate(-50%, -50%) scale(0.6); z-index: 18; pointer-events: none; opacity: 0; max-width: 82%; padding: 16px 26px; text-align: center; font-size: clamp(14px, 3.4vw, 20px); font-weight: 800; color: #04201d; background: linear-gradient(180deg, var(--turq-lt), var(--tiffany)); border: 3px solid #ffffff; border-radius: 14px; box-shadow: 0 10px 34px rgba(0,0,0,0.45), 0 0 40px rgba(10,186,181,0.7); text-shadow: 0 1px 0 rgba(255,255,255,0.35); } .district-popup.show { animation: popup 3.2s cubic-bezier(.2,.8,.2,1) forwards; } .district-popup b { color: #7a2f00; } @keyframes popup { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); } 8% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); } 15% { transform: translate(-50%, -50%) scale(1); } 87% { opacity: 1; transform: translate(-50%, -58%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -74%) scale(0.96); } } /* ---------------- Финальные экраны ---------------- */ /* Без min-height: пустой запас под коротким текстом давал лишнюю дыру, расстояние до статистики теперь такое же, как от заголовка. */ .gameover-caption { font-size: clamp(15px, 3.8vw, 21px); color: var(--gold); line-height: 1.4; font-weight: 600; } .result-stats { display: flex; justify-content: space-around; gap: 8px; margin: 0; } .result-stats > div { display: flex; flex-direction: column; align-items: center; } .result-stats .hud-label { color: var(--turq-lt); } .result-stats span:last-child { font-size: 22px; font-weight: 800; } .win-text { line-height: 1.6; font-size: clamp(14px, 3.4vw, 18px); color: var(--text); } .accent { font-weight: 800; color: var(--turq-lt); padding: 0 3px; border-radius: 4px; background: rgba(47,224,207,0.14); text-shadow: 0 0 14px rgba(47,224,207,0.6); } .accent--brand { color: #ffe58a; background: rgba(255,211,77,0.16); text-shadow: 0 0 14px rgba(255,211,77,0.6); } /* ---------------- Подсказка управления ---------------- */ .control-hint { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); z-index: 14; font-size: clamp(10px, 2.4vw, 13px); font-weight: 600; color: var(--text-dim); background: rgba(4, 16, 18, 0.6); padding: 6px 16px; border-radius: 999px; border: 1px solid rgba(47,224,207,0.2); text-align: center; white-space: nowrap; } .hint-mobile { display: none; } @media (hover: none), (pointer: coarse) { .hint-desktop { display: none; } .hint-mobile { display: inline; } /* Игровое поле сверху, панель управления — отдельной строкой под ним. */ :root { --frame-w: min(calc(100vw - 12px), calc((100vh - 12px - env(safe-area-inset-bottom, 0px) - var(--tc-space)) * 16 / 9)); } @supports (height: 100dvh) { :root { --frame-w: min(calc(100vw - 12px), calc((100dvh - 12px - env(safe-area-inset-bottom, 0px) - var(--tc-space)) * 16 / 9)); } } #stage { flex-direction: column; justify-content: center; align-items: center; padding: max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)); } #game-frame { border-radius: 10px; } /* Компактный HUD, чтобы меньше заслонять поле */ .hud { padding: 6px 8px; gap: 4px; } .hud-item { padding: 3px 7px; min-width: 44px; } .hud-label { font-size: 8px; letter-spacing: 1px; margin-bottom: 2px; } .hud-item span:last-child { font-size: 13px; } .hud-support-label { font-size: 9px; } .support-cell { width: 11px; height: 11px; border-width: 1.5px; } .hud-actions { gap: 5px; } .hud-icon-btn { width: 38px; height: 38px; padding: 0; font-size: 12px; } .sound-icon { width: 19px; height: 19px; } /* Уведомление о районе — заметно меньше, не перекрывает игру */ .district-popup { font-size: 10px; padding: 6px 10px; max-width: 62%; border-width: 2px; top: 24%; } .district-popup.show { animation-duration: 3.2s; } /* Главное меню: кнопки и текст масштабируются от размера игрового окна (cqh = 1% его высоты), чтобы как можно меньше закрывать баннер. */ #screen-menu { gap: 8px; gap: 3.4cqh; padding-bottom: 4px; padding-bottom: 2cqh; } .menu-bottom { height: 34%; padding: 0 clamp(8px, 3%, 24px); } #screen-menu .menu-buttons { width: min(46%, 240px); gap: 3px; gap: 1.4cqh; } #screen-menu .menu-buttons .pix-btn { min-height: 0; padding: 0 6px; letter-spacing: 0.5px; border-radius: 8px; font-size: clamp(10px, 2.8vw, 16px); font-size: clamp(10px, 5cqh, 16px); box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06); } /* Запасной вариант, если скрипт не вынес блок из рамки: мелко и полупрозрачно, чтобы баннер просвечивал сквозь текст. */ .menu-legal { max-height: 42%; line-height: 1.3; font-size: clamp(6px, 1.35vw, 9.5px); font-size: clamp(6px, 3cqh, 9.5px); padding: 3px clamp(8px, 3%, 20px) calc(5px + env(safe-area-inset-bottom)); color: rgba(234, 252, 250, 0.62); background: rgba(4, 16, 18, 0.42); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9); } } /* ---------- Выходные данные полосой ПОД игровым окном (сенсорные устройства). Блок выносится из рамки скриптом и показывается только в главном меню: баннер остаётся открытым, а текст становится крупнее и читаемее, потому что занимает всю ширину экрана, а не узкое игровое окно. ---------- */ .menu-legal--outside { position: static; /* в потоке страницы — строго под окном игры */ flex: 0 0 auto; width: min(100%, 1100px); max-height: 40vh; font-size: clamp(8px, 2.4vw, 12px); line-height: 1.32; /* Верхний отступ задаёт «воздух» между окном игры и текстом */ padding: 18px 10px 4px; color: rgba(234, 252, 250, 0.45); background: none; -webkit-backdrop-filter: none; backdrop-filter: none; text-shadow: none; } .menu-legal[hidden] { display: none; } /* Телефон в горизонтальной ориентации: панель управления ниже и компактнее */ @media (hover: none) and (orientation: landscape) and (max-height: 520px), (pointer: coarse) and (orientation: landscape) and (max-height: 520px) { :root { --tc-h: 46px; --tc-gap: 6px; } .touch-btn { --ch: 11px; font-size: clamp(10px, 1.9vw, 14px); letter-spacing: 1.5px; gap: 8px; } .touch-btn__icon { width: 19px; height: 19px; font-size: 13px; } .touch-controls { gap: clamp(6px, 1.4vw, 14px); } /* Низкий экран: панели плотнее, чтобы помещаться целиком */ .panel { padding: clamp(10px, 2vw, 16px) clamp(12px, 2.2vw, 18px); } .panel--compact { gap: 5px; } .panel--compact .panel-title { font-size: clamp(16px, 3.6vw, 22px); } .panel--compact .pix-btn--icon { height: 32px; } .panel--compact .pix-btn--icon .ico { width: 19px; height: 19px; } /* Экран низкий: текст мельче и плотнее, чтобы уместиться под игрой */ .menu-legal--outside { font-size: 8px; line-height: 1.28; padding: 9px 8px 2px; } } @media (max-width: 680px) { .control-hint { white-space: normal; width: 92%; font-size: 11px; } }