/* ============================================================ Клавотоп — стили (дизайн klavotop-play, палитра «бумага») ============================================================ */ :root { color-scheme: light; --paper: #f7f5ee; --ink: #293f40; --muted: #667470; --teal: #267970; --orange: #d85c3a; --yellow: #e9bd46; --blue: #4d7ab7; --line: #dedfd3; /* Вторичные токены — раньше были захардкожены по файлу. */ --copy: #5c6a66; /* текст абзацев */ --detail: #64706a; /* подписи, футер */ --faint: #849589; /* водяной знак и подпись в игре */ --border-soft: #d5d9ce; /* обводки кнопок-пилюль */ --hover: #eeeee4; /* ховер кнопок и пунктов меню */ --knob: #fffdf5; /* бегунок тогглов и тумблера */ --toggle-off: #d3d8ce; /* дорожка выключенного тоггла */ --menu-bg: #fffdf6; --note-bg: #efecdf; --kbd-bg: #fcfbf5; --kbd-border: #d2d5c8; --chip-teal-bg: #e4ebe0; /* кружок за иконкой звука, номера шагов */ --chip-blue-bg: #e5eaf0; /* кружок за иконкой микрофона */ --teal-hover: #206b64; --backdrop: #203d3a60; --progress-bg: #f7f5eef2; --progress-ring: #cfd8ca; --bubble-border: #8db6ad; --bubble-bg: #b6d1c740; --bits-noise: .2; font-family: 'Nunito', 'Trebuchet MS', Arial, sans-serif; font-size: 16px; color: var(--ink); background: var(--paper); font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } /* Тёмная тема. Атрибут ставит инлайн-скрипт в (системная настройка) и тумблер в шапке (ручной выбор, не сохраняется). */ :root[data-theme="dark"] { color-scheme: dark; --paper: #15191c; --ink: #ecebe4; --muted: #98a19a; --teal: #3f9a8f; --orange: #ef7a56; --yellow: #e9bd46; --blue: #7ea2dd; --line: #2a3136; --copy: #b9bfb8; --detail: #98a19a; --faint: #5b6663; --border-soft: #353c42; --hover: #22282d; --knob: #f3f1ea; --toggle-off: #3a4248; --menu-bg: #1c2226; --note-bg: #1e2427; --kbd-bg: #22282d; --kbd-border: #3a4248; --chip-teal-bg: #1f2b27; --chip-blue-bg: #1e2632; --teal-hover: #4aa89c; --backdrop: #00000088; --progress-bg: #15191cf2; --progress-ring: #3a4248; --bubble-border: #4f8a80; --bubble-bg: #3f9a8f33; --bits-noise: .12; } :root[data-theme="dark"] .theme-animals { --tile: #1f2b24; --accent: #ef7a56; } :root[data-theme="dark"] .theme-shapes { --tile: #2a2519; --accent: #d9a93a; } :root[data-theme="dark"] .theme-letters { --tile: #1e2632; --accent: #7ea2dd; } :root[data-theme="dark"] .theme-fireworks { --tile: #2c211e; --accent: #ef7a56; } :root[data-theme="dark"] .theme-btn.active { border-color: var(--teal); } :root[data-theme="dark"] .letter-art > span { color: var(--teal); } /* Фон у иллюстрации кота вырезан (прозрачный WebP): в светлой теме multiply даёт «печатный» вид на бумаге, в тёмной он бы затемнил кота — там normal. */ :root[data-theme="dark"] .companion img { mix-blend-mode: normal; } /* На планшетной ширине кот стоит за заголовком — в тёмной приглушаем сильнее, чтобы светлый текст читался поверх оранжевого. */ @media (max-width: 900px) { :root[data-theme="dark"] .companion { opacity: .35; } } :root[data-theme="dark"] .share-menu { box-shadow: 0 14px 34px -14px #000c, 0 2px 6px #0006; } * { box-sizing: border-box; } body { margin: 0; } button, input { font: inherit; } button, a, input { -webkit-tap-highlight-color: transparent; } button { color: inherit; cursor: pointer; } button { touch-action: manipulation; } button:focus-visible, a:focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; } button:disabled { cursor: wait; opacity: .7; } button, a { -webkit-user-select: none; user-select: none; } .screen { display: none; } #start-screen.active { display: block; } #start-screen { position: relative; min-height: 100svh; overflow: clip; } .page-shell { position: relative; z-index: 1; max-width: 1176px; min-height: 100svh; padding: 0 32px; margin: 0 auto; display: flex; flex-direction: column; } .site-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: clamp(60px, 10vh, 108px); } .wordmark { display: inline-flex; gap: 3px; align-items: center; text-decoration: none; color: var(--ink); font-size: 2rem; line-height: 1; font-weight: 900; letter-spacing: -.06em; } .brand-symbol { display: block; width: 44px; height: 44px; margin-right: 10px; border-radius: 11px; flex-shrink: 0; transform: rotate(-6deg); } .brand-dot { color: var(--teal); } .header-right { display: flex; align-items: center; gap: 14px; } /* Тумблер темы: дорожка с подсказками-иконками по краям и бегунком, несущим иконку текущей темы. */ .theme-switch { width: 70px; height: 38px; padding: 0; border: 1px solid var(--border-soft); border-radius: 24px; background: transparent; transition: background .18s; } .theme-switch:hover { background: var(--hover); } .theme-switch-track { position: relative; display: block; width: 100%; height: 100%; } .ts-hint { position: absolute; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--muted); opacity: .55; } .ts-hint-sun { left: 11px; } .ts-hint-moon { right: 11px; } .theme-switch-knob { position: absolute; top: 3px; left: 3px; width: 30px; height: 30px; border-radius: 50%; background: var(--knob); box-shadow: 0 1px 3px #0000002e, 0 0 0 1px #00000010; display: grid; place-items: center; transition: transform .22s cubic-bezier(.5, 0, .5, 1.3); } .theme-switch-knob .icon { width: 16px; height: 16px; } .ts-knob-sun { color: #d9a93a; } .theme-switch-knob .ts-knob-moon { color: var(--blue); display: none; } :root[data-theme="dark"] .theme-switch-knob { transform: translateX(32px); } :root[data-theme="dark"] .theme-switch-knob .ts-knob-sun { display: none; } :root[data-theme="dark"] .theme-switch-knob .ts-knob-moon { display: block; } .parents-button { display: flex; align-items: center; gap: 8px; background: transparent; border: 1px solid var(--border-soft); padding: 10px 15px; border-radius: 24px; font-weight: 700; font-size: .875rem; transition: background .18s; } .parents-button:hover { background: var(--hover); } .parents-button-footer { display: none; } .icon { display: inline-block; width: 20px; height: 20px; flex-shrink: 0; background-color: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; } .icon-cat { --icon: url('assets/icon-cat.svg'); } .icon-shapes { --icon: url('assets/icon-shapes.svg'); } .icon-party-popper { --icon: url('assets/icon-party-popper.svg'); } .icon-arrow-right { --icon: url('assets/icon-arrow-right.svg'); } .icon-volume-2 { --icon: url('assets/icon-volume-2.svg'); } .icon-mic { --icon: url('assets/icon-mic.svg'); } .icon-info { --icon: url('assets/icon-info.svg'); } .icon-x { --icon: url('assets/icon-x.svg'); } .icon-keyboard { --icon: url('assets/icon-keyboard.svg'); } .icon-hand { --icon: url('assets/icon-hand.svg'); } .icon-heart { --icon: url('assets/icon-heart.svg'); } .icon-check { --icon: url('assets/icon-check.svg'); } .icon-share { --icon: url('assets/icon-share.svg'); } .icon-send { --icon: url('assets/icon-send.svg'); } .icon-message-circle { --icon: url('assets/icon-message-circle.svg'); } .icon-link { --icon: url('assets/icon-link.svg'); } .icon-check-small { --icon: url('assets/icon-check-small.svg'); } .icon-sun { --icon: url('assets/icon-sun.svg'); } .icon-moon { --icon: url('assets/icon-moon.svg'); } .play-setup { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(32px, 5vw, 84px); flex: 1; padding: clamp(6px, 1.6vh, 23px) 0 clamp(10px, 2.4vh, 32px); } .welcome { padding: 0 0 0 12px; } .eyebrow { font-size: .75rem; letter-spacing: .11em; font-weight: 800; margin: 0 0 clamp(8px, 1.6vh, 18px); display: flex; align-items: center; gap: 9px; color: var(--teal); } .eyebrow > span { width: 7px; height: 7px; background: var(--yellow); border-radius: 50%; } h1 { font-weight: 900; font-size: min(clamp(2.4rem, 3.9vw, 3.4rem), 6vh); letter-spacing: -.055em; line-height: 1.08; margin: 0 0 clamp(8px, 1.8vh, 18px); } h1 > span { color: var(--orange); } .welcome-copy { font-size: 1.2rem; line-height: 1.6; margin: 0; font-weight: 500; color: var(--copy); } .companion { width: 100%; max-width: clamp(200px, 34vh, 450px); margin: clamp(0px, .8vh, 9px) 0 0 -12px; } .companion-card { display: block; border-radius: 28px; } .companion img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; } .companion figcaption { font-size: .875rem; font-weight: 700; color: var(--teal); text-align: center; transform: rotate(-3deg); margin-top: -7px; padding-left: 30px; } .setup-controls { width: 100%; padding: 10px 0 7px; } .section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: clamp(8px, 1.6vh, 20px); } h2 { font-size: 1.85rem; line-height: 1.2; letter-spacing: -.035em; margin: 0; font-weight: 900; } .small-note { font-size: .8125rem; color: var(--muted); white-space: nowrap; } .theme-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(8px, 1.2vh, 12px); } .theme-btn { position: relative; display: flex; align-items: center; gap: 12px; text-align: left; border: 2px solid transparent; border-radius: 17px 19px 16px 19px; padding: clamp(9px, 1.6vh, 19px) 14px; min-height: clamp(78px, 12vh, 115px); background: var(--tile); transition: transform .18s, border-color .18s, background .18s; } .theme-btn:hover { transform: translateY(-3px) rotate(-.6deg); border-color: color-mix(in srgb, var(--accent), transparent 70%); } .theme-btn.active { border-color: var(--teal); } .theme-animals { --tile: #e6eee5; --accent: #cf5c3a; } .theme-shapes { --tile: #f5ecd0; --accent: #9b6d15; } .theme-letters { --tile: #e5ebf3; --accent: #426da7; } .theme-fireworks { --tile: #f7e4db; --accent: #c4593c; } .theme-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .theme-name { font-weight: 900; font-size: 1.125rem; } .theme-sub { font-size: .8125rem; font-weight: 600; color: var(--detail); white-space: nowrap; } .theme-art { width: 53px; height: 56px; display: flex; align-items: center; justify-content: center; flex: 0 0 53px; color: var(--accent); transform: rotate(-8deg); } .theme-art .icon { width: 47px; height: 47px; } .theme-shapes .theme-art { transform: rotate(9deg); } .theme-fireworks .theme-art { transform: rotate(-11deg); } .letter-art { font-size: 2.55rem; line-height: 1; font-weight: 900; gap: 0; letter-spacing: -.1em; padding-right: 4px; } .letter-art > span { font-size: 1.9rem; margin-top: 15px; color: var(--teal); } .theme-radio { position: absolute; right: 9px; top: 9px; width: 17px; height: 17px; border: 1px solid color-mix(in srgb, var(--accent), transparent 65%); border-radius: 50%; } .theme-radio .icon { display: none; width: 12px; height: 12px; } /* Только сама выбранная карточка: у #start-screen тоже есть класс .active, поэтому голый `.active .theme-radio` зажигал галку на всех четырёх. */ .theme-btn.active .theme-radio { background: var(--teal); border-color: var(--teal); display: grid; place-items: center; color: white; } .theme-btn.active .theme-radio .icon { display: block; } .sound-settings { margin-top: clamp(8px, 2vh, 23px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .setting-row { display: flex; align-items: center; gap: 12px; padding: clamp(7px, 1.3vh, 14px) 2px; cursor: pointer; } .setting-row + .setting-row { border-top: 1px solid var(--line); } .setting-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; } .sound-icon { color: var(--teal); background: var(--chip-teal-bg); } .voice-icon { color: var(--blue); background: var(--chip-blue-bg); } .setting-icon .icon { width: 19px; height: 19px; } .setting-copy { display: flex; flex-direction: column; gap: 2px; flex: 1; } .setting-title { font-weight: 800; font-size: .9375rem; } .setting-detail { font-size: .8125rem; color: var(--detail); font-weight: 500; } .toggle { position: relative; display: inline-flex; flex-shrink: 0; } .toggle input { position: absolute; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; } .toggle-track { display: block; height: 26px; width: 46px; border-radius: 30px; background: var(--toggle-off); pointer-events: none; transition: background .2s; } .toggle-track::after { content: ''; display: block; width: 20px; height: 20px; border-radius: 50%; margin: 3px; background: var(--knob); transition: transform .2s; } .toggle input:checked + .toggle-track { background: var(--teal); } .toggle input:checked + .toggle-track::after { transform: translateX(20px); } .toggle input:focus-visible + .toggle-track { outline: 3px solid var(--blue); outline-offset: 4px; } .privacy-note { font-size: .75rem; color: var(--muted); line-height: 1.4; margin: clamp(5px, .9vh, 9px) 0 clamp(8px, 1.8vh, 21px); text-align: center; } .play-button { display: flex; align-items: center; justify-content: center; gap: 20px; background: var(--teal); color: #fffdf4; width: 100%; border: 0; min-height: clamp(60px, 8.5vh, 78px); border-radius: 18px 16px 20px 17px; font-size: 1.6rem; font-weight: 900; letter-spacing: -.02em; transition: background .2s, transform .2s; } .play-button:hover { background: var(--teal-hover); transform: translateY(-2px); } .play-button:active { transform: translateY(1px); } .play-arrow { display: grid; place-items: center; border: 1px solid #ffffff55; border-radius: 50%; width: 36px; height: 36px; transition: transform .2s; } .play-button:hover .play-arrow { transform: rotate(-20deg); } .play-arrow .icon { width: 21px; height: 21px; } .site-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: clamp(48px, 7.4vh, 81px); border-top: 1px solid var(--line); font-size: .8125rem; color: var(--detail); } .footer-love { display: flex; align-items: center; gap: 8px; } .footer-love .icon { color: var(--orange); width: 15px; height: 15px; } .exit-help { display: flex; align-items: center; gap: 11px; border: 0; padding: 9px 0; background: none; font-weight: 800; font-size: .875rem; } .exit-help > span { font-size: .8125rem; font-weight: 500; color: var(--detail); } .exit-help:hover { color: var(--teal); } /* ───────── Поделиться (футер) ───────── */ .share { position: relative; } .share-button { display: flex; align-items: center; gap: 8px; background: transparent; border: 1px solid var(--border-soft); padding: 10px 15px; border-radius: 24px; font-weight: 700; font-size: .875rem; color: var(--ink); transition: background .18s, border-color .18s; } .share-button:hover, .share-button[aria-expanded="true"] { background: var(--hover); } .share-button .icon { width: 17px; height: 17px; color: var(--teal); } .share-menu { position: absolute; right: 0; bottom: calc(100% + 10px); min-width: 232px; padding: 6px; display: grid; gap: 2px; background: var(--menu-bg); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 14px 34px -14px #203d3a55, 0 2px 6px #203d3a14; z-index: 5; } .share-menu[hidden] { display: none; } .share-item { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border: 0; border-radius: 10px; background: none; color: var(--ink); text-decoration: none; font-weight: 600; font-size: .875rem; text-align: left; transition: background .15s; } .share-item:hover { background: var(--hover); } .share-item .icon { width: 18px; height: 18px; color: var(--teal); } .share-item.is-copied .icon { color: var(--teal); } .share-vk { display: inline-grid; place-items: center; width: 18px; height: 18px; border: 1.5px solid var(--teal); border-radius: 5px; font-size: .55rem; font-weight: 900; color: var(--teal); letter-spacing: -.02em; } /* Вариант под кнопкой «Играть»: по центру, второй строкой при нехватке места. */ .exit-help-under { width: 100%; justify-content: center; flex-wrap: wrap; column-gap: 11px; row-gap: 2px; margin: clamp(6px, 1.2vh, 14px) 0 0; padding: clamp(1px, .6vh, 6px) 0; text-align: center; } kbd { font-family: inherit; font-size: .8125rem; font-weight: 700; display: inline-block; border: 1px solid var(--kbd-border); border-bottom-width: 2px; background: var(--kbd-bg); padding: 1px 6px; border-radius: 5px; color: var(--ink); } .paper-bits { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .paper-bits i { position: absolute; display: block; } .paper-bits i:nth-child(1) { width: 43px; height: 83px; border-radius: 100px 0 0 100px; background: var(--yellow); top: 20%; left: -19px; transform: rotate(24deg); } .paper-bits i:nth-child(2) { width: 20px; height: 46px; background: var(--blue); top: 14%; right: 4%; transform: rotate(28deg); opacity: .65; } .paper-bits i:nth-child(3) { width: 67px; height: 67px; border: 16px solid var(--teal); border-radius: 50%; bottom: 17%; right: -35px; opacity: .55; } .paper-bits i:nth-child(4) { width: 10px; height: 10px; background: var(--orange); border-radius: 50%; bottom: 13%; left: 3%; } .paper-bits i:nth-child(5) { width: 16px; height: 25px; background: var(--yellow); bottom: 7%; right: 12%; transform: rotate(-28deg); opacity: .55; } .paper-bits::after { content: ''; position: absolute; inset: 0; opacity: var(--bits-noise); background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.74' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.23' filter='url(%23n)'/%3E%3C/svg%3E"); } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } dialog { width: min(530px, calc(100% - 32px)); max-height: calc(100svh - 40px); padding: 38px; color: var(--ink); background: var(--paper); border: 1px solid var(--border-soft); border-radius: 22px; overscroll-behavior: contain; } dialog::backdrop { background: var(--backdrop); backdrop-filter: blur(4px); } dialog .eyebrow { margin-right: 25px; font-size: .6875rem; } dialog h2 { font-size: 2rem; } dialog h3 { font-size: 1rem; font-weight: 900; margin: 24px 0 12px; } dialog p { font-size: 1rem; line-height: 1.65; color: var(--copy); } .dialog-close { position: absolute; right: 17px; top: 17px; background: var(--hover); border: 0; border-radius: 50%; width: 34px; height: 34px; display: grid; place-items: center; } .exit-option { display: flex; gap: 13px; margin: 12px 0; } .exit-option p { margin: 0; } .option-number { flex: 0 0 28px; height: 28px; display: grid; place-items: center; background: var(--chip-teal-bg); color: var(--teal); border-radius: 50%; font-size: .875rem; font-weight: 900; } dialog .dialog-note { padding: 13px; background: var(--note-bg); border-radius: 9px; font-size: .8125rem; } .dialog-done { background: var(--teal); color: #fffdf4; border: 0; padding: 13px 20px; border-radius: 12px; font-weight: 800; width: 100%; margin-top: 7px; } /* The original keyboard, pointer, sound and parent-exit game mechanics. */ #game-screen.active { display: block; } #game-screen { position: fixed; inset: 0; background: var(--paper); cursor: none; touch-action: none; overflow: hidden; user-select: none; } #game-canvas { position: absolute; inset: 0; overflow: hidden; touch-action: none; z-index: 1; } #wave-layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } .game-watermark { position: absolute; top: 25px; left: 50%; transform: translateX(-50%); font-weight: 900; font-size: 1.375rem; color: var(--faint); letter-spacing: -.045em; } .game-watermark span { color: var(--orange); } .game-instruction { position: absolute; left: 0; right: 0; bottom: 20px; text-align: center; font-size: .875rem; color: var(--faint); pointer-events: none; margin: 0; } #exit-hotspot { position: absolute; top: 0; left: 0; width: 96px; height: 96px; z-index: 1000; background: transparent; touch-action: none; } .exit-progress { position: absolute; top: 10px; left: 10px; width: 60px; height: 60px; opacity: 0; pointer-events: none; transition: opacity .18s; } #exit-hotspot.holding .exit-progress, #esc-progress.holding { opacity: 1; } #esc-progress { position: fixed; top: 24px; left: 50%; width: 60px; height: 60px; margin-left: -30px; z-index: 1000; opacity: 0; pointer-events: none; transition: opacity .18s; } #esc-progress svg { width: 100%; height: 100%; } .exit-progress-bg { fill: var(--progress-bg); stroke: var(--progress-ring); stroke-width: 3; } .exit-progress-fg { fill: none; stroke: var(--teal); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 163.36; stroke-dashoffset: 163.36; transform: rotate(-90deg); transform-origin: 30px 30px; } .game-object { position: absolute; pointer-events: none; will-change: transform, opacity; font-weight: 900; animation: pop 1.2s cubic-bezier(.34,1.56,.64,1) forwards; line-height: 1; } @keyframes pop { 0% { transform: translate(-50%,-50%) scale(0) rotate(var(--rot-start,0deg)); opacity: 0; } 18% { transform: translate(-50%,-50%) scale(1.18) rotate(var(--rot-mid,8deg)); opacity: 1; } 35% { transform: translate(-50%,-50%) scale(1) rotate(var(--rot-mid,4deg)); opacity: 1; } 100% { transform: translate(-50%,-50%) scale(.85) rotate(var(--rot-end,-6deg)); opacity: 0; } } .game-object.emoji { font-size: clamp(80px,14vw,180px); } .game-object.letter { font-size: clamp(100px,16vw,220px); } .game-object.shape { width: clamp(80px,12vw,150px); height: clamp(80px,12vw,150px); } .game-object.shape svg { width: 100%; height: 100%; } #game-cursor { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 1001; transform: translate3d(-9999px,-9999px,0); opacity: 0; line-height: 1; font-weight: 900; will-change: transform, opacity; transition: opacity .2s; } #game-cursor.cursor-emoji { font-size: clamp(44px,6.5vw,68px); } #game-cursor.cursor-letter { font-size: clamp(56px,8vw,84px); color: var(--orange); } .bubble { position: absolute; pointer-events: none; border-radius: 50%; border: 2px solid var(--bubble-border); background: var(--bubble-bg); will-change: transform, opacity; animation: bubble-rise 1.6s cubic-bezier(.16,1,.3,1) forwards; } @keyframes bubble-rise { 0% { transform: translate(-50%,-50%) scale(.3); opacity: 0; } 18% { transform: translate(-50%,-50%) scale(1); opacity: .7; } 100% { transform: translate(-50%,-50%) translate(var(--dx,0),var(--dy,-80px)) scale(1.2); opacity: 0; } } .firework-particle { position: absolute; border-radius: 3px; pointer-events: none; will-change: transform, opacity; animation: firework-fly 1.3s cubic-bezier(.16,1,.3,1) forwards; } @keyframes firework-fly { 0% { transform: translate(-50%,-50%) scale(1); opacity: 1; } 60% { opacity: 1; } 100% { transform: translate(-50%,-50%) translate(var(--dx,0),var(--dy,0)) rotate(150deg) scale(.2); opacity: 0; } } /* Вертикальная «резина»: размеры выше заданы через clamp(min, N·vh, max) — на высоких экранах упираются в max (исходный макет), на низких плавно поджимаются до min. Ниже ~660px высоты контент уже не влезает и страница честно скроллится. Мобильные брейкпоинты (≤900px) резина не трогает. */ @media (max-width: 1080px) { .page-shell { padding: 0 36px; } .play-setup { gap: 35px; } .theme-btn { gap: 8px; padding-left: 10px; padding-right: 10px; } .theme-art { width: 42px; flex-basis: 42px; } .theme-art .icon { width: 38px; height: 38px; } .theme-sub { font-size: .75rem; } .theme-name { font-size: 1.0625rem; } .small-note { display: none; } } @media (max-width: 900px) { .page-shell { max-width: 680px; padding: 0 28px; } .site-header { min-height: 88px; } .play-setup { grid-template-columns: 1fr; gap: 28px; padding-top: 24px; } .welcome { position: relative; padding: 0; } .welcome .eyebrow { font-size: .6875rem; margin-bottom: 13px; } h1 { font-size: 2.7rem; position: relative; z-index: 1; } .welcome-copy { font-size: 1.1rem; max-width: 360px; } .companion { position: absolute; top: 9px; width: 245px; right: -31px; margin: 0; z-index: 0; } .companion figcaption { display: none; } .theme-btn { min-height: 97px; padding: 15px 19px; gap: 17px; } .theme-art { width: 48px; flex-basis: 48px; } .theme-art .icon { width: 44px; height: 44px; } .theme-name { font-size: 1.125rem; } .theme-sub { font-size: .8125rem; } .small-note { display: inline; } .site-footer { padding: 18px 0; min-height: 88px; } } @media (max-width: 600px) { .page-shell { padding: 0 22px; } .site-header { min-height: 76px; } .wordmark { font-size: 1.625rem; } .brand-symbol { width: 36px; height: 36px; margin-right: 6px; border-radius: 9px; } .parents-button { padding: 8px 12px; font-size: .8125rem; gap: 6px; } .parents-button .icon { width: 17px; height: 17px; } .play-setup { padding: 15px 0 21px; gap: 15px; } h1 { font-size: 2.3rem; max-width: 340px; margin-bottom: 13px; } .welcome-copy { font-size: 1.05rem; max-width: 300px; line-height: 1.5; position: relative; z-index: 1; } .companion { right: -75px; width: 190px; top: 30px; opacity: .24; } .section-heading { margin-bottom: 13px; } h2 { font-size: 1.45rem; } .small-note { font-size: .75rem; } .theme-grid { gap: 10px; } .theme-btn { min-height: 88px; padding: 14px 9px; gap: 8px; border-radius: 13px; } .theme-art { width: 38px; flex-basis: 38px; } .theme-art .icon { width: 34px; height: 34px; } .letter-art { font-size: 2rem; } .letter-art > span { font-size: 1.5rem; } .theme-name { font-size: 1rem; } .theme-sub { font-size: .75rem; } .theme-radio { width: 13px; height: 13px; top: 6px; right: 6px; } .theme-radio .icon { width: 10px; height: 10px; } .sound-settings { margin-top: 17px; } .setting-row { padding: 11px 0; gap: 9px; } .setting-title { font-size: .875rem; } .setting-detail { font-size: .75rem; } .setting-icon { width: 29px; height: 29px; } .toggle-track { height: 25px; width: 43px; } .toggle-track::after { width: 19px; height: 19px; } .toggle input:checked + .toggle-track::after { transform: translateX(18px); } .privacy-note { font-size: .75rem; margin-top: 8px; margin-bottom: 14px; } .play-button { min-height: 68px; font-size: 1.4rem; } .site-footer { flex-direction: column; align-items: center; justify-content: center; row-gap: 10px; min-height: 59px; padding: 16px 0 18px; } /* «Родителям» переезжает из шапки под «Поделиться» */ .parents-button-header { display: none; } .parents-button-footer { display: flex; } .share-menu { right: 50%; transform: translateX(50%); } .exit-help-under { font-size: .8125rem; } .exit-help-under > span { font-size: .75rem; } .paper-bits i:nth-child(2) { right: -10px; top: 25%; } .paper-bits i:nth-child(5) { display: none; } dialog { padding: 33px 24px 24px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } .theme-btn:hover, .play-button:hover, .play-button:active { transform: none; } .game-object { animation: gentle-fade 1.2s ease-out forwards; } .bubble, .firework-particle { animation: gentle-fade 1.3s ease-out forwards; } @keyframes gentle-fade { 0%, 65% { transform: translate(-50%,-50%); opacity: 1; } 100% { transform: translate(-50%,-50%); opacity: 0; } } }