/* DispyDubbing: ночная студия озвучки */ :root { --bg: #241a52; --bg2: #2f2468; --surface: #33287a; --surface2: #3f3290; --line: #120b30; --line2: #120b30; --outline: #120b30; --field: #1c1446; --fieldText: #fff; --text: #fff7fb; --muted: #c4b8f2; --onbg: #fff; --pink: #ff5ca8; --violet: #8f6bff; --cyan: #4fd8ff; --lime: #b8f25c; --yellow: #ffd23f; --ok: #3ddc97; --danger: #ff5d6c; --tut: #6a45e8; --doodle: .07; --grad: linear-gradient(180deg, #ff7ab8, #ff4f9a); --radius: 24px; --display: "Nunito", "Segoe UI", system-ui, sans-serif; --body: "Nunito", "Segoe UI", system-ui, sans-serif; /* псевдонимы для цветов, которые подставляет код */ --accent: var(--pink); --accent2: var(--cyan); --ink: var(--text); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; color: var(--text); background: var(--bg); font: 16px/1.5 var(--body); -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { color: var(--cyan); text-decoration: none; } a:hover { text-decoration: underline; } .hidden { display: none !important; } ::selection { background: var(--pink); color: #fff; } /* фон: свечения и зерно */ .glow { position: fixed; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(90px); opacity: .35; pointer-events: none; z-index: -2; } .g1 { background: radial-gradient(circle, #7c5cff 0, transparent 60%); top: -25vmax; left: -15vmax; animation: drift 18s ease-in-out infinite alternate; } .g2 { background: radial-gradient(circle, #ff3d8b 0, transparent 60%); bottom: -30vmax; right: -20vmax; animation: drift 22s ease-in-out infinite alternate-reverse; } @keyframes drift { to { transform: translate(6vmax, 4vmax) scale(1.1); } } .grain { position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .06; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* шапка */ .top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 24px; padding: 14px clamp(16px, 4vw, 40px); background: rgba(11, 8, 22, .7); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .logo { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none !important; } .logoMark { width: 38px; height: 38px; filter: drop-shadow(0 4px 14px rgba(255, 61, 139, .45)); } .logoText { font: 900 20px/1 var(--display); letter-spacing: -.5px; } .logoText b { background-image: linear-gradient(120deg, #ff7ab0, #b49cff); -webkit-background-clip: text; background-clip: text; color: transparent; } .logoText.small { font-size: 16px; } .eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 16px; margin-left: 2px; } .eq i { width: 3px; background: var(--cyan); border-radius: 2px; animation: eq 1s ease-in-out infinite; } .eq i:nth-child(2) { animation-delay: -.3s; background: var(--pink); } .eq i:nth-child(3) { animation-delay: -.6s; } .eq i:nth-child(4) { animation-delay: -.15s; background: var(--violet); } @keyframes eq { 0%, 100% { height: 4px; } 50% { height: 16px; } } .nav { display: flex; gap: 22px; margin-left: auto; } .nav a { color: var(--muted); font-weight: 600; font-size: 15px; } .nav a:hover { color: var(--text); text-decoration: none; } .badge { padding: 8px 16px; border-radius: 999px; background: var(--grad); font: 700 14px var(--display); letter-spacing: 2px; box-shadow: 0 6px 24px rgba(255, 61, 139, .35); } @media (max-width: 760px) { .nav { display: none; } .badge { margin-left: auto; } } main { max-width: 1180px; margin: 0 auto; padding: 28px clamp(14px, 3vw, 28px) 40px; } /* типографика */ h1, h2, h3 { font-family: var(--display); letter-spacing: -.5px; line-height: 1.15; } h1 { margin: 14px 0 16px; font-size: clamp(34px, 5.4vw, 64px); font-weight: 900; } h2 { margin: 0 0 14px; font-size: 22px; font-weight: 700; } h3 { margin: 22px 0 10px; font-size: 16px; font-weight: 700; } .grad { background-image: linear-gradient(120deg, #ff6aa8, #b49cff 55%, #6ff0ff); -webkit-background-clip: text; background-clip: text; color: transparent; } .muted { color: var(--muted); } .small { font-size: 13px; } .mono { font: 700 15px Consolas, ui-monospace, monospace; } .kicker { display: inline-block; padding: 6px 14px; border-radius: 999px; border: 1px solid var(--line2); background: var(--surface2); font-weight: 600; font-size: 14px; } .lead { font-size: 18px; color: #cfc6ee; max-width: 520px; margin: 0 0 26px; } /* карточки */ .card { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(18px, 2.4vw, 28px); backdrop-filter: blur(16px); box-shadow: 0 24px 60px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .05); } /* формы */ label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 14px; color: #ddd5f7; } .field { flex: 1; } input, select, textarea { font: 500 15px var(--body); padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line2); background: rgba(8, 6, 18, .55); color: var(--text); min-width: 0; outline: none; transition: border-color .15s, box-shadow .15s; } input::placeholder { color: #6f6890; } input:focus, select:focus, textarea:focus { border-color: var(--violet); box-shadow: 0 0 0 4px rgba(124, 92, 255, .22); } select { cursor: pointer; } input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--pink); padding: 0; } input[type=color] { padding: 3px; height: 44px; width: 50px; cursor: pointer; } input[type=range] { -webkit-appearance: none; appearance: none; height: 8px; padding: 0; border: 0; border-radius: 999px; background: linear-gradient(90deg, var(--pink), var(--violet)); } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 5px rgba(255, 61, 139, .35); cursor: pointer; } .code { text-transform: uppercase; letter-spacing: 10px; font: 900 22px var(--display); text-align: center; flex: 1; } .row { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; } .between { justify-content: space-between; align-items: center; } label.inline { flex-direction: row; align-items: center; gap: 8px; } label.inline select { padding: 8px 12px; } .check { flex-direction: row; align-items: center; gap: 10px; font-weight: 500; cursor: pointer; padding: 10px 0; } .formGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; } .formGrid.three { grid-template-columns: 1fr 1fr 1.4fr; } @media (max-width: 680px) { .formGrid, .formGrid.three { grid-template-columns: 1fr; } } .drop { flex-direction: row; align-items: center; gap: 12px; padding: 16px; border: 1.5px dashed var(--line2); border-radius: 16px; background: rgba(124, 92, 255, .06); cursor: pointer; position: relative; font-weight: 500; transition: border-color .15s, background .15s; } .drop:hover { border-color: var(--pink); background: rgba(255, 61, 139, .07); } .drop.small { padding: 12px 16px; } .drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; } .dropIcon { font-size: 24px; } /* кнопки */ .btn { font: 700 15px var(--body); cursor: pointer; border: 0; border-radius: 14px; padding: 12px 20px; color: #fff; background: var(--grad); box-shadow: 0 8px 22px rgba(255, 61, 139, .28); transition: transform .12s, box-shadow .12s, filter .12s; display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none !important; white-space: nowrap; } .btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(255, 61, 139, .4); filter: brightness(1.08); } .btn:active { transform: translateY(1px); } .btn.alt { background: var(--surface2); border: 1px solid var(--line2); box-shadow: none; color: var(--text); } .btn.alt:hover { border-color: var(--violet); box-shadow: 0 8px 22px rgba(124, 92, 255, .2); } .btn.big { font-size: 18px; padding: 16px 26px; border-radius: 18px; } .btn.small { padding: 8px 14px; font-size: 14px; border-radius: 12px; } .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; filter: grayscale(.4); } .glowBtn { position: relative; overflow: hidden; } .glowBtn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%); transform: translateX(-120%); animation: shine 3.2s ease-in-out infinite; } @keyframes shine { 60%, 100% { transform: translateX(120%); } } .actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; align-items: center; } .actions.sticky { position: sticky; bottom: 14px; z-index: 5; justify-content: center; } /* главная */ .hero { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; min-height: calc(100vh - 160px); padding: 10px 0 30px; } @media (max-width: 920px) { .hero { grid-template-columns: 1fr; min-height: 0; } .heroArt { order: -1; } } .joinCard { display: flex; flex-direction: column; gap: 14px; max-width: 460px; padding: 22px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); backdrop-filter: blur(16px); box-shadow: 0 30px 70px rgba(0, 0, 0, .4); } .or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; } .or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--line2); } /* картинка в шапке главной: макет экрана записи, всё на CSS */ .heroArt { position: relative; padding: 30px 10px; } .mockScreen { border-radius: 26px; background: #120d24; border: 1px solid var(--line2); box-shadow: 0 40px 90px rgba(0, 0, 0, .55), 0 0 0 8px rgba(124, 92, 255, .08); overflow: hidden; transform: rotate(-2deg); animation: float 7s ease-in-out infinite; } @keyframes float { 50% { transform: rotate(-1deg) translateY(-10px); } } .mockTop { display: flex; gap: 6px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line); } .mockTop span { width: 10px; height: 10px; border-radius: 50%; background: #3a2f63; } .mockTop span:first-child { background: var(--pink); } .mockTop em { margin-left: auto; font: 600 12px var(--body); color: var(--muted); font-style: normal; } .mockFrame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: linear-gradient(180deg, #2b1a5a 0, #6b2f8f 55%, #ff6f91 100%); } .mockSun { position: absolute; width: 26%; aspect-ratio: 1; border-radius: 50%; left: 60%; top: 30%; background: radial-gradient(circle, #ffe8a3, #ff9f6e 60%, transparent 62%); filter: blur(.5px); } .mockHill { position: absolute; bottom: -30%; border-radius: 50%; } .mockHill.h1 { width: 90%; height: 70%; left: -20%; background: #2a1450; } .mockHill.h2 { width: 80%; height: 60%; right: -25%; background: #1b0d36; } .mockRec { position: absolute; top: 12px; left: 12px; display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, .45); font: 800 11px var(--display); letter-spacing: 1px; } .mockRec i { width: 8px; height: 8px; border-radius: 50%; background: var(--danger); animation: blink 1s steps(2) infinite; } @keyframes blink { 50% { opacity: .2; } } .mockSub { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); white-space: nowrap; padding: 8px 14px; border-radius: 12px; background: rgba(0, 0, 0, .6); font-weight: 700; font-size: clamp(12px, 1.5vw, 16px); } .mockSub b { color: var(--yellow); } .mockSub .kw { opacity: .55; } .mockSub .kw.on { opacity: 1; color: var(--pink); } .mockWave { display: flex; align-items: center; gap: 4px; height: 70px; padding: 0 18px; } .mockWave i { flex: 1; height: var(--h); border-radius: 3px; background: linear-gradient(180deg, var(--cyan), var(--violet)); animation: wave 1.4s ease-in-out infinite; } .mockWave i:nth-child(odd) { animation-delay: -.7s; } .mockWave i:nth-child(3n) { animation-delay: -.35s; background: linear-gradient(180deg, var(--pink), var(--violet)); } @keyframes wave { 50% { transform: scaleY(.45); } } .sticker { position: absolute; padding: 10px 14px; border-radius: 14px; background: rgba(20, 14, 40, .9); border: 1px solid var(--line2); font-weight: 600; font-size: 14px; box-shadow: 0 14px 30px rgba(0, 0, 0, .4); display: flex; align-items: center; gap: 8px; animation: float 6s ease-in-out infinite; } .sticker .dot { width: 10px; height: 10px; border-radius: 50%; } .s1 { top: 0; left: -10px; } .s2 { bottom: 10px; right: -6px; animation-delay: -2s; border-color: rgba(255, 210, 74, .4); } .s3 { bottom: 70px; left: -20px; animation-delay: -4s; } @media (max-width: 920px) { .sticker { display: none; } } .block { padding: 50px 0 10px; } .blockTitle { font-size: clamp(24px, 3vw, 34px); margin-bottom: 22px; } .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } @media (max-width: 920px) { .steps { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .steps { grid-template-columns: 1fr; } } .step { padding: 22px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); } .step h3 { margin: 14px 0 8px; } .step p { margin: 0; color: var(--muted); } .stepNum { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--grad); font: 900 18px var(--display); } .modeShow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } @media (max-width: 920px) { .modeShow { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .modeShow { grid-template-columns: 1fr; } } .modeTile { padding: 22px; border-radius: var(--radius); background: linear-gradient(160deg, rgba(124, 92, 255, .18), rgba(255, 61, 139, .08)); border: 1px solid var(--line2); transition: transform .2s; } .modeTile:hover { transform: translateY(-4px); } .modeTile h3 { margin: 12px 0 6px; } .modeTile p { margin: 0; color: var(--muted); font-size: 15px; } .modeIcon { font-size: 34px; } /* лобби */ .lobby { display: grid; grid-template-columns: 300px 1fr; gap: 20px; align-items: start; } @media (max-width: 900px) { .lobby { grid-template-columns: 1fr; } } .side { position: sticky; top: 90px; } @media (max-width: 900px) { .side { position: static; } } .roomCode { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px; margin-bottom: 20px; border-radius: 18px; background: linear-gradient(135deg, rgba(255, 61, 139, .16), rgba(124, 92, 255, .16)); border: 1px solid var(--line2); } .bigCode { font: 900 38px/1 var(--display); letter-spacing: 8px; } .sectionHead { margin-top: 30px; } .players { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 8px; } .players li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--surface2); border: 1px solid var(--line); font-weight: 600; animation: pop .3s ease; } @keyframes pop { from { transform: scale(.94); opacity: 0; } } .ava { width: 34px; height: 34px; border-radius: 12px; display: grid; place-items: center; color: #140c26; font: 900 15px var(--display); flex-shrink: 0; } .crown { margin-left: auto; } /* режимы в лобби */ .modes { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; } .mode { border: 1px solid var(--line2); border-radius: 18px; padding: 14px 16px; background: var(--surface2); cursor: pointer; display: flex; flex-direction: column; gap: 4px; transition: border-color .15s, transform .15s, background .15s; } .mode:hover { transform: translateY(-2px); border-color: var(--violet); } .mode b { font: 700 15px var(--display); } .mode .small { color: var(--muted); } .mode.active { background: linear-gradient(135deg, rgba(255, 61, 139, .28), rgba(124, 92, 255, .28)); border-color: var(--pink); box-shadow: 0 10px 30px rgba(255, 61, 139, .2); } .mode.locked { cursor: default; } .mode.locked:hover { transform: none; } /* сцены и серии */ .scenes { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; } .scene { border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; background: var(--surface2); border: 1px solid var(--line); transition: transform .18s, border-color .18s, box-shadow .18s; } .scene:hover { transform: translateY(-3px); border-color: var(--line2); box-shadow: 0 16px 34px rgba(0, 0, 0, .35); } .scene img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: linear-gradient(135deg, #2b1a5a, #4a1f5f); display: block; } .scene .body { padding: 12px 14px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .scene .body > b { font-weight: 700; font-size: 15px; line-height: 1.3; } .scene .acts { display: flex; gap: 6px; margin-top: auto; padding-top: 8px; flex-wrap: wrap; } .voices { font-weight: 700; color: var(--cyan); } .packTitle { grid-column: 1 / -1; margin: 10px 0 0; font: 700 13px var(--display); color: var(--muted); text-transform: uppercase; letter-spacing: 2px; } .bar { height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .08); overflow: hidden; margin-top: 6px; } .bar i { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--cyan), var(--violet)); transition: width .5s; box-shadow: 0 0 12px rgba(61, 224, 255, .6); } .upload { margin-top: 18px; border: 1px solid var(--line); border-radius: 18px; background: rgba(8, 6, 18, .35); } .upload summary { cursor: pointer; padding: 16px 18px; font: 700 15px var(--display); list-style: none; display: flex; align-items: center; gap: 10px; } .upload summary::-webkit-details-marker { display: none; } .upload summary span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--grad); font-size: 16px; transition: transform .2s; } .upload[open] summary span { transform: rotate(45deg); } .upload form { display: flex; flex-direction: column; gap: 14px; padding: 0 18px 18px; } /* экран серии */ .cands { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; } .cand { border-radius: 18px; padding: 14px 16px; background: var(--surface2); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 6px; transition: border-color .15s, background .15s; } .cand.sel { border-color: var(--yellow); background: linear-gradient(135deg, rgba(255, 210, 74, .16), rgba(255, 61, 139, .1)); box-shadow: 0 0 0 3px rgba(255, 210, 74, .15); } .cand .time { font: 900 24px var(--display); } .cand .stars { color: var(--yellow); letter-spacing: 3px; } .cand .acts { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; } .range { display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 18px; background: var(--surface2); border: 1px solid var(--line); } /* сцена: видео, субтитры, подсказки */ .stage { display: flex; flex-direction: column; gap: 14px; } .stageHead { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .stageHead h2 { margin: 0; } .pill { display: inline-flex; padding: 6px 14px; border-radius: 999px; background: var(--surface2); border: 1px solid var(--line2); font-weight: 600; font-size: 14px; color: #ddd5f7; } .pill:empty { display: none; } .videoWrap { position: relative; background: #000; border-radius: 20px; overflow: hidden; border: 1px solid var(--line2); display: flex; justify-content: center; box-shadow: 0 24px 60px rgba(0, 0, 0, .5); } .videoWrap video { width: 100%; max-height: 64vh; display: block; } .subs { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; pointer-events: none; padding: 0 12px; } .subs span { display: inline-block; max-width: 92%; padding: 8px 16px; border-radius: 12px; background: rgba(0, 0, 0, .7); color: #fff; font-size: clamp(15px, 2vw, 21px); font-weight: 700; backdrop-filter: blur(4px); } .countdown { position: absolute; inset: 0; display: grid; place-items: center; font: 900 clamp(90px, 16vw, 170px) var(--display); color: #fff; background: rgba(11, 8, 22, .55); backdrop-filter: blur(6px); text-shadow: 0 0 40px var(--pink), 0 0 80px var(--violet); animation: pulse 1s ease-in-out infinite; } @keyframes pulse { 50% { transform: scale(1.06); } } .prompter { padding: 16px 20px; min-height: 104px; border-radius: 20px; background: var(--surface2); border: 1px solid var(--line2); transition: border-color .15s, box-shadow .15s; } .prompter .now { font-size: clamp(19px, 2.4vw, 26px); font-weight: 800; line-height: 1.35; } .prompter .next { color: var(--muted); margin-top: 8px; } .prompter .next b { color: var(--pink); } .prompter .bar { height: 8px; margin-top: 10px; } .prompter .bar i { background: linear-gradient(90deg, var(--yellow), var(--pink)); width: 0; } .prompter.mine { border-color: var(--pink); box-shadow: 0 0 0 4px rgba(255, 61, 139, .18), 0 0 40px rgba(255, 61, 139, .25); } .w { transition: color .05s; } .w.on { color: var(--pink); text-shadow: 0 0 18px rgba(255, 61, 139, .7); } .w.done { opacity: .5; } /* роли и части */ .chars { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; margin: 10px 0 16px; } .char { border: 1.5px solid var(--line2); border-radius: 18px; padding: 16px; background: var(--surface2); cursor: pointer; display: flex; flex-direction: column; gap: 6px; transition: transform .15s, box-shadow .15s; } .char:hover { transform: translateY(-2px); } .char.taken { opacity: .55; } .char.mine { box-shadow: 0 0 0 3px var(--pink), 0 14px 30px rgba(255, 61, 139, .25); } .char .name { font: 700 18px var(--display); } .parts { display: flex; flex-direction: column; gap: 10px; margin: 10px 0 16px; } .part { display: grid; grid-template-columns: 46px 1fr; gap: 14px; align-items: center; border-radius: 18px; padding: 12px 16px; background: var(--surface2); border: 1px solid var(--line); } .part.mine { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(255, 61, 139, .18); } .part .num { width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; font: 900 20px var(--display); color: #140c26; } .part .lines { color: var(--muted); font-size: 14px; margin-top: 4px; } .tips { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 14px; } .calib { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 14px 0; padding: 14px 16px; border: 1px dashed var(--line2); border-radius: 18px; background: rgba(8, 6, 18, .35); } .calibInfo { display: flex; flex-direction: column; gap: 2px; margin-right: auto; } .calibStage { display: flex; align-items: center; gap: 14px; width: 100%; } .calibDot { width: 54px; height: 54px; border-radius: 50%; background: #2a2148; border: 2px solid var(--line2); transition: background .05s, box-shadow .05s; } .calibDot.on { background: var(--pink); box-shadow: 0 0 40px var(--pink); } /* испорченный дубляж и голосование */ .writeLines { display: flex; flex-direction: column; gap: 10px; } .writeLine { display: grid; grid-template-columns: 160px 1fr; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 16px; background: var(--surface2); border: 1px solid var(--line); } .writeLine .who { font-weight: 800; } .writeLine .orig { color: var(--muted); font-size: 12px; } @media (max-width: 680px) { .writeLine { grid-template-columns: 1fr; } } .voteList { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin: 14px 0; } .voteItem { border-radius: 18px; padding: 12px; background: var(--surface2); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; } .voteItem video { width: 100%; max-height: 46vh; background: #000; border-radius: 12px; } .voteItem.chosen { border-color: var(--ok); box-shadow: 0 0 0 3px rgba(52, 211, 153, .25); } /* премьера */ .credits { display: flex; flex-direction: column; gap: 8px; } .credits h3 { margin: 10px 0 2px; } .scoreRow { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: 14px; background: var(--surface2); border: 1px solid var(--line); font-weight: 600; } .loader { display: flex; gap: 6px; align-items: flex-end; height: 40px; } .loader i { width: 8px; border-radius: 4px; background: var(--grad); animation: eq 1s ease-in-out infinite; } .loader i:nth-child(2) { animation-delay: -.2s; } .loader i:nth-child(3) { animation-delay: -.4s; } .loader i:nth-child(4) { animation-delay: -.6s; } .loader i:nth-child(5) { animation-delay: -.8s; } /* редактор */ .edChars { display: flex; flex-direction: column; gap: 8px; } .edChars .row { flex-wrap: nowrap; align-items: center; } .edVideo { width: 100%; max-height: 42vh; background: #000; border-radius: 16px; border: 1px solid var(--line2); } .edLines { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; max-height: 46vh; overflow: auto; padding-right: 4px; } .edLine { display: grid; grid-template-columns: 80px 80px 160px 1fr 40px; gap: 6px; align-items: center; } .edLine input, .edLine select { padding: 8px 10px; font-size: 14px; } @media (max-width: 760px) { .edLine { grid-template-columns: 1fr 1fr; } } /* подвал */ .foot { border-top: 1px solid var(--line); margin-top: 40px; padding: 28px clamp(16px, 4vw, 40px) 22px; background: rgba(8, 6, 18, .5); } .footInner { max-width: 1180px; margin: 0 auto; display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .footBrand p { margin: 8px 0 0; max-width: 360px; } .footLinks { display: flex; gap: 10px 22px; flex-wrap: wrap; align-items: flex-start; } .footLinks a { color: var(--muted); font-weight: 600; font-size: 14px; } .footLinks a:hover { color: var(--text); } .copy { max-width: 1180px; margin: 18px auto 0; } /* юридические страницы */ .legal { max-width: 820px; margin: 0 auto; } .legal h1 { font-size: clamp(28px, 4vw, 40px); } .legal h2 { font-size: 19px; margin: 30px 0 10px; } .legal p, .legal li { color: #d4cbef; } .legal ul { padding-left: 20px; } .legal .note { padding: 14px 16px; border-radius: 14px; background: rgba(255, 210, 74, .08); border: 1px solid rgba(255, 210, 74, .25); color: #f3e2a8; font-size: 14px; } /* уведомления */ .toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50; padding: 14px 20px; border-radius: 16px; background: rgba(20, 14, 40, .95); border: 1px solid var(--line2); box-shadow: 0 20px 50px rgba(0, 0, 0, .5); font-weight: 600; max-width: min(92vw, 520px); text-align: center; animation: toastIn .25s ease; } @keyframes toastIn { from { transform: translate(-50%, 16px); opacity: 0; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* кнопки в карточках сцен: в одну строку, корзина справа */ .scene .acts { flex-wrap: nowrap; gap: 6px; } .scene .acts .btn.small { padding: 7px 11px; font-size: 13px; } .scene .acts [data-del], .scene .acts [data-epdel] { margin-left: auto; padding: 7px 9px; } /* ---------- переключатель темы ---------- */ .themeBtn { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 14px; border: 1px solid var(--line2); background: var(--surface2); color: var(--text); cursor: pointer; font-size: 19px; transition: transform .15s, border-color .15s; flex-shrink: 0; } .themeBtn:hover { transform: rotate(-12deg); border-color: var(--violet); } .themeBtn .sun { display: none; } .themeBtn .moon { display: inline; } [data-theme="light"] .themeBtn .sun { display: inline; } [data-theme="light"] .themeBtn .moon { display: none; } .top .themeBtn { margin-left: 4px; } @media (max-width: 760px) { .top .themeBtn { margin-left: auto; } .top .badge + .themeBtn, .top .badge:not(.hidden) ~ .themeBtn { margin-left: 8px; } } /* ---------- светлая тема ---------- */ [data-theme="light"] { --bg: #7c4dff; --bg2: #fff; --surface: #fff; --surface2: #f4efff; --line: #2b1b62; --line2: #2b1b62; --outline: #2b1b62; --field: #fff; --fieldText: #2b1b62; --text: #2b1b62; --muted: #6e62a3; --pink: #f0388f; --violet: #6a48f5; --cyan: #0a8fb8; --yellow: #ffc81f; --ok: #12a46f; --tut: #5229d6; --doodle: .14; --grad: linear-gradient(180deg, #ff6fb1, #f0388f); color-scheme: light; } /* мобильная вёрстка: ничего не должно распирать экран шире телефона */ .hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } .hero > *, .lobby > *, main > * { min-width: 0; } @media (max-width: 920px) { .hero { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 520px) { h1 { font-size: clamp(26px, 8.4vw, 34px); overflow-wrap: break-word; hyphens: auto; } .legal h1 { font-size: 22px; letter-spacing: -.3px; } .mockSub { white-space: normal; width: max-content; max-width: 88%; text-align: center; } .voteList { grid-template-columns: minmax(0, 1fr); } .scenes, .cands, .chars, .modes { grid-template-columns: minmax(0, 1fr); } .stats, .row { flex-wrap: wrap; } .glow { max-width: 100vw; } } /* надписи поверх «видео» всегда белые, в любой теме */ .mockRec, .mockSub { color: #fff; } /* шапка на телефоне: лого, код комнаты и тема влезают в одну строку */ @media (max-width: 520px) { .top { gap: 10px; padding: 10px 14px; } .top .logoText { font-size: 16px; } .top .logoMark { width: 30px; height: 30px; } .top .badge { padding: 6px 10px; font-size: 12px; letter-spacing: 1px; white-space: nowrap; } .top .themeBtn { flex: none; } } @media (max-width: 400px) { .top:has(.badge:not(.hidden)) .logoText { display: none; } } @media (max-width: 520px) { .top .eq { display: none; } } @media (max-width: 760px) { .top .badge.hidden + .themeBtn { margin-left: auto; } } .badge { color: #fff; } /* субтитры не залезают на полоску плеера */ .videoWrap:has(video[controls]) .subs { bottom: 64px; } /* лобби: кнопки микрофона и обучения */ .sideTools { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .sideTools .btn { flex: 1 1 auto; } /* окна */ .dlg { width: min(520px, calc(100vw - 24px)); max-height: calc(100vh - 32px); padding: 22px; border: 1px solid var(--line2); border-radius: 24px; background: var(--bg2, #140f28); color: var(--text); box-shadow: 0 30px 80px rgba(0, 0, 0, .6); } .dlg.wide { width: min(640px, calc(100vw - 24px)); } .dlg::backdrop { background: rgba(6, 4, 14, .6); backdrop-filter: blur(4px); } .dlg[open] { animation: pop .25s ease; } .dlgHead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .dlgHead h2 { margin: 0; font-size: 20px; } .dlgClose { width: 36px; height: 36px; flex: none; border-radius: 50%; border: 1px solid var(--line2); background: transparent; color: var(--text); font-size: 16px; cursor: pointer; } .dlg .field select { width: 100%; } .meter { height: 12px; margin: 12px 0 6px; border-radius: 999px; background: rgba(127, 110, 200, .18); overflow: hidden; } .meter i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, var(--cyan), var(--violet), var(--pink)); transition: width .06s linear; } /* карусель «Как играть» в стиле Gartic Phone: яркая карточка в обеих темах */ .tutorial { position: relative; max-width: 560px; margin: 0 auto; padding: 18px 18px 14px; border-radius: 26px; color: #fff; outline: none; background: radial-gradient(120% 90% at 50% 0%, #b04cf0 0%, #7a2fd0 45%, #5a1fa8 100%); box-shadow: 0 20px 50px rgba(90, 31, 168, .35), inset 0 0 0 1px rgba(255, 255, 255, .15); } .tutStage { display: grid; touch-action: pan-y; user-select: none; } .tutSlide { grid-area: 1 / 1; margin: 0; text-align: center; opacity: 0; visibility: hidden; transform: translateX(24px); transition: opacity .35s, transform .35s, visibility .35s; } .tutSlide.on { opacity: 1; visibility: visible; transform: none; } .tutArt { width: 100%; max-width: 380px; height: auto; display: block; margin: 0 auto; font-family: var(--display); } .tutSlide h3 { margin: 12px 0 6px; font-size: clamp(16px, 2.4vw, 20px); text-transform: uppercase; letter-spacing: .3px; } .tutSlide p { margin: 0 auto; max-width: 440px; min-height: 3em; color: rgba(255, 255, 255, .9); font-size: 15px; line-height: 1.45; } .tutNav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px; } .tutArrow { width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; font-size: 16px; cursor: pointer; transition: background .15s, transform .15s; } .tutArrow:hover { background: rgba(255, 255, 255, .3); transform: scale(1.06); } .tutDots { display: flex; gap: 8px; } .tutDot { position: relative; width: 12px; height: 12px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .35); cursor: pointer; overflow: hidden; transition: width .25s; } .tutDot.on { width: 34px; } .tutDot i { position: absolute; inset: 0; width: 0; background: #fff; border-radius: inherit; } .tutDot.on i { width: 100%; } .tutDot.on.run i { animation: tutFill 7s linear forwards; } @keyframes tutFill { from { width: 0; } to { width: 100%; } } .dlg .tutorial { box-shadow: none; } /* анимации картинок в «Как играть»: только на активном слайде */ .tutArt [class^="a-"], .tutArt [class*=" a-"] { transform-box: fill-box; transform-origin: center; } .tutSlide.on .a-bob { animation: aBob 2.4s ease-in-out infinite; transform-origin: center bottom; } .tutSlide.on .a-say { animation: aSay 1.2s ease-in-out infinite; transform-origin: center bottom; } .tutSlide.on .a-jump { animation: aJump 1.4s ease-in-out infinite; transform-origin: center bottom; } .tutSlide.on .a-pop { animation: aPop .5s cubic-bezier(.3, 1.6, .5, 1) both; } .tutSlide.on .a-wave { animation: aWave 1.5s ease-in-out infinite both; } .tutSlide.on .a-type { animation: aPop .35s cubic-bezier(.3, 1.6, .5, 1) both; } .tutSlide.on .a-fly { animation: aFly 2.4s ease-in-out infinite; } .tutSlide.on .a-hl { animation: aHl 6s ease-in-out infinite; } .tutSlide.on .a-tap { animation: aTap 6s ease-in-out infinite; transform-box: view-box; transform-origin: 0 0; } .tutSlide.on .a-play { animation: aPulse 1.6s ease-in-out infinite; } .tutSlide.on .a-grow { animation: aGrow 6s linear infinite; transform-origin: left center; } .tutSlide.on .a-sun { animation: aBob 3s ease-in-out infinite; } .tutSlide.on .a-munch { animation: aSay .5s ease-in-out infinite; transform-origin: center bottom; } .tutSlide.on .a-flash { animation: aFlash 1.2s ease-out infinite; } .tutSlide.on .a-ring { animation: aRing 1.2s ease-out infinite; } .tutSlide.on .a-ta { animation: aTa 1.2s ease-out infinite both; transform-origin: left bottom; } .tutSlide.on .a-cnt { animation: aCnt 6s ease-out infinite both; } .tutSlide.on .a-go { animation: aGo 6s ease-out infinite both; } .tutSlide.on .a-kw { animation: aKw 6s linear infinite both; } .tutSlide.on .a-blink { animation: aBlink 1s steps(2) infinite; } .tutSlide.on .a-trophy { animation: aTrophy 1.8s ease-in-out infinite; transform-origin: center bottom; } .tutSlide.on .a-twinkle { animation: aTwinkle 1.5s ease-in-out infinite; } .a-cnt, .a-go { opacity: 0; } .a-kw { fill: rgba(255, 255, 255, .55); } @keyframes aBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } @keyframes aSay { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.04, .96); } } @keyframes aJump { 0%, 100% { transform: translateY(0) scale(1, 1); } 15% { transform: translateY(0) scale(1.08, .9); } 45% { transform: translateY(-16px) scale(.96, 1.05); } 75% { transform: translateY(0) scale(1.05, .95); } } @keyframes aPop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } } @keyframes aWave { 0% { opacity: 0; } 30% { opacity: .9; } 100% { opacity: 0; } } @keyframes aFly { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(4px, -6px) rotate(-12deg); } } @keyframes aHl { 0%, 25%, 100% { transform: scale(1); filter: none; } 6%, 19% { transform: scale(1.12); filter: drop-shadow(0 0 10px #fff); } } @keyframes aTap { 0%, 20% { transform: translate(0, 0); } 25%, 45% { transform: translate(72px, 0); } 50%, 70% { transform: translate(144px, 0); } 75%, 95% { transform: translate(216px, 0); } 100% { transform: translate(0, 0); } } @keyframes aPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } } @keyframes aGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes aFlash { 0% { opacity: 1; transform: scale(1.08); } 30%, 100% { opacity: .35; transform: scale(1); } } @keyframes aRing { from { opacity: .8; transform: scale(1); } to { opacity: 0; transform: scale(2); } } @keyframes aTa { 0%, 8% { opacity: 0; transform: scale(.4); } 18% { opacity: 1; transform: scale(1.1); } 30%, 60% { opacity: 1; transform: scale(1); } 80%, 100% { opacity: 0; transform: scale(.9); } } @keyframes aCnt { 0% { opacity: 0; transform: scale(1.6); } 3% { opacity: 1; transform: scale(1); } 14% { opacity: 1; transform: scale(1); } 16.6%, 100% { opacity: 0; transform: scale(.8); } } @keyframes aGo { 0%, 49% { opacity: 0; transform: scale(.4); } 52% { opacity: 1; transform: scale(1.1); } 55%, 95% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1); } } @keyframes aKw { 0%, 49% { fill: rgba(255, 255, 255, .55); } 52%, 96% { fill: #ff7ab0; } 100% { fill: rgba(255, 255, 255, .55); } } @keyframes aBlink { 50% { opacity: 0; } } @keyframes aTrophy { 0%, 100% { transform: rotate(-6deg) translateY(0); } 50% { transform: rotate(6deg) translateY(-6px); } } @keyframes aTwinkle { 0%, 100% { opacity: .3; transform: scale(.7) rotate(0); } 50% { opacity: 1; transform: scale(1.15) rotate(20deg); } } /* «Как играть» справа на главной вместо макета записи */ .heroArt .tutorial { width: 100%; max-width: 520px; } @media (max-width: 920px) { .hero .heroArt { order: 0; } } /* выбор аватара рядом с ником */ .avaPick { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; margin: 2px 0 4px; } .avaPick button { aspect-ratio: 1; padding: 2px; border: 2px solid transparent; border-radius: 14px; background: var(--surface2); cursor: pointer; transition: transform .15s, border-color .15s; } .avaPick button:hover { transform: translateY(-2px); } .avaPick button.on { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(255, 61, 139, .25); } .avaPick svg, .avaImg { display: block; width: 100%; height: 100%; } .players .ava.img { background: var(--surface2) !important; padding: 1px; overflow: hidden; } .players .ava.img.mine { cursor: pointer; } .players .ava.img svg { width: 100%; height: 100%; display: block; } .players .ava.img { width: 40px; height: 40px; border-radius: 12px; } /* карточки паков в лобби */ .packCards { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; } .packCard { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 10px 12px; border-radius: 18px; border: 1px solid var(--line2); background: var(--surface2); color: var(--text); font: inherit; text-align: left; cursor: pointer; transition: transform .15s, border-color .15s, box-shadow .15s; } .packCard:hover:not(:disabled) { transform: translateY(-3px); border-color: var(--pink); box-shadow: 0 10px 30px rgba(255, 61, 139, .2); } .packCard:disabled { cursor: default; opacity: .85; } .packCard b { font-family: var(--display); font-size: 14px; margin-top: 6px; } .packThumbs { position: relative; display: flex; width: 100%; height: 86px; border-radius: 12px; overflow: hidden; background: #1a1236; } .packThumbs img { flex: 1; min-width: 0; height: 100%; object-fit: cover; } .packThumbs img + img { border-left: 2px solid rgba(0, 0, 0, .4); } .packIcon { position: absolute; right: 6px; bottom: 6px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: rgba(0, 0, 0, .55); font-size: 17px; } .packCard.random { background: var(--grad); border-color: transparent; color: #fff; } .packCard.random .muted { color: rgba(255, 255, 255, .85); } .packCard.random .packThumbs img { filter: blur(2px) brightness(.7); } .packCard.random .packIcon { inset: 0; width: auto; height: auto; margin: auto; background: none; font-size: 40px; } .manage summary span { font-size: 16px; } .manage h3 { margin: 0; } /* ползунок задержки */ .rangeField { width: 100%; } .rangeField input[type="range"] { width: 100%; accent-color: var(--pink); padding: 0; border: 0; background: none; box-shadow: none; } .calib .rangeField { flex: 1 1 100%; display: flex; flex-direction: column; gap: 6px; } .rangeField input[type="range"] { -webkit-appearance: none; appearance: none; height: 22px; width: 100%; background: transparent; } .rangeField input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--cyan), var(--violet), var(--pink)); } .rangeField input[type="range"]::-moz-range-track { height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--cyan), var(--violet), var(--pink)); } .rangeField input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 22px; height: 22px; margin-top: -7px; border-radius: 50%; background: #fff; border: 3px solid var(--pink); box-shadow: 0 2px 8px rgba(0, 0, 0, .3); } .rangeField input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid var(--pink); } .linkBtn { padding: 0; border: 0; background: none; color: var(--pink); font: inherit; text-decoration: underline; cursor: pointer; } .meter.ok i { background: linear-gradient(90deg, var(--ok), #7bd88f); } .calibNum { display: grid; place-items: center; width: 64px; height: 64px; flex: none; border-radius: 50%; background: var(--grad); color: #fff; font: 900 30px var(--display); box-shadow: 0 0 30px rgba(255, 61, 139, .45); } .calibNum.soft { background: var(--surface2); color: var(--muted); box-shadow: none; } .calibNum.pop { animation: aPop .25s cubic-bezier(.3, 1.6, .5, 1); } /* эквалайзер у логотипа стоит на месте и оживает только при наведении */ .eq i { animation: none; height: 60%; } .eq i:nth-child(1) { height: 45%; } .eq i:nth-child(2) { height: 85%; } .eq i:nth-child(3) { height: 60%; } .eq i:nth-child(4) { height: 100%; } .logo:hover .eq i { animation: eq 1s ease-in-out infinite; } /* «Как играть»: спокойная карточка в стиле остального сайта вместо яркой заливки */ .tutorial { color: var(--text); background: linear-gradient(160deg, rgba(124, 92, 255, .16), rgba(255, 61, 139, .06) 70%), var(--surface); border: 1px solid var(--line2); box-shadow: 0 20px 50px rgba(0, 0, 0, .25); backdrop-filter: blur(10px); } .tutArt { color: rgba(255, 255, 255, .7); } .tutSlide p { color: var(--muted); } .tutArrow { background: rgba(127, 110, 200, .16); color: var(--text); } .tutArrow:hover { background: rgba(127, 110, 200, .3); } .tutDot { background: rgba(127, 110, 200, .35); } .tutDot i { background: var(--pink); } .fineTune { width: 100%; } .fineTune summary { cursor: pointer; color: var(--muted); font-size: 14px; margin: 4px 0 8px; } .syncHead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .rangeField .linkBtn { align-self: flex-start; font-size: 13px; } /* ---------- игровой экран: игроки слева, сцена справа ---------- */ .game { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 18px; align-items: start; } @media (max-width: 900px) { .game { grid-template-columns: minmax(0, 1fr); } .gSide { order: 2; } } .gSide { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 12px; padding: 16px; } @media (max-width: 900px) { .gSide { position: static; } } .gSideHead { display: flex; justify-content: space-between; align-items: center; font-family: var(--display); } .gPlayers { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .gPlayers li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: var(--surface2); border: 1px solid var(--line); transition: border-color .2s, box-shadow .2s, transform .2s; } .gPlayers li.me { border-color: var(--line2); } .gPlayers li.speaking { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(255, 61, 139, .25), 0 0 24px rgba(255, 61, 139, .3); transform: translateX(4px); } .gPlayers .ava { width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--surface2); } .gPlayers .ava svg { width: 100%; height: 100%; display: block; } .gName { display: flex; flex-direction: column; min-width: 0; } .gName b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .gTag { font-size: 12px; color: var(--muted); } .gScore { margin-left: auto; font-weight: 800; color: var(--yellow); font-size: 13px; } @media (max-width: 900px) { .gPlayers { flex-direction: row; flex-wrap: wrap; } .gPlayers li { flex: 1 1 140px; } } .gMain { display: flex; flex-direction: column; gap: 14px; min-width: 0; } .gHead { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .gHead h2 { margin: 0 0 2px; } .gHeadRight { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; } .gCaption { font-family: var(--display); font-size: 18px; text-align: center; } .gStage { display: flex; flex-direction: column; gap: 12px; } .gVideo { position: relative; } .gVideo video { pointer-events: none; } .gProgress { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255, 255, 255, .15); } .gProgress i { display: block; height: 100%; width: 0; background: var(--grad); } .tapToPlay { position: absolute; inset: 0; margin: auto; width: max-content; height: max-content; padding: 14px 22px; border: 0; border-radius: 999px; background: var(--grad); color: #fff; font: 800 15px var(--body); cursor: pointer; box-shadow: 0 10px 40px rgba(255, 61, 139, .5); } /* ---------- караоке-панель ---------- */ .kara { position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 132px; padding: 16px 20px; border-radius: 20px; background: var(--surface2); border: 1px solid var(--line); transition: border-color .2s, box-shadow .2s, background .2s; } .kara.mine { border-color: var(--pink); background: linear-gradient(160deg, rgba(255, 61, 139, .16), rgba(124, 92, 255, .1)), var(--surface2); box-shadow: 0 0 0 3px rgba(255, 61, 139, .2); } .kara.ready { border-color: var(--yellow); } .karaWho { display: flex; align-items: center; gap: 8px; min-height: 28px; font-size: 14px; } .karaAva { width: 28px; height: 28px; border-radius: 9px; background: var(--surface); overflow: hidden; flex: none; } .karaAva svg { width: 100%; height: 100%; display: block; } .karaYou { color: var(--pink); letter-spacing: .5px; } .karaDot { color: var(--muted); } .karaBadge { margin-left: auto; padding: 4px 10px; border-radius: 999px; background: var(--pink); color: #fff; font-weight: 800; font-size: 12px; animation: pulse 1s ease-in-out infinite; } .karaSoon { margin-left: auto; font-weight: 800; color: var(--yellow); } .karaLine { font: 800 clamp(19px, 2.6vw, 28px)/1.35 var(--body); color: var(--text); } .karaLine .kw { color: var(--muted); transition: color .08s; } .karaLine .kw.done { color: var(--text); } .karaLine .kw.on { color: var(--pink); } .kara:not(.mine) .karaLine .kw.on { color: var(--cyan); } .karaLine.soon { color: var(--muted); font-size: clamp(16px, 2vw, 20px); } .karaNext { font-size: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 20px; } .karaNext .karaAva { width: 20px; height: 20px; border-radius: 6px; } .karaNextText { color: var(--muted); } .karaWait { height: 6px; border-radius: 999px; background: rgba(127, 110, 200, .2); overflow: hidden; } .karaWait i { display: block; height: 100%; width: 0; background: var(--grad); } /* ---------- панели этапов ---------- */ .gPanel { min-height: 320px; display: flex; } .gPanel > * { flex: 1; } .gWait, .gAssign { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 30px 10px; } .gWait h3, .gAssign h3 { margin: 6px 0 0; font-size: clamp(20px, 2.6vw, 28px); } .gAssignAva { width: 110px; height: 110px; animation: aBob 2.4s ease-in-out infinite; } .gAssignAva svg { width: 100%; height: 100%; } .myLines { list-style: none; padding: 0; margin: 10px 0; display: flex; flex-direction: column; gap: 6px; max-width: 520px; } .myLines li { padding: 8px 14px; border-radius: 12px; background: var(--surface2); border: 1px solid var(--line); font-weight: 600; } .gStart { margin-top: 8px; font-family: var(--display); font-size: 18px; } .gStart b { display: inline-grid; place-items: center; min-width: 44px; height: 44px; margin-left: 6px; border-radius: 50%; background: var(--grad); color: #fff; } .gWrite { display: flex; flex-direction: column; gap: 12px; } .gWrite h3 { margin: 0; } .gWrite .writeLine { grid-template-columns: 150px 1fr; } .gVote { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 30px 10px; } .voteBtns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 10px; } .voteBtn { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 150px; padding: 18px 22px; border-radius: 20px; border: 2px solid var(--line2); background: var(--surface2); color: var(--text); font: 800 18px var(--display); cursor: pointer; transition: transform .15s, border-color .15s; } .voteBtn small { font: 600 12px var(--body); color: var(--muted); } .voteBtn:hover:not(:disabled) { transform: translateY(-3px); border-color: var(--pink); } .voteBtn.chosen { border-color: var(--pink); background: var(--grad); color: #fff; } .voteBtn:disabled:not(.chosen) { opacity: .45; cursor: default; } .gFinal { display: flex; flex-direction: column; gap: 16px; } .gFinal h3 { margin: 0; text-align: center; font-size: clamp(22px, 3vw, 30px); } .finalRound { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 18px; background: var(--surface2); border: 1px solid var(--line); } .finalRound video { width: 100%; max-height: 52vh; border-radius: 14px; background: #000; } .finalLinks { display: flex; flex-wrap: wrap; gap: 8px; } .podium { display: flex; justify-content: center; align-items: flex-end; gap: 12px; } .podiumItem { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 12px; border-radius: 16px; background: var(--surface2); min-width: 110px; } .podiumItem .ava { width: 56px; height: 56px; } .podiumItem .ava svg { width: 100%; height: 100%; } .podiumItem.p1 { order: 2; padding-bottom: 26px; border: 2px solid var(--yellow); } .podiumItem.p2 { order: 1; } .podiumItem.p3 { order: 3; } /* лобби: выбранный пак и старт */ .packCard.chosen { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(255, 61, 139, .3); } .packCard.random.chosen { box-shadow: 0 0 0 3px rgba(255, 255, 255, .5), 0 10px 30px rgba(255, 61, 139, .35); } .startRow { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 4px 0 22px; } .gVideo video { max-height: 50vh; } #btnEndGame { white-space: nowrap; font-size: 13px; } @media (max-width: 680px) { .gWrite .writeLine { grid-template-columns: 1fr; gap: 6px; } } /* громкость и полный экран поверх видео: паузы и перемотки нет */ .gCtrl { position: absolute; right: 10px; bottom: 12px; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 999px; background: rgba(0, 0, 0, .55); backdrop-filter: blur(6px); opacity: .35; transition: opacity .2s; z-index: 3; } .gVideo:hover .gCtrl, .gCtrl:focus-within { opacity: 1; } @media (hover: none) { .gCtrl { opacity: .9; } } .gCtrl input[type="range"] { width: 90px; accent-color: var(--pink); padding: 0; border: 0; background: none; box-shadow: none; } .gVolIcon { cursor: pointer; font-size: 15px; user-select: none; } .gCtrl button { width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .15); color: #fff; font-size: 16px; cursor: pointer; } .gCtrl button:hover { background: rgba(255, 255, 255, .3); } .gSubs { bottom: 22px; z-index: 2; } .gSubs span { font-size: clamp(16px, 2.2vw, 24px); } .gVideo:fullscreen { display: flex; align-items: center; justify-content: center; background: #000; border-radius: 0; border: 0; } .gVideo:fullscreen video { width: 100%; height: 100%; max-height: 100vh; object-fit: contain; } .gVideo:fullscreen .gSubs { bottom: 7vh; } .gVideo:fullscreen .gSubs span { font-size: clamp(22px, 3vw, 40px); } .gActions { justify-content: center; } /* ---------- «Предложить пак» ---------- */ .optionCards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 10px 0; } @media (max-width: 680px) { .optionCards { grid-template-columns: 1fr; } } .optionCard { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 18px; background: var(--surface2); border: 1px solid var(--line); } .optionCard p { margin: 0; color: var(--muted); font-size: 14px; } .optionCard.best { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(255, 61, 139, .15); } .optionCard .pill { align-self: flex-start; } .suggestForm { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; } .radioRow { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; padding: 0; border: 0; } .radioRow legend { margin-bottom: 6px; font-weight: 700; font-size: 14px; } .suggestDone { text-align: center; padding: 30px 10px; } .legal code { padding: 2px 6px; border-radius: 6px; background: var(--surface2); font-size: 13px; } /* ---------- админка ---------- */ .loginCard { max-width: 420px; margin: 40px auto; display: flex; flex-direction: column; gap: 14px; } .loginCard h1 { font-size: 26px; margin: 0; } .adminTabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .adminTabs .tab { padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line2); background: var(--surface2); color: var(--text); font: 700 14px var(--body); cursor: pointer; } .adminTabs .tab.active { background: var(--grad); color: #fff; border-color: transparent; } .adminTabs .tab.right { margin-left: auto; } .tabCount { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--pink); color: #fff; font-size: 12px; } .tabCount:empty { display: none; } .adminTab { display: flex; flex-direction: column; gap: 12px; } .adminTab.hidden { display: none; } .adminBlock { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; } .packTable { display: flex; flex-direction: column; gap: 8px; } .packRow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 16px; background: var(--surface2); border: 1px solid var(--line); } .packRow .acts { margin-left: auto; display: flex; gap: 8px; } .suggList { display: flex; flex-direction: column; gap: 14px; } .sugg { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: 18px; background: var(--surface2); border: 1px solid var(--line); } .suggClips { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; } .suggClips figure { margin: 0; display: flex; flex-direction: column; gap: 4px; } .suggClips video { width: 100%; border-radius: 12px; background: #000; max-height: 220px; } .field.inline { flex-direction: row; align-items: center; gap: 8px; } .field.inline input { min-width: 200px; } /* логотип-маскот: картинка шире квадрата из-за полосок звука */ .logoMark { width: auto; height: 40px; object-fit: contain; filter: drop-shadow(0 4px 12px rgba(124, 92, 255, .35)); } @media (max-width: 520px) { .top .logoMark { width: auto; height: 34px; } } .top .logoMark { height: 48px; } .top .logo { gap: 6px; } @media (max-width: 520px) { .top .logoMark { height: 38px; } } /* план загрузки серий: субтитры и моменты для каждой серии */ .epPlan { display: flex; flex-direction: column; gap: 10px; } .epPlan:empty { display: none; } .planTools { display: flex; justify-content: flex-end; } .planRow { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 10px 14px; align-items: end; padding: 14px; border-radius: 16px; background: var(--surface2); border: 1px solid var(--line); } .planName { grid-column: 1 / -1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .planCuts { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; } .planCuts.off .cutBox { opacity: .4; } .cutBox { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); } .cutBox input { width: 64px; text-align: center; } .planSum { grid-column: 1 / -1; } @media (max-width: 680px) { .planRow { grid-template-columns: minmax(0, 1fr); } } .quickCut { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 2px; } .quickCut .cutBox input { width: 52px; } #episodeList .scene .acts { flex-wrap: wrap; gap: 6px; } #episodeList .scene .acts [data-epdel] { margin-left: auto; } .tunnelBox { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 16px; margin-bottom: 14px; } .tunnelBox b { word-break: break-all; } /* реклама: только вне игры, с подписью «Реклама» */ .adSlot { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; max-width: 980px; margin: 18px auto 0; } .adSlot.hidden { display: none; } .adSlot iframe { width: 100%; border: 0; display: block; background: transparent; } .adSlot .adInline { width: 100%; display: flex; justify-content: center; overflow: hidden; } .adLabel { align-self: flex-start; font-size: 11px; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; } .center { text-align: center; } /* админка: жалобы, статистика, настройки */ .pill.hot { background: var(--pink); color: #fff; border-color: transparent; } .sugg.done { opacity: .65; } .preLine { white-space: pre-line; word-break: break-word; margin: 0; } .statTiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; } .statTile { display: flex; flex-direction: column; gap: 4px; padding: 14px; border-radius: 16px; background: var(--surface2); border: 1px solid var(--line); } .statTile b { font-size: 26px; } .tableWrap { overflow-x: auto; } .statTable { width: 100%; border-collapse: collapse; font-size: 14px; } .statTable th, .statTable td { padding: 8px 10px; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; } .statTable th:first-child, .statTable td:first-child { text-align: left; } .statTable th { color: var(--muted); font-weight: 600; font-size: 12px; } .switchRow { display: flex; flex-direction: row; align-items: flex-start; font-weight: 500; gap: 10px; cursor: pointer; } .switchRow input { width: 18px; height: 18px; margin-top: 2px; flex: none; accent-color: #7c5cff; } .adSlotsEdit { display: flex; flex-direction: column; gap: 10px; } .adSlotEdit { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 16px; background: var(--surface2); border: 1px solid var(--line); } .adSlotEdit textarea { width: 100%; min-height: 80px; font: 13px/1.4 ui-monospace, Consolas, monospace; } .adSlotEdit .field.inline input { min-width: 0; width: 90px; } .complaintForm { display: flex; flex-direction: column; gap: 12px; margin: 10px 0 20px; } .complaintForm textarea { width: 100%; } /* ---------- мультяшный стиль: плотные цвета, толстая обводка, тень-наклейка ---------- */ body { background-color: var(--bg); font-weight: 600; } body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--doodle); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' fill='none' stroke='%23fff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M30 18l5 11 12 1-9 8 3 12-11-6-11 6 3-12-9-8 12-1z'/%3E%3Cpath d='M128 22v28'/%3E%3Ccircle cx='121' cy='52' r='7'/%3E%3Cpath d='M128 22l14 6'/%3E%3Cpath d='M160 96c-6-9-20-4-16 7 3 7 16 14 16 14s13-7 16-14c4-11-10-16-16-7z'/%3E%3Cpath d='M20 120q8-10 16 0t16 0t16 0'/%3E%3Crect x='86' y='120' width='16' height='26' rx='8'/%3E%3Cpath d='M80 138a14 14 0 0 0 28 0M94 152v10'/%3E%3Ccircle cx='60' cy='80' r='4'/%3E%3Cpath d='M170 160h14M177 153v14'/%3E%3Cpath d='M30 176l10-8 8 8 10-8'/%3E%3C/svg%3E") 0 0 / 220px 220px; } .glow, .grain { display: none; } h1, h2, h3 { letter-spacing: 0; font-weight: 800; } h1 { font-weight: 900; } label { color: inherit; } a { font-weight: 700; } /* шапка и подвал: сплошные полосы */ .top { background: var(--surface); border-bottom: 3px solid var(--outline); backdrop-filter: none; box-shadow: 0 4px 0 rgba(0, 0, 0, .12); } .logoText { font-weight: 900; color: var(--text); } .logoText b, [data-theme="light"] .logoText b { background: none; color: var(--pink); } .nav a { color: var(--text); font-weight: 800; padding: 6px 12px; border-radius: 12px; transition: background .12s; } .nav a:hover { background: var(--surface2); } .foot { background: var(--surface); border-top: 3px solid var(--outline); } .footLinks a { color: var(--text); } .themeBtn { border: 3px solid var(--outline); box-shadow: 0 3px 0 var(--outline); } .themeBtn:hover { border-color: var(--outline); } .badge { background: var(--yellow); color: #2b1b62; border: 3px solid var(--outline); box-shadow: 0 3px 0 var(--outline); font-family: var(--display); letter-spacing: 3px; } /* главная: крупный заголовок с обводкой прямо на фоне */ .heroText h1, .blockTitle { color: var(--onbg); text-shadow: 0 4px 0 var(--outline); } .grad, [data-theme="light"] .grad { background: none; color: var(--yellow); -webkit-text-fill-color: currentColor; } .heroText .lead, [data-theme="light"] .lead { color: var(--onbg); } .kicker { background: var(--yellow); color: #2b1b62; border: 3px solid var(--outline); box-shadow: 0 3px 0 var(--outline); font-weight: 800; } .joinCard { position: relative; margin-top: 44px; } .joinCard::before { content: ""; position: absolute; right: -14px; top: -70px; width: 94px; height: 94px; background: url(mascot-512.png) center / contain no-repeat; transform: rotate(10deg); animation: aBob 3s ease-in-out infinite; pointer-events: none; } @media (max-width: 520px) { .joinCard::before { width: 76px; height: 76px; top: -56px; right: -4px; } } /* карточки-наклейки */ .card, .joinCard, .step, .modeTile, .dlg, .toast, .sticker { background: var(--surface); border: 3px solid var(--outline); box-shadow: 0 6px 0 var(--outline); backdrop-filter: none; } .modeTile { color: #2b1b62; transition: transform .15s; } .modeTile:hover { transform: translateY(-4px); } .modeTile:nth-child(1) { background: #ffa3cf; } .modeTile:nth-child(2) { background: #ffe27a; } .modeTile:nth-child(3) { background: #8ff0c5; } .modeTile:nth-child(4) { background: #9fdcff; } .modeTile p, [data-theme="light"] .modeTile p { color: #4a3d7d; } .modeIcon { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 18px; background: #fff; border: 3px solid var(--outline); } /* кнопки с объёмом: тень снизу, при нажатии «вдавливаются» */ .btn { border: 3px solid var(--outline); border-radius: 16px; box-shadow: 0 5px 0 var(--outline); font: 800 16px var(--body); filter: none; transition: transform .08s, box-shadow .08s; } .btn:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--outline); filter: none; } .btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--outline); } .btn.alt { background: var(--surface2); border: 3px solid var(--outline); box-shadow: 0 5px 0 var(--outline); } .btn.alt:hover { border-color: var(--outline); box-shadow: 0 7px 0 var(--outline); } .btn.big { font-size: 19px; border-radius: 18px; } .btn.small { border-width: 2.5px; box-shadow: 0 3px 0 var(--outline); } .btn.small:hover { box-shadow: 0 5px 0 var(--outline); } .btn.small:active { box-shadow: 0 0 0 var(--outline); transform: translateY(3px); } .btn:disabled, .btn:disabled:hover { transform: none; box-shadow: 0 3px 0 var(--outline); } .glowBtn { background: var(--yellow); color: #2b1b62; } .glowBtn::after { display: none; } .tapToPlay { border: 3px solid var(--outline); box-shadow: 0 5px 0 var(--outline); } .linkBtn { font-weight: 800; } /* поля ввода */ input, select, textarea, [data-theme="light"] input, [data-theme="light"] select, [data-theme="light"] textarea { background: var(--field); color: var(--fieldText); border: 3px solid var(--outline); border-radius: 14px; font-weight: 700; } input::placeholder, [data-theme="light"] input::placeholder { color: var(--muted); } input:focus, select:focus, textarea:focus { border-color: var(--outline); box-shadow: 0 0 0 4px var(--pink); } .code { color: var(--fieldText); } .drop, [data-theme="light"] .drop { border: 3px dashed var(--outline); background: var(--surface2); } /* плашки внутри карточек */ .players li, .gPlayers li, .mode, .packCard, .scene, .cand, .char, .part, .voteItem, .finalRound, .scoreRow, .optionCard, .sugg, .packRow, .statTile, .adSlotEdit, .writeLine, .myLines li, .podiumItem, .voteBtn, .kara, .prompter, .upload, .range, .planRow, .calib { border: 2.5px solid var(--outline); box-shadow: 0 4px 0 var(--outline); } .upload, .calib, [data-theme="light"] .upload, [data-theme="light"] .calib { background: var(--surface2); } .calib { border-style: dashed; box-shadow: none; } .mode:hover, .packCard:hover:not(:disabled), .scene:hover, .voteBtn:hover:not(:disabled), [data-theme="light"] .scene:hover { border-color: var(--outline); box-shadow: 0 7px 0 var(--outline); } .mode.active { background: var(--pink); color: #fff; border-color: var(--outline); box-shadow: 0 4px 0 var(--outline); } .mode.active .small { color: rgba(255, 255, 255, .9); } .packCard.chosen, .char.mine, .part.mine, .kara.mine, .prompter.mine, .gPlayers li.speaking, .avaPick button.on, .optionCard.best, .packCard.random.chosen { border-color: var(--outline); box-shadow: 0 4px 0 var(--outline); outline: 4px solid var(--pink); outline-offset: 2px; } .cand.sel { border-color: var(--outline); box-shadow: 0 4px 0 var(--outline); outline: 4px solid var(--yellow); outline-offset: 2px; } .voteItem.chosen { border-color: var(--outline); box-shadow: 0 4px 0 var(--outline); outline: 4px solid var(--ok); outline-offset: 2px; } .kara.ready { border-color: var(--outline); outline: 4px solid var(--yellow); outline-offset: 2px; } .voteBtn.chosen { border-color: var(--outline); } .avaPick button { border: 2.5px solid var(--outline); box-shadow: 0 3px 0 var(--outline); } .avaPick button.on { background: var(--yellow); } .pill, [data-theme="light"] .pill { background: var(--surface2); color: var(--text); border: 2.5px solid var(--outline); font-weight: 800; } .roomCode { background: var(--yellow); color: #2b1b62; border: 3px solid var(--outline); box-shadow: 0 4px 0 var(--outline); } .roomCode .muted { color: #5a4b8a; } .stepNum, .calibNum { border: 3px solid var(--outline); box-shadow: 0 3px 0 var(--outline); } .calibNum.soft { box-shadow: none; } .packThumbs { border: 2.5px solid var(--outline); } .adminTabs .tab { border: 2.5px solid var(--outline); box-shadow: 0 3px 0 var(--outline); } .adminTabs .tab.active { background: var(--pink); } .tabCount { border: 2px solid var(--outline); } /* видео и экран игры */ .videoWrap, .edVideo { border: 3px solid var(--outline); box-shadow: 0 6px 0 var(--outline); } .countdown, [data-theme="light"] .countdown { color: var(--yellow); background: rgba(20, 10, 50, .5); backdrop-filter: none; text-shadow: none; -webkit-text-stroke: 8px var(--outline); paint-order: stroke fill; } .bar, [data-theme="light"] .bar { background: rgba(0, 0, 0, .2); } .bar i { background: var(--ok); box-shadow: none; } .meter { border: 2.5px solid var(--outline); } /* окна и уведомления */ .dlg, [data-theme="light"] .dlg { background: var(--surface); box-shadow: 0 8px 0 var(--outline); } .dlg::backdrop { background: rgba(20, 10, 50, .55); backdrop-filter: none; } .dlgClose { border: 2.5px solid var(--outline); background: var(--surface2); font-weight: 900; } .toast, [data-theme="light"] .toast { background: var(--yellow); color: #2b1b62; font-weight: 800; } /* «Как играть»: яркая карточка, картинки рассчитаны на цветной фон */ .tutorial { background: var(--tut); color: #fff; border: 3px solid var(--outline); box-shadow: 0 6px 0 var(--outline); backdrop-filter: none; } .tutArt { color: rgba(255, 255, 255, .75); } .tutSlide p { color: rgba(255, 255, 255, .92); } .tutArrow { background: #fff; color: var(--tut); border: 2.5px solid var(--outline); box-shadow: 0 3px 0 var(--outline); } .tutArrow:hover { background: var(--yellow); } .tutDot { background: rgba(255, 255, 255, .35); } .tutDot i { background: var(--yellow); } .dlg .tutorial { box-shadow: 0 4px 0 var(--outline); } /* тексты страниц */ .legal p, .legal li, [data-theme="light"] .legal p, [data-theme="light"] .legal li { color: var(--text); } .legal .note, [data-theme="light"] .legal .note { background: #fff1b8; color: #5a4300; border: 2.5px solid var(--outline); } .statTable th, .statTable td { border-bottom-color: rgba(127, 110, 200, .3); } /* логотип: вторая часть жёлтая, как акцентный текст на сайте */ .logoText b, [data-theme="light"] .logoText b { color: var(--yellow); -webkit-text-stroke: 5px var(--outline); paint-order: stroke fill; } .logoText.small b { -webkit-text-stroke-width: 4px; } /* всё на одном экране, как в Gartic: шапка, игра посередине, тонкий подвал */ body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } body > main { flex: 1 0 auto; width: 100%; padding-top: 18px; padding-bottom: 18px; } #app { display: flex; flex-direction: column; justify-content: center; } .hero { min-height: 0; padding: 0; gap: clamp(20px, 3vw, 44px); } .heroText h1 { font-size: clamp(32px, 4.4vw, 54px); margin: 12px 0 10px; } .heroText .lead { margin-bottom: 0; font-size: 17px; } .joinCard { margin-top: 64px; gap: 12px; padding: 18px; } .foot { margin-top: 0; padding: 10px clamp(16px, 4vw, 40px); } .footInner { justify-content: center; } .footLinks { gap: 6px 18px; justify-content: center; } .footLinks a { font-size: 13px; } .copy { margin-top: 4px; text-align: center; } /* в лобби и в игре подвал не нужен */ body:has(#scrHome.hidden) .foot { display: none; } /* лобби на широком экране влезает целиком, листается только список паков */ @media (min-width: 901px) and (min-height: 560px) { body:has(#scrLobby:not(.hidden)) { height: 100vh; height: 100dvh; } body:has(#scrLobby:not(.hidden)) > main { flex: 1 1 0; min-height: 0; display: flex; } #scrLobby:not(.hidden) { flex: 1; min-height: 0; display: flex; flex-direction: column; } #scrLobby .lobby { flex: 1; min-height: 0; } #scrLobby .side { position: static; max-height: 100%; overflow: auto; } #scrLobby .mainCol { height: 100%; min-height: 0; display: flex; flex-direction: column; } #scrLobby .mainCol .sectionHead { margin-top: 18px; } #scrLobby .packCards { flex: 1; min-height: 0; overflow: auto; align-content: start; padding: 6px 8px 10px 6px; margin: 0 -8px 12px -6px; } #scrLobby .startRow { margin-bottom: 0; } } /* главная: заголовок сверху по центру, под ним вход и «Как играть» рядом, одинаковой высоты */ .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "kick kick" "title title" "lead lead" "join art"; align-items: stretch; row-gap: 0; max-width: 1040px; margin: 0 auto; } .heroText { display: contents; } .heroText .kicker { grid-area: kick; justify-self: center; } .heroText h1 { grid-area: title; text-align: center; margin: 10px 0 6px; } .heroText h1 br { display: none; } .heroText .lead { grid-area: lead; justify-self: center; text-align: center; max-width: 640px; } .joinCard { grid-area: join; margin-top: 26px; max-width: none; justify-content: center; } .joinCard::before { top: -46px; right: -18px; width: 80px; height: 80px; } .heroArt { grid-area: art; margin-top: 26px; padding: 0; display: flex; } .heroArt .tutorial { max-width: none; flex: 1; display: flex; flex-direction: column; justify-content: center; } @media (max-width: 920px) { .hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "kick" "title" "lead" "join" "art"; } .heroText h1 br { display: inline; } } @media (min-width: 921px) { .heroText .grad { margin-left: .28em; } .heroText .lead { max-width: 780px; } body > main { padding-top: 12px; padding-bottom: 12px; } .joinCard, .heroArt { margin-top: 20px; } .joinCard { padding: 16px 18px; gap: 10px; } .joinCard input { padding: 10px 14px; } .joinCard .btn.big { padding: 13px 24px; } } .joinCard::before { content: none; } .heroArt { position: relative; } @media (min-width: 921px) { .top { padding-top: 8px; padding-bottom: 8px; } .top .logoMark { height: 42px; } .heroText .kicker { padding: 4px 14px; font-size: 13px; } .heroText .lead { max-width: none; font-size: 16px; } .heroArt .tutArt { max-width: 290px; } .heroArt .tutSlide p { min-height: 0; } .foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 18px; } .foot .footInner { margin: 0; } .foot .copy { margin: 0; } } @media (min-width: 901px) { #scrLobby .modes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } #scrLobby .mode { padding: 10px 12px; } #scrLobby .mode .small { font-size: 12px; line-height: 1.35; } #scrLobby .mainCol h2 { margin-bottom: 10px; } } /* кнопка Telegram-канала в шапке */ .tgBtn { display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 14px; flex-shrink: 0; border-radius: 14px; background: #29a9eb; color: #fff; border: 3px solid var(--outline); box-shadow: 0 3px 0 var(--outline); font-weight: 800; font-size: 15px; text-decoration: none !important; transition: transform .1s, box-shadow .1s; } .tgBtn svg { width: 20px; height: 20px; } .tgBtn:hover { transform: translateY(-2px); box-shadow: 0 5px 0 var(--outline); } .tgBtn:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--outline); } .top .themeBtn { margin-left: 0; } .nav { margin-right: 4px; } @media (max-width: 760px) { .top .tgBtn { margin-left: auto; } .top .tgBtn ~ .themeBtn { margin-left: 0 !important; } } @media (max-width: 520px) { .tgBtn { width: 42px; padding: 0; justify-content: center; } .tgBtn span { display: none; } .tgBtn { height: 38px; width: 38px; } } /* логотип без обводки; на белой шапке светлой темы жёлтый потемнее, иначе не читается */ .logoText b, [data-theme="light"] .logoText b { -webkit-text-stroke: 0; paint-order: normal; } [data-theme="light"] .logoText b { color: #f2a100; } /* режимы на главной: цветные наклейки в ряд под входом */ #modes.modeShow { max-width: 1040px; margin: 26px auto 6px; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } #modes .modeTile { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 20px; } #modes .modeIcon { flex: none; width: 46px; height: 46px; border-radius: 14px; font-size: 24px; } #modes .modeTile h3 { margin: 0 0 2px; font-size: 15px; } #modes .modeTile p { margin: 0; font-size: 13px; line-height: 1.3; } @media (max-width: 920px) { #modes.modeShow { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { #modes.modeShow { grid-template-columns: minmax(0, 1fr); } } /* на низких экранах ноутбуков: всё чуть плотнее, чтобы влезло без прокрутки */ @media (min-width: 921px) and (max-height: 800px) { .heroText h1 { font-size: clamp(30px, 3.6vw, 44px); margin: 6px 0 4px; } .joinCard, .heroArt { margin-top: 14px; } .heroArt .tutArt { max-width: 230px; } #modes.modeShow { margin-top: 18px; } } @media (min-width: 921px) and (max-height: 760px) { #modes .modeTile p { display: none; } #modes .modeTile { padding: 8px 12px; } #modes .modeIcon { width: 38px; height: 38px; font-size: 20px; } .heroArt .tutArt { max-width: 200px; } .heroText .kicker { display: none; } } /* конструктор аватара: большой Дабби, кубик и три переключателя */ .avaMaker { display: flex; align-items: center; gap: 16px; } .avaBig { position: relative; flex: none; width: 104px; height: 104px; border-radius: 24px; background: var(--surface2); border: 3px solid var(--outline); box-shadow: 0 4px 0 var(--outline); } .avaBig [data-ava-view], .avaBig svg { display: block; width: 100%; height: 100%; } .avaDice { position: absolute; right: -12px; bottom: -12px; width: 40px; height: 40px; padding: 0; border-radius: 50%; background: var(--yellow); border: 3px solid var(--outline); box-shadow: 0 3px 0 var(--outline); font-size: 19px; cursor: pointer; transition: transform .1s; } .avaDice:hover { transform: translateY(-2px); } .avaDice.roll { animation: diceRoll .45s ease; } @keyframes diceRoll { 0% { transform: rotate(0) scale(1); } 50% { transform: rotate(200deg) scale(1.2); } 100% { transform: rotate(360deg) scale(1); } } .avaSide { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; } .avaSteps { display: flex; gap: 8px; } .avaStep { flex: 1; display: flex; align-items: center; justify-content: space-between; min-width: 0; border: 2.5px solid var(--outline); border-radius: 12px; background: var(--surface2); box-shadow: 0 3px 0 var(--outline); overflow: hidden; } .avaStep b { font-size: 16px; line-height: 1; } .avaStep button { width: 30px; height: 32px; padding: 0; border: 0; background: none; color: var(--text); font: 900 20px/1 var(--body); cursor: pointer; } .avaStep button:hover { background: rgba(127, 110, 200, .25); } .avaStep button:active { background: rgba(127, 110, 200, .45); } .avaMaker.col { flex-direction: column; gap: 22px; padding: 6px 0 4px; } .avaMaker.col .avaBig { width: 170px; height: 170px; border-radius: 32px; } .avaMaker.col .avaSteps { width: 100%; } @media (max-width: 400px) { .avaMaker:not(.col) { gap: 12px; } .avaMaker:not(.col) .avaBig { width: 84px; height: 84px; } .avaStep button { width: 24px; } } /* аватарка в списке игроков кликается, чтобы открыть конструктор */ .players .ava.img.mine { outline: 3px solid var(--yellow); outline-offset: 1px; } /* кнопка пропуска под видео */ #gActions:has(#btnSkip) { gap: 12px; } /* караоке: слово заливается цветом слева направо, высота панели не прыгает от переноса строки */ .karaLine { min-height: 2.7em; } .karaLine .kw, .karaLine .kw.done, .karaLine .kw.on { --fill: var(--cyan); color: transparent; -webkit-background-clip: text; background-clip: text; background-image: linear-gradient(90deg, var(--fill) var(--p, 0%), var(--muted) var(--p, 0%)); transition: none; color: transparent !important; } .kara.mine .karaLine .kw { --fill: var(--pink); } .karaLine .kw.done { --p: 100%; } .karaLine .kw.on { filter: drop-shadow(0 0 10px rgba(255, 92, 168, .35)); } /* в комнате в шапке есть плашка с кодом: оставляем только «Как играть», чтобы меню не переносилось */ .nav a { white-space: nowrap; } .top:has(.badge:not(.hidden)) .nav a:not([data-open-help]) { display: none; } /* кнопка доната на Boosty в шапке, рядом с Telegram */ .boostyBtn { background: #f15f2c; } .boostyBtn b { font-size: 16px; line-height: 1; } .boostyBtn.hidden { display: none; } @media (max-width: 760px) { .top .boostyBtn { margin-left: auto; } .top .boostyBtn:not(.hidden) ~ .tgBtn { margin-left: 0; } } @media (max-width: 520px) { .boostyBtn span { display: none; } .boostyBtn { width: 38px; height: 38px; padding: 0; justify-content: center; } } @media (min-width: 761px) and (max-width: 1100px) { .boostyBtn span { display: none; } .boostyBtn { width: 42px; padding: 0; justify-content: center; } } /* телефон: логотип и четыре кнопки шапки в одну строку */ @media (max-width: 520px) { .top { gap: 6px; } .top .tgBtn, .top .boostyBtn, .top .themeBtn { width: 36px; height: 36px; border-radius: 12px; font-size: 16px; } } @media (max-width: 380px) { .top .logoText { font-size: 14px; } .top .logoMark { height: 32px; } } /* жалоба на субтитры: список реплик сцены и тип ошибки */ .subLines { display: flex; flex-direction: column; gap: 6px; max-height: 38vh; overflow: auto; margin: 6px 0 14px; padding: 4px; } .subLine { display: grid; grid-template-columns: 40px auto 1fr; gap: 8px; align-items: baseline; text-align: left; padding: 8px 12px; border-radius: 12px; border: 2.5px solid var(--outline); background: var(--surface2); color: var(--text); font: 600 14px var(--body); cursor: pointer; } .subLine b { font-size: 13px; white-space: nowrap; } .subLine.on { background: var(--pink); color: #fff; } .subLine.on .muted, .subLine.on b { color: #fff !important; } .subKinds { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; } .subKind { flex-direction: row; align-items: center; gap: 0; cursor: pointer; } .subKind input { position: absolute; opacity: 0; pointer-events: none; } .subKind span { padding: 6px 12px; border-radius: 999px; border: 2.5px solid var(--outline); background: var(--surface2); font-weight: 700; font-size: 13px; } .subKind input:checked + span { background: var(--yellow); color: #2b1b62; } .subKind input:focus-visible + span { outline: 3px solid var(--pink); } #btnSubReport { font-size: 13px; white-space: nowrap; } /* караоке: ещё не прозвучавшие слова яркие и читаются заранее, прозвучавшие заливаются цветом */ .karaLine .kw, .karaLine .kw.done, .karaLine .kw.on { background-image: linear-gradient(90deg, var(--fill) var(--p, 0%), var(--text) var(--p, 0%)); } .karaLine.soon { color: var(--text); opacity: 1; } /* караоке: слова непрозрачные, прозвучавшее заливается жёлтым у всех */ .karaLine .kw, .kara.mine .karaLine .kw { opacity: 1; --fill: var(--yellow); } .karaLine .kw.on { filter: drop-shadow(0 0 10px rgba(255, 200, 40, .35)); } /* громкость и «на весь экран»: маленькие, в верхнем правом углу видео, чтобы не закрывать субтитры */ .gCtrl { top: 10px; bottom: auto; right: 10px; gap: 5px; padding: 3px 7px; } .gCtrl input[type="range"] { width: 56px; height: 14px; } .gVolIcon { font-size: 13px; } .gCtrl button { width: 24px; height: 24px; font-size: 13px; } /* выбор числа раундов: три кнопки вместо выпадающего списка */ .roundsSeg { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; } .roundsSeg span { margin-right: 4px; } .roundsSeg button { width: 44px; height: 44px; border-radius: 14px; border: 3px solid var(--outline); background: var(--surface2); color: var(--text); font: 800 18px var(--display); box-shadow: 0 3px 0 var(--outline); cursor: pointer; transition: transform .1s, box-shadow .1s; } .roundsSeg button:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 5px 0 var(--outline); } .roundsSeg button.on { background: var(--yellow); color: #2b1b62; } .roundsSeg button:disabled { cursor: default; } .roundsSeg button:disabled:not(.on) { opacity: .5; } /* надпись DispyDubbing: плотная тень снизу, как у заголовков, и мягкая вокруг, чтобы не терялась на фоне */ .logoText { text-shadow: 0 2px 0 var(--outline), 0 3px 0 var(--outline), 0 5px 12px rgba(0, 0, 0, .4); } .hero { grid-template-areas: "title title" "kick kick" "lead lead" "join art"; } @media (max-width: 920px) { .hero { grid-template-areas: "title" "kick" "lead" "join" "art"; } } /* «Как играть» на главной в тех же цветах, что и карточка входа слева */ .heroArt .tutorial { background: var(--surface); color: var(--text); } .heroArt .tutArt { color: var(--muted); } .heroArt .tutSlide p { color: var(--muted); } .heroArt .tutDot { background: rgba(127, 110, 200, .35); } .heroArt .tutArrow { background: var(--surface2); color: var(--text); } .heroArt .tutArrow:hover { background: var(--yellow); color: #2b1b62; } /* подзаголовок под «Озвучь аниме» в виде жёлтой плашки */ .heroText .lead { justify-self: center; max-width: 100%; margin: 4px 0 0; padding: 7px 18px; border-radius: 999px; background: var(--yellow); color: #2b1b62; border: 3px solid var(--outline); box-shadow: 0 3px 0 var(--outline); font-weight: 800; font-size: 15px; line-height: 1.35; } @media (max-width: 920px) { .heroText .lead { border-radius: 18px; padding: 8px 14px; font-size: 14px; } } /* логотип-наклейка: название в фиолетовой плашке с обводкой и тенью, маскот выглядывает слева */ .top .logo { position: relative; gap: 0; padding: 0; } .top .logoMark { position: relative; z-index: 2; height: 52px; margin: -8px -14px -8px -4px; transform: rotate(-8deg); filter: drop-shadow(0 3px 0 var(--outline)); transition: transform .2s; } .top .logo:hover .logoMark { transform: rotate(4deg) scale(1.06); } .top .logoText { display: inline-block; padding: 6px 14px 7px 20px; border-radius: 14px; background: #6b3cf0; color: #fff; border: 3px solid var(--outline); box-shadow: 0 4px 0 var(--outline); font-size: 21px; letter-spacing: -.3px; text-shadow: 0 2px 0 var(--outline); transform: rotate(-2deg); } .top .logoText b, [data-theme="light"] .top .logoText b { color: var(--yellow); } @media (max-width: 520px) { .top .logoMark { height: 40px; margin-right: -12px; } .top .logoText { font-size: 16px; padding: 4px 10px 5px 16px; } } /* лента паков на главной: обложки едут по кругу, при наведении останавливаются */ .homePacks { max-width: 1040px; margin: 14px auto 0; display: flex; align-items: center; gap: 12px; } .hpLabel { flex: none; padding: 6px 12px; border-radius: 12px; background: var(--yellow); color: #2b1b62; border: 3px solid var(--outline); box-shadow: 0 3px 0 var(--outline); font-weight: 900; font-size: 13px; transform: rotate(-3deg); } .hpView { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .hpTrack { display: flex; gap: 12px; width: max-content; padding: 4px 0 8px; animation: hpRun 40s linear infinite; } .homePacks:hover .hpTrack { animation-play-state: paused; } @keyframes hpRun { to { transform: translateX(calc(-50% - 6px)); } } .hpItem { display: flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: 16px; background: var(--surface); border: 3px solid var(--outline); box-shadow: 0 4px 0 var(--outline); } .hpItem img { width: 64px; height: 40px; object-fit: cover; border-radius: 10px; flex: none; background: var(--surface2); } .hpItem span { display: flex; flex-direction: column; line-height: 1.2; } .hpItem b { font-size: 14px; white-space: nowrap; } .hpItem small { color: var(--muted); font-size: 12px; font-weight: 700; } @media (prefers-reduced-motion: reduce) { .hpTrack { animation: none; } } @media (max-width: 520px) { .hpLabel { display: none; } } @media (min-width: 921px) and (max-height: 800px) { .homePacks { margin-top: 6px; } .hpTrack { padding-bottom: 6px; } .hpItem img { width: 52px; height: 32px; } .hpItem { padding: 4px 12px 4px 4px; } } @media (min-width: 921px) and (max-height: 720px) { .homePacks { display: none !important; } } /* пустой ник: поле подсвечивается и вздрагивает */ #nameInput.need { border-color: var(--pink); box-shadow: 0 0 0 3px rgba(255, 61, 139, .35); animation: needShake .35s; } @keyframes needShake { 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } } /* индикатор микрофона на видео во время записи */ .gMic { position: absolute; left: 10px; top: 10px; z-index: 3; display: flex; align-items: center; gap: 6px; padding: 4px 9px; border-radius: 999px; background: rgba(0, 0, 0, .55); backdrop-filter: blur(6px); color: #fff; font-size: 13px; } .gMic b { font-size: 14px; line-height: 1; } .gMicBar { width: 54px; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .2); overflow: hidden; } .gMicBar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #7bd88f, var(--yellow)); transition: width .06s linear; } .gMic small { font-weight: 800; } .gMic small:empty { display: none; } .gMic.quiet, .gMic.off { background: rgba(220, 40, 90, .8); } .gMic.off .gMicBar { display: none; } /* проверка микрофона в лобби */ .lobbyMic { margin: 12px 0; padding: 12px 14px; border-radius: 16px; border: 2.5px solid var(--outline); background: var(--surface2); } .lobbyMic.ok { border-color: var(--ok); } .lmHead { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .lobbyMic .meter { margin: 10px 0 6px; } .lobbyMic p { margin: 0 0 8px; } .lobbyMic.ok p { margin: 0; } .micMark { font-size: 12px; } .micMark.off { opacity: .55; } /* донат: карточка на итогах и всплывашка после готового ролика */ .donateCard { display: flex; align-items: center; gap: 14px; margin: 16px 0 4px; padding: 14px 16px; border-radius: 18px; border: 2.5px solid var(--outline); background: var(--surface2); } .donateCard > div { display: flex; flex-direction: column; gap: 2px; flex: 1; text-align: left; } .dcIcon { font-size: 30px; } @media (max-width: 560px) { .donateCard { flex-wrap: wrap; } .donateCard .btn { width: 100%; } } .donatePop { position: fixed; right: 18px; bottom: 18px; z-index: 50; display: flex; flex-direction: column; gap: 6px; max-width: 300px; padding: 14px 16px; border-radius: 18px; border: 2.5px solid var(--outline); background: var(--surface); box-shadow: 0 6px 0 var(--outline); animation: dpIn .35s cubic-bezier(.3, 1.4, .5, 1); } .donatePop span { font-size: 14px; color: var(--muted); } .donatePop .btn { align-self: flex-start; } .dpClose { position: absolute; top: 6px; right: 8px; border: 0; background: none; color: var(--muted); font-size: 14px; cursor: pointer; } @keyframes dpIn { from { transform: translateY(30px); opacity: 0; } } @media (max-width: 560px) { .donatePop { left: 12px; right: 12px; bottom: 12px; max-width: none; } } /* топ донатеров в карточке на итогах */ .donateCard { flex-wrap: wrap; } .donorsTop { flex-basis: 100%; padding-top: 10px; border-top: 2px dashed rgba(127, 110, 200, .35); text-align: left; } .donorsTop ol { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 16px; } .donorsTop li { display: flex; align-items: center; gap: 8px; font-size: 14px; } .donorsTop li b { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* админка: таблица донатеров */ .donorAdd { gap: 8px; flex-wrap: wrap; margin: 8px 0; } .donorAdd input { flex: 1; min-width: 120px; } .donorTable { width: 100%; border-collapse: collapse; margin-top: 6px; } .donorTable td { padding: 6px 8px; border-top: 1px solid rgba(127, 110, 200, .25); }