/* ===== Экран ведущего: старинный хоррор ===== */ :root { --serif: 'Cormorant Garamond', 'Georgia', 'Times New Roman', serif; --sc: 'Cormorant SC', 'Cormorant Garamond', Georgia, serif; --gold2: #b8913f; --paper: #1a1210; } body { overflow: hidden; font-size: clamp(14px, 1.1vw, 22px); } #app { position: relative; z-index: 5; height: 100vh; display: grid; grid-template-rows: auto auto 1fr auto; transition: filter .05s; } header { display: flex; align-items: center; gap: 1em; padding: 1.3em 1.6em .4em; position: relative; z-index: 53; } header .logo { font-size: 1.6em; } header .info { color: var(--gold2); font-family: var(--sc); font-size: 1.15em; letter-spacing: .12em; text-transform: lowercase; } header .sp { flex: 1; } header button { background: #0a0507b0; color: #b8a58a; border: 1px solid #5a4420; border-radius: 2px; padding: .4em .9em; font-family: var(--sc); font-size: .95em; letter-spacing: .05em; } header button:hover { color: var(--bone); border-color: var(--gold2); box-shadow: 0 0 12px #b8913f44; } #clock { font-family: var(--sc); font-weight: 700; font-size: 2.6em; min-width: 1.6em; text-align: center; color: var(--bone); text-shadow: 0 0 14px #000; line-height: 1; } #clock.hot { color: var(--blood2); animation: shake .15s infinite; text-shadow: 0 0 20px var(--blood2); } #timerbar { height: 3px; margin: 0 1.6em; background: #ffffff0a; overflow: hidden; } #timerbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #5a4420, var(--gold2) 60%, var(--blood2)); box-shadow: 0 0 10px var(--gold2); } main { position: relative; min-height: 0; overflow-y: auto; overflow-x: hidden; display: flex; padding: .8em 2.5em; } .stage { margin: auto; width: min(1400px, 100%); display: flex; flex-direction: column; align-items: center; gap: .9em; text-align: center; } /* старинная карточка с золотой рамкой */ .card { position: relative; background: radial-gradient(ellipse at 50% 0%, #2a1b16f2, #120b0af2 70%); border: 1px solid #6a4f22; box-shadow: inset 0 0 0 5px #0b0606, inset 0 0 0 6px #4a3618, inset 0 0 60px #000, 0 20px 60px #000c; padding: 1.4em 2.2em 1.6em; border-radius: 3px; max-width: 1150px; width: 100%; } .card::before, .card::after { content: '❦'; position: absolute; top: .25em; color: var(--gold2); font-size: 1.4em; opacity: .8; } .card::before { left: .45em; transform: scaleX(-1); } .card::after { right: .45em; } .card.thin { padding: .7em 1.6em; max-width: 1000px; } .card.thin::before, .card.thin::after { display: none; } /* рассказчик */ #bottom { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 1.2em; padding: 0 1.6em .6em; align-items: end; } #mortWrap { grid-row: 1 / span 2; align-self: end; } #mortimer { width: 11em; height: 13.5em; display: block; filter: drop-shadow(0 0 25px #000) drop-shadow(0 0 40px #e3142a22); } #mortimer .head { transform-origin: 100px 210px; animation: sway 7s ease-in-out infinite; } #mortimer .jaw { transition: transform .05s linear; } #mortimer .pupil { transform-box: fill-box; transform-origin: center; animation: blink 6s infinite; } @keyframes sway { 0%,100% { transform: rotate(-2.5deg) translateY(0); } 50% { transform: rotate(2.5deg) translateY(3px); } } @keyframes blink { 0%,46%,50%,100% { transform: scaleY(1); } 48% { transform: scaleY(.08); } } #subs { margin-bottom: .5em; background: linear-gradient(90deg, #0b0606ee, #0b0606b8 80%, transparent); border-left: 2px solid var(--gold2); padding: .7em 1.3em; min-height: 4em; } #subs small { display: block; font-family: var(--sc); color: var(--gold2); letter-spacing: .2em; font-size: .85em; margin-bottom: .1em; } #subtext { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1.75em; line-height: 1.25; color: #efe4cf; text-shadow: 0 0 8px #000; } #subtext .cur { display: inline-block; width: .4em; height: .9em; background: var(--blood2); vertical-align: -.05em; animation: blink 1s steps(1) infinite; margin-left: .1em; } #waiting { position: fixed; right: 1.6em; bottom: 1.2em; z-index: 60; font-family: var(--sc); color: var(--gold2); opacity: 0; transition: opacity .4s; letter-spacing: .1em; } #waiting.on { opacity: .8; } footer { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: .9em; padding: .3em 0 .2em; } .pl { display: flex; flex-direction: column; align-items: center; gap: .25em; min-width: 5.3em; position: relative; } .pl .ava { font-size: 1.45em; } .pl .nm { font-weight: 700; max-width: 7em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pl .mn { color: var(--gold); font-size: .85em; } .pl.off { opacity: .35; } .pl .chk { position: absolute; top: -.3em; right: .6em; background: var(--bone); color: #000; border-radius: 50%; width: 1.4em; height: 1.4em; display: grid; place-items: center; font-weight: 900; font-size: .8em; } .ava.beast { border-color: #7fbf4f; box-shadow: 0 0 12px #7fbf4f88; } /* типографика */ .kicker { font-family: var(--sc); font-weight: 700; text-transform: lowercase; letter-spacing: .3em; color: var(--gold2); font-size: 1.25em; } .kicker.red { color: var(--blood2); } h1.big { font-family: var(--title); font-weight: 400; font-size: 4.6em; margin: 0; line-height: 1.05; color: var(--blood2); text-shadow: 0 0 30px #e3142a55, 0 6px 0 #3a0005; } h2.q { font-family: var(--serif); font-weight: 700; font-size: 2.7em; margin: 0; line-height: 1.12; max-width: 1200px; color: #f3e8d2; text-shadow: 0 0 20px #000, 0 2px 0 #000; } h2.q .w { display: inline-block; animation: emerge .6s ease-out both; } .lead { font-family: var(--serif); font-size: 1.5em; } .small { font-size: .95em; } .note { font-family: var(--serif); font-style: italic; font-size: 1.35em; color: #b8a58a; } .rules { font-family: var(--serif); font-size: 1.7em; line-height: 1.3; } /* варианты ответов — латунные таблички */ .opts { display: grid; grid-template-columns: 1fr 1fr; gap: .8em; width: 100%; max-width: 1200px; } .opts.six { grid-template-columns: 1fr 1fr 1fr; } .opt { position: relative; background: linear-gradient(170deg, #241712, #0f0907); border: 1px solid #6a4f22; box-shadow: inset 0 0 0 3px #0b0606, inset 0 0 0 4px #3a2a12, inset 0 0 30px #000, 0 8px 20px #000a; border-radius: 2px; padding: .8em 1.1em; font-family: var(--serif); font-weight: 700; font-size: 1.7em; text-align: left; display: flex; align-items: center; gap: .7em; min-height: 2.6em; animation: emerge .6s ease-out both; transition: all .5s; color: #eadfc8; } .opt .L { font-family: var(--sc); color: var(--gold2); font-size: 1.05em; width: 1.2em; flex: none; } .opt.right { border-color: #e9dfcc; background: linear-gradient(170deg, #4a3d2a, #1c150e); box-shadow: 0 0 34px #e9dfcc55, inset 0 0 20px #000; transform: scale(1.03); } .opt.wrong { opacity: .25; filter: grayscale(1) blur(.5px); transform: scale(.97) rotate(-.4deg); } .opt .who { margin-left: auto; display: flex; gap: .2em; font-size: .55em; flex-wrap: wrap; justify-content: flex-end; } .banner { font-family: var(--serif); font-size: 1.45em; padding: .35em 1.2em; border-top: 1px solid #6a4f22; border-bottom: 1px solid #6a4f22; background: linear-gradient(90deg, transparent, #0b0606dd, transparent); animation: emerge .8s .6s ease-out both; } .banner.red { color: #ff9a9a; border-color: #8a0712; } /* правила */ .rulelist { display: flex; flex-direction: column; gap: .45em; margin-top: .7em; text-align: left; } .rule { display: flex; gap: .8em; align-items: center; font-family: var(--serif); font-size: 1.55em; animation: emerge .7s ease-out both; } .rule .ri { width: 1.6em; text-align: center; font-size: 1.1em; } .rules-card h1.big { font-size: 3.6em; } /* лобби */ .lobby { display: grid; grid-template-columns: 1fr auto; gap: 3em; align-items: center; text-align: left; width: 100%; } .lobby-card { max-width: 900px; } .lobby h1.big { font-size: 3.2em; } .lobby-card { padding: 1em 1.8em 1.2em; } .lobby .lead { font-size: 1.3em; margin: .4em 0; } .url { font-family: var(--serif); font-size: 2.2em; font-weight: 700; color: #f3e8d2; word-break: break-all; text-shadow: 0 0 14px #b8913f66; } .keytag { position: relative; background: #d9ccb3; padding: 16px 16px 40px; border-radius: 10px 10px 40px 40px; transform: rotate(3deg); box-shadow: 0 20px 50px #000, inset 0 0 30px #8a6f4a; color: #2a1a10; text-align: center; animation: floaty 5s ease-in-out infinite; } .keytag::before { content: ''; position: absolute; top: -26px; left: 50%; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; border: 5px solid #8a6f4a; } .keytag .qr { width: 240px; height: 240px; display: grid; place-items: center; background: #fff; } .keytag .qr img { width: 228px; height: 228px; image-rendering: pixelated; } .keytag .room { font-family: var(--sc); font-weight: 700; font-size: 1.5em; margin-top: 6px; } .start { font-family: var(--title); background: linear-gradient(#8a0614, #4a0008); color: #fff; border: 1px solid #b8913f; border-radius: 2px; padding: .35em 1.6em; font-size: 2em; box-shadow: 0 0 40px #e3142a55, inset 0 0 0 3px #2a0005; transition: transform .1s; margin-top: .4em; } .start:hover { transform: scale(1.04) rotate(-1deg); } .start:disabled { opacity: .35; box-shadow: none; } .guestbook { display: flex; flex-wrap: wrap; gap: 1em; margin: .6em 0; min-height: 3em; font-family: var(--serif); font-size: 1.2em; } .guestbook .x { position: absolute; top: -.4em; right: .4em; background: #000c; border: 1px solid var(--line); color: var(--muted); border-radius: 50%; width: 1.5em; height: 1.5em; font-size: .75em; } /* испытания */ .victims { display: flex; gap: 1.4em; justify-content: center; flex-wrap: wrap; } .victims .pl .ava { font-size: 2em; box-shadow: 0 0 30px #e3142a66; } .victims .pl::before { content: '⛓'; position: absolute; top: -.6em; left: 50%; transform: translateX(-50%); font-size: 1.3em; filter: grayscale(1); } .killtitle { font-size: 5em !important; animation: shake .2s 4, emerge .8s ease-out both; } .doors { display: flex; gap: 1em; justify-content: center; flex-wrap: wrap; perspective: 900px; } .door { width: 6em; height: 9.5em; position: relative; border-radius: 3em 3em .3em .3em; background: #000; box-shadow: 0 0 0 4px #2a1810, 0 10px 30px #000; } .door .leaf { position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(90deg, #3a2014 0 10px, #2e1910 10px 12px), #3a2014; border: 3px solid #5a3624; display: flex; flex-direction: column; align-items: center; justify-content: center; transform-origin: left center; transition: transform 1.2s cubic-bezier(.5,0,.3,1); box-shadow: inset 0 0 25px #000; } .door .leaf .n { font-family: var(--sc); font-weight: 700; font-size: 2.6em; color: var(--gold); } .door .leaf::after { content: ''; position: absolute; right: 9%; top: 64%; width: .6em; height: .6em; border-radius: 50%; background: var(--gold); } .door .inside { position: absolute; inset: 0; border-radius: inherit; display: grid; place-items: center; font-size: 2.3em; } .door.trap .inside { background: radial-gradient(#5a0008, #000 75%); } .door.trap .inside::before { content: '👁 👁'; font-size: .7em; filter: drop-shadow(0 0 8px red); animation: jitter .2s infinite; } .door.safe .inside { background: radial-gradient(#1a1a20, #000 75%); } .door.open .leaf { transform: rotateY(-105deg); } .door .on { position: absolute; bottom: -2.8em; left: 0; right: 0; display: flex; flex-wrap: wrap; gap: .15em; justify-content: center; } .door .on .ava { font-size: .8em; } .doors.res { margin-bottom: 2.6em; } .bars { display: flex; flex-direction: column; gap: .7em; width: min(900px, 100%); } .bar { display: flex; align-items: center; gap: 1em; font-family: var(--serif); font-size: 1.5em; } .bar .bn { width: 6em; text-align: left; } .bar .track { flex: 1; height: .9em; background: #ffffff0d; overflow: hidden; box-shadow: inset 0 0 8px #000; } .bar .track i { display: block; height: 100%; background: linear-gradient(90deg, #4a0007, var(--blood2)); transition: width .3s; } .nums { display: flex; gap: 1em; justify-content: center; } .num { width: 5em; min-height: 7em; background: linear-gradient(#1f130f, #070304); border: 1px solid #6a4f22; display: flex; flex-direction: column; align-items: center; padding: .6em; gap: .4em; box-shadow: inset 0 0 20px #000; } .num .n { font-family: var(--sc); font-weight: 700; font-size: 3em; color: var(--bone); } .num.trap { border-color: var(--blood2); background: radial-gradient(#5a0008, #0a0204); box-shadow: 0 0 30px #e3142a66; } .num .on { display: flex; flex-wrap: wrap; gap: .2em; justify-content: center; } .num .on .ava { font-size: .8em; } .liftbox { display: flex; gap: 3em; justify-content: center; align-items: flex-end; } .lift, .stairs { width: 15em; min-height: 11em; border: 1px solid #6a4f22; background: repeating-linear-gradient(90deg, #1a120c 0 14px, #0f0a07 14px 16px); display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 1em; box-shadow: inset 0 0 40px #000; font-size: 1.2em; } .lift .cab, .stairs .cab { font-size: 3em; display: flex; flex-wrap: wrap; justify-content: center; gap: .1em; } .lift .cab .ava, .stairs .cab .ava { font-size: .45em; } .lift .cap, .stairs .cap { font-family: var(--sc); color: var(--gold2); letter-spacing: .1em; } .lift.broke { border-color: var(--blood2); animation: shake .15s 6; background: radial-gradient(#3a0006, #000); } .memseq { display: flex; gap: .4em; justify-content: center; font-size: 4.5em; } .memseq span { animation: emerge .4s ease-out both; filter: drop-shadow(0 0 14px #b8913f88); } .memseq.hidden span { opacity: .3; } .votes { display: flex; gap: 1.6em; justify-content: center; flex-wrap: wrap; } .vote { display: flex; flex-direction: column; align-items: center; gap: .3em; font-family: var(--serif); font-size: 1.4em; } .vote .ava { font-size: 1.8em; } .vote .vn { color: var(--blood2); font-size: 1.3em; min-height: 1.3em; letter-spacing: .1em; } .verdict { display: flex; gap: 3em; font-family: var(--sc); font-size: 2.2em; } .verdict > div { display: flex; flex-direction: column; align-items: center; } .verdict b { font-size: 1.8em; } .verdict .vk { color: var(--blood2); } .verdict .vs { color: var(--bone); } .reflex { font-family: var(--title); font-size: 6em; color: #5a4a40; letter-spacing: .05em; } .reflex.go { color: var(--blood2); text-shadow: 0 0 60px var(--blood2); animation: shake .1s infinite; } .deaths { display: flex; gap: .5em 1.6em; justify-content: center; flex-wrap: wrap; font-family: var(--serif); font-size: 1.45em; } .deaths .d { display: flex; align-items: center; gap: .5em; } .deaths .d.dead { color: var(--blood2); } .deaths .d.dead .ava { animation: ghostout 1.4s ease-out both; } .deaths .d.live { color: var(--bone); } .deaths .d.beast { color: #a9e07f; } /* сундуки и предметы */ .chests { display: flex; gap: 3em; justify-content: center; margin: .5em 0; } .chest { width: 9em; height: 7em; position: relative; animation: emerge .6s ease-out both; } .chest .box { position: absolute; left: 0; right: 0; bottom: 0; height: 60%; background: repeating-linear-gradient(90deg, #4a2b1c 0 18px, #3a2014 18px 20px); border: 3px solid #8a6a2a; box-shadow: inset 0 0 20px #000, 0 10px 30px #000; } .chest .lid { position: absolute; left: -3%; right: -3%; top: 8%; height: 38%; background: linear-gradient(#5a3624, #3a2014); border: 3px solid #8a6a2a; border-radius: 50% 50% 0 0 / 70% 70% 0 0; } .chest .box::after { content: ''; position: absolute; left: 50%; top: -6px; width: 16px; height: 22px; margin-left: -8px; background: var(--gold2); border-radius: 3px; } .chest.shake { animation: emerge .6s ease-out both, jitter .25s infinite; } .itemgrid { display: flex; flex-wrap: wrap; gap: 1em; justify-content: center; } .item { width: 11em; background: linear-gradient(#22150f, #0d0806); border: 1px solid #6a4f22; padding: .8em .6em; display: flex; flex-direction: column; align-items: center; gap: .2em; animation: emerge .7s ease-out both; box-shadow: inset 0 0 25px #000; } .item.good { border-color: #b8913f; } .item.bad { border-color: #8a0712; box-shadow: inset 0 0 25px #000, 0 0 20px #8a071255; } .item .ic { font-size: 2.6em; } .item .in { font-family: var(--sc); font-weight: 700; font-size: 1.15em; color: var(--bone); } .item.bad .in { color: #ff8a8a; } .item .id { font-family: var(--serif); font-size: .95em; color: #b8a58a; line-height: 1.15; } .item .fx { font-family: var(--sc); color: #a9e07f; } .item .fx.red { color: var(--blood2); } /* финал */ .race { width: min(1250px, 100%); display: flex; flex-direction: column; gap: .4em; } .lane { display: grid; grid-template-columns: 8em 1fr 3em; align-items: center; gap: .8em; } .lane .nm { text-align: right; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cells { position: relative; height: 2.2em; display: grid; gap: 3px; } .cells span { background: linear-gradient(#1a0c10, #0d0608); box-shadow: inset 0 0 6px #000; } .cells span.exit { background: radial-gradient(#f4e7c4, #c9a24a 40%, #3a2a10); box-shadow: 0 0 25px #f4e7c4aa; } .runner, .hunter { position: absolute; top: 50%; transform: translate(-50%, -50%); transition: left 1.2s cubic-bezier(.3,1.3,.5,1); } .hunter { font-size: 1.5em; filter: drop-shadow(0 0 8px red); } .race.tight .cells { height: 1.6em; } .race.tight .runner { font-size: .75em; } .mv { color: var(--bone); font-weight: 900; } .mv.neg { color: var(--blood2); } .stage.compact { gap: .6em; } .stage.compact h2.q { font-size: 2.1em; } .stage.compact .opt { font-size: 1.3em; min-height: 2.1em; padding: .5em 1em; } .ranking { display: flex; flex-direction: column; gap: .4em; font-family: var(--serif); font-size: 1.4em; align-items: center; margin: .6em 0; } .ranking div { display: flex; gap: .8em; align-items: center; } .winner .ava { font-size: 4.5em; box-shadow: 0 0 60px #f4e7c488; } /* вход */ #gate { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: radial-gradient(#1a0508, #000 70%); cursor: pointer; text-align: center; } #gate h1 { font-family: var(--title); font-weight: 400; font-size: 6em; color: var(--blood2); margin: 0; text-shadow: 0 0 40px #e3142a88; animation: emerge 2s ease-out both; } #gate p { font-family: var(--serif); font-style: italic; font-size: 1.6em; color: #b8a58a; animation: emerge 2s 1s ease-out both; } #gate .enter { font-family: var(--sc); font-weight: 700; letter-spacing: .15em; font-size: 2em; color: var(--bone); animation: emerge 2s 1.6s ease-out both; margin-top: 1.4em; } /* скример */ #scare { position: fixed; inset: 0; z-index: 90; display: none; place-items: center; background: radial-gradient(#e3142a, #2a0004 60%, #000); pointer-events: none; } #scare.on { display: grid; animation: scareBg 1.4s linear both; } #scare svg { width: 70vh; height: 85vh; animation: scareFace 1.4s cubic-bezier(.1,1.6,.4,1) both; filter: contrast(1.4) drop-shadow(0 0 60px #000); } @keyframes scareFace { 0% { transform: scale(.2) rotate(-8deg); } 10% { transform: scale(1.35) rotate(4deg); } 20% { transform: scale(1.2) rotate(-3deg) translateX(-10px); } 30% { transform: scale(1.3) rotate(2deg) translateX(12px); } 40% { transform: scale(1.25) rotate(-2deg); } 75% { transform: scale(1.4); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } } @keyframes scareBg { 0% { opacity: 1; filter: invert(0); } 6% { filter: invert(1); } 10% { filter: invert(0); } 16% { filter: invert(1); } 20% { filter: invert(0); } 80% { opacity: 1; } 100% { opacity: 0; } } /* настройки */ #settings { position: fixed; top: 4.2em; right: 1.4em; z-index: 80; background: #0b0606f4; border: 1px solid #6a4f22; box-shadow: inset 0 0 0 4px #0b0606, inset 0 0 0 5px #3a2a12, 0 20px 60px #000; padding: 1.2em 1.4em; width: 24em; display: none; } #settings.on { display: block; } #settings h3 { margin: 0 0 .6em; font-family: var(--sc); font-weight: 700; color: var(--gold2); letter-spacing: .15em; } #settings label { display: block; margin: .7em 0 .3em; color: #b8a58a; font-size: .9em; } #settings select, #settings input[type=range] { width: 100%; } #settings select { background: var(--panel); color: var(--text); border: 1px solid var(--line); padding: .4em; font: inherit; } #settings .row { display: flex; gap: .6em; align-items: center; margin-top: .8em; } #settings button { background: var(--panel); color: var(--text); border: 1px solid #6a4f22; padding: .45em .8em; } #settings .st { font-size: .8em; color: var(--muted); margin-top: .7em; line-height: 1.4; } /* ---------- 3D-режим ---------- */ #world { display: none; } body.three #world { display: block; position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 0; } body.three { background: #000; } body.three .fog, body.three .fog2, body.three #mortWrap, body.three footer, body.three #grain { display: none !important; } body.three main { align-items: flex-start; } body.three .stage { margin: 0 auto; transition: opacity .8s, transform .8s; } body.three .stage.fadeout { opacity: 0; transform: translateY(-30px) scale(.97); pointer-events: none; } body.three .race { display: none; } body.three #bottom { grid-template-columns: 1fr; padding-left: 20%; } body.three .lobby .guestbook { display: none; } body.three h1.big { font-size: 3.4em; } body.three .lobby { align-items: start; } body.three .killtitle { font-size: 4.4em !important; } body.three h2.q { font-size: 2.3em; } body.three .opt { font-size: 1.45em; min-height: 2.2em; padding: .55em 1em; } body.three .stage > .card, body.three .lobby .card { background: radial-gradient(ellipse at 50% 0%, #2a1b16e8, #120b0ae8 70%); } body.three .doors .door { width: 5em; height: 8em; } body.three .stage { background: radial-gradient(ellipse at 50% 35%, #050203a8, transparent 70%); } .roomcode { font-family: var(--sc); font-weight: 700; font-size: 5em; letter-spacing: .3em; color: var(--bone); line-height: 1; margin: .1em 0 .2em; text-shadow: 0 0 24px #e3142a88; } /* ---------- 3D: компактные таблички, чтобы было видно персонажей ---------- */ body.three main { padding: .4em 2em; } body.three .stage { gap: .45em; max-height: 44vh; overflow: hidden; width: min(1250px, 100%); padding: .2em 0 .6em; background: none; } body.three .stage::before { content: ''; position: absolute; inset: -1em -6em auto; height: calc(100% + 2em); background: radial-gradient(ellipse at 50% 30%, #000000c0, transparent 72%); z-index: -1; pointer-events: none; } body.three .stage { position: relative; } body.three .kicker { font-size: 1em; } body.three h1.big { font-size: 2.6em; } body.three .killtitle { font-size: 3em !important; } body.three h2.q { font-size: 1.85em; max-width: 1100px; } body.three .opts { grid-template-columns: repeat(4, 1fr); gap: .5em; } body.three .opts.six { grid-template-columns: repeat(3, 1fr); } body.three .opt { font-size: 1.15em; min-height: 1.9em; padding: .4em .7em; gap: .45em; } body.three .opt .who { font-size: .7em; } body.three .banner, body.three .note { font-size: 1.05em; padding: .2em 1em; } body.three .card { padding: .7em 1.4em .8em; } body.three .rules-card { max-width: 980px; } body.three .rules-card h1.big { font-size: 2.2em; } body.three .rulelist { display: grid; grid-template-columns: 1fr 1fr; gap: .25em 1.6em; margin-top: .3em; } body.three .rule { font-size: 1.05em; } body.three .rules { font-size: 1.2em; } body.three .victims .pl .ava { font-size: 1.3em; } body.three .victims { gap: .8em; } body.three .bars { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: .3em 1.4em; width: 100%; } body.three .bar { font-size: 1em; gap: .5em; } body.three .bar .bn { width: auto; } body.three .bar .track { flex: none; width: 6em; } body.three .deaths { font-size: 1.05em; gap: .3em 1.2em; } body.three .deaths .ava { font-size: .8em; } body.three .doors .door { width: 3.6em; height: 5.6em; } body.three .door .leaf .n { font-size: 1.8em; } body.three .doors.res { margin-bottom: 2em; } body.three .nums .num { width: 3.6em; min-height: 4.6em; padding: .3em; } body.three .num .n { font-size: 2em; } body.three .lift, body.three .stairs { width: 10em; min-height: 6.5em; font-size: 1em; } body.three .memseq { font-size: 3em; } body.three .verdict { font-size: 1.5em; } body.three .vote { font-size: 1.1em; } body.three .vote .ava { font-size: 1.3em; } body.three .reflex { font-size: 4em; } body.three .chests { gap: 1.5em; } body.three .chest { width: 6em; height: 4.6em; } body.three .itemgrid { gap: .5em; } body.three .item { width: 8.5em; padding: .4em; } body.three .item .ic { font-size: 1.8em; } body.three .item .id { font-size: .8em; } body.three .end-card .ranking { font-size: 1.1em; } body.three #subs { max-width: 62em; padding: .45em 1.1em; min-height: 0; } body.three #subtext { font-size: 1.35em; } body.three #bottom { padding-left: 22%; padding-right: 10%; } body.three .stage:has(.lobby), body.three .stage:has(.lobby2), body.three .stage:has(.end-card) { max-height: none; overflow: visible; } /* ---------- паутина, пауки, туман ---------- */ #ambient { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 4; pointer-events: none; } #lowfog { position: fixed; left: 0; right: 0; bottom: 0; height: 30vh; z-index: 3; pointer-events: none; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 55%); mask-image: linear-gradient(transparent, #000 55%); } #lowfog i { position: absolute; bottom: -8vh; width: 70vw; height: 30vh; border-radius: 50%; background: radial-gradient(ellipse at center, #b8b0c03a, #8a80901a 45%, transparent 70%); filter: blur(14px); animation: fogdrift linear infinite; } #lowfog i:nth-child(1) { left: -20vw; animation-duration: 46s; } #lowfog i:nth-child(2) { left: 25vw; animation-duration: 63s; animation-delay: -20s; bottom: -12vh; opacity: .8; } #lowfog i:nth-child(3) { left: 60vw; animation-duration: 54s; animation-delay: -35s; } #lowfog i:nth-child(4) { left: 5vw; animation-duration: 75s; animation-delay: -50s; bottom: -15vh; opacity: .6; } @keyframes fogdrift { 0% { transform: translateX(-25vw) scaleX(1); } 50% { transform: translateX(15vw) scaleX(1.25); } 100% { transform: translateX(-25vw) scaleX(1); } } /* ---------- 3D: вопросы и таблички справа, вся движуха слева ---------- */ body.three[data-phase] main { justify-content: flex-end; } body.three:not([data-phase=lobby]):not([data-phase=gameOver]) .stage { margin: 0 0 0 auto; width: min(36vw, 720px); max-height: calc(100vh - 7em); overflow-y: auto; align-items: stretch; text-align: left; background: linear-gradient(90deg, transparent, #050203d8 18%, #050203ee); padding: 1em 1.2em 1em 2.4em; border-right: 0; } body.three:not([data-phase=lobby]):not([data-phase=gameOver]) .stage::before { display: none; } body.three:not([data-phase=lobby]):not([data-phase=gameOver]) .opts, body.three:not([data-phase=lobby]):not([data-phase=gameOver]) .opts.six { grid-template-columns: 1fr; } body.three:not([data-phase=lobby]):not([data-phase=gameOver]) h2.q { font-size: 1.75em; text-align: left; } body.three:not([data-phase=lobby]):not([data-phase=gameOver]) .kicker { text-align: left; } body.three:not([data-phase=lobby]):not([data-phase=gameOver]) .rulelist { grid-template-columns: 1fr; } body.three:not([data-phase=lobby]):not([data-phase=gameOver]) .card { max-width: none; } body.three:not([data-phase=lobby]):not([data-phase=gameOver]) .doors, body.three:not([data-phase=lobby]):not([data-phase=gameOver]) .nums, body.three:not([data-phase=lobby]):not([data-phase=gameOver]) .victims, body.three:not([data-phase=lobby]):not([data-phase=gameOver]) .chests, body.three:not([data-phase=lobby]):not([data-phase=gameOver]) .itemgrid, body.three:not([data-phase=lobby]):not([data-phase=gameOver]) .deaths { justify-content: flex-start; flex-wrap: wrap; } body.three:not([data-phase=lobby]):not([data-phase=gameOver]) .deaths { flex-direction: column; } body.three:not([data-phase=lobby]):not([data-phase=gameOver]) .liftbox { gap: 1em; justify-content: flex-start; } body.three:not([data-phase=lobby]):not([data-phase=gameOver]) .verdict { gap: 1.5em; } body.three:not([data-phase=lobby]):not([data-phase=gameOver]) .banner { text-align: left; background: none; border: 0; border-left: 2px solid #6a4f22; } body.three:not([data-phase=lobby]):not([data-phase=gameOver]) .killtitle { font-size: 2.6em !important; } body.three #bottom { padding-left: 2%; padding-right: 39%; } body.three[data-phase=lobby] #bottom, body.three[data-phase=gameOver] #bottom { padding-right: 10%; } /* объявления лавки на экране ведущего */ #htoast { position: fixed; left: 1.6em; top: 5em; z-index: 55; display: flex; flex-direction: column; gap: .5em; max-width: 34em; pointer-events: none; } #htoast div { background: linear-gradient(90deg, #1a0c08f0, #0b0606d0); border-left: 3px solid #c9a24a; color: #f3e8d2; font-family: var(--serif); font-size: 1.25em; padding: .5em 1em; box-shadow: 0 10px 30px #000; animation: emerge .5s ease-out both; } #htoast div.bad { border-left-color: var(--blood2); } #htoast div .ic { font-size: 1.4em; margin-right: .3em; vertical-align: -.15em; } /* переход-лифт между этапами */ #lift { position: fixed; inset: 0; z-index: 85; pointer-events: none; display: none; } #lift.on { display: block; } #lift .ldoor { position: absolute; top: 0; bottom: 0; width: 50.5%; background: repeating-linear-gradient(90deg, #2a1d14 0 6px, #1c130d 6px 12px), #241810; box-shadow: inset 0 0 120px #000, 0 0 40px #000; border: 3px solid #5a4024; transition: transform .7s cubic-bezier(.7,0,.3,1); } #lift .ldoor::after { content: ''; position: absolute; inset: 6%; border: 2px solid #4a3418; box-shadow: inset 0 0 40px #000; background: repeating-linear-gradient(45deg, transparent 0 22px, #00000055 22px 26px); } #lift .l { left: 0; transform: translateX(-102%); } #lift .r { right: 0; transform: translateX(102%); } #lift.closed .l, #lift.closed .r { transform: translateX(0); } #lift .panel { position: absolute; left: 50%; top: 9%; transform: translateX(-50%); z-index: 2; width: 26em; text-align: center; opacity: 0; transition: opacity .3s .4s; } #lift.closed .panel { opacity: 1; } #lift .dial { width: 15em; height: 7.5em; margin: 0 auto; border-radius: 15em 15em 0 0; background: radial-gradient(ellipse at 50% 100%, #3a2a12, #120a06 70%); border: 3px solid #b8913f; border-bottom: 0; position: relative; overflow: hidden; box-shadow: 0 0 30px #b8913f44; } #lift .dial i { position: absolute; left: 50%; bottom: 0; width: 3px; height: 6.4em; background: #e3142a; transform-origin: 50% 100%; transform: rotate(-70deg); transition: transform 1.3s cubic-bezier(.3,.1,.3,1.2); box-shadow: 0 0 10px #e3142a; } #lift .dial span { position: absolute; font-family: var(--sc); color: #c9a24a; font-size: .9em; } #lift .where { font-family: var(--title); color: var(--blood2); font-size: 3.2em; margin-top: .4em; text-shadow: 0 0 30px #e3142a88; } #lift .sub { font-family: var(--serif); font-style: italic; color: #b8a58a; font-size: 1.4em; } #lift.shake .door { animation: liftshake .09s linear infinite; } @keyframes liftshake { 50% { margin-top: 2px; } } /* зритель: экран без управления */ body.watch #btnSkip, body.watch #btnLobby, body.watch #btnBrowser, body.watch #btnExit, body.watch [data-act], body.watch .guestbook .x { display: none !important; } .watchinfo b { color: #f3e8d2; } /* ---------- подписи над персонажами ---------- */ #tags { position: fixed; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; } .tag { position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: .25em .7em .3em; background: linear-gradient(#0b0606e6, #0b0606b0); border: 1px solid #6a4f22; border-radius: 3px; box-shadow: 0 4px 14px #000a; white-space: nowrap; font-family: var(--serif); will-change: transform; transition: opacity .3s; } .tag .ti { font-size: 1.15em; line-height: 1; } .tag .tn { font-weight: 700; font-size: 1.05em; text-shadow: 0 1px 0 #000; } .tag small { color: #c9b38a; font-size: .8em; } .tag .tc { position: absolute; top: -.6em; right: -.6em; background: var(--bone); color: #000; border-radius: 50%; width: 1.3em; height: 1.3em; display: grid; place-items: center; font-size: .8em; } .tag .x { pointer-events: auto; position: absolute; top: -.7em; left: -.7em; background: #000c; border: 1px solid var(--line); color: var(--muted); border-radius: 50%; width: 1.5em; height: 1.5em; font-size: .7em; cursor: pointer; } .tag.ghost { opacity: .65; border-color: #4fa3c9; } .tag.beast { border-color: #7fbf4f; } .tag.hit { animation: taghit .9s ease-out; } .tag.blessed { animation: tagbless 1.1s ease-out; } @keyframes taghit { 0%, 100% { box-shadow: 0 4px 14px #000a; } 20% { box-shadow: 0 0 40px #e3142a, 0 0 0 3px #e3142a; margin-left: -6px; } 40% { margin-left: 6px; } 60% { margin-left: -3px; } } @keyframes tagbless { 0%, 100% { box-shadow: 0 4px 14px #000a; } 30% { box-shadow: 0 0 40px #f1d27a, 0 0 0 3px #f1d27a; } } .usefx { position: fixed; left: 0; top: 0; z-index: 57; font-size: 4em; pointer-events: none; margin: -.5em 0 0 -.5em; filter: drop-shadow(0 0 18px #fff8); } .usefx.bad { filter: drop-shadow(0 0 24px #e3142a); } .usefx.good { filter: drop-shadow(0 0 24px #f1d27a); } /* ---------- лобби ---------- */ .lobby2 { display: grid; grid-template-columns: 1fr auto; gap: 2.5em; width: 100%; align-items: start; text-align: left; } .lb-left { background: linear-gradient(100deg, #0b0606e8, #0b0606a0 75%, transparent); padding: 1.2em 1.6em 1em; border-left: 3px solid #8a6a2a; } .lb-title { font-size: 3.4em !important; margin: .1em 0 .3em !important; } .lb-steps { display: flex; flex-direction: column; gap: .7em; } .step { display: flex; gap: 1em; align-items: center; font-family: var(--serif); font-size: 1.45em; color: #e8dcc4; animation: emerge .7s ease-out both; } .step .snum { flex: none; width: 2em; height: 2em; border-radius: 50%; display: grid; place-items: center; font-family: var(--sc); font-weight: 700; color: #1a0f05; background: radial-gradient(circle at 35% 30%, #f6e0a0, #b8913f 55%, #5a4420); box-shadow: 0 0 14px #b8913f66, inset 0 -3px 6px #0006; } .step b.url { display: block; font-size: 1.25em; color: #fff3dc; letter-spacing: .02em; text-shadow: 0 0 16px #b8913f88; } .plates { display: flex; gap: .35em; margin-top: .25em; } .plate { font-family: var(--sc); font-weight: 700; font-size: 2.4em; width: 1.25em; height: 1.45em; display: grid; place-items: center; color: #2a1a08; background: linear-gradient(160deg, #f8e6b0, #c9a24a 45%, #8a6a2a 70%, #e8c870); border-radius: 4px; box-shadow: inset 0 0 0 2px #5a4020, inset 0 -6px 10px #0004, 0 6px 16px #000c, 0 0 24px #c9a24a44; text-shadow: 0 1px 0 #fff8; animation: plate .6s cubic-bezier(.2,1.6,.4,1) both; } @keyframes plate { from { transform: rotateX(90deg) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } } .lb-other { font-family: var(--serif); color: #b8a58a; margin-top: .9em; font-size: 1.1em; } .lb-other b { color: #f3e8d2; } .lb-right { display: flex; flex-direction: column; align-items: center; gap: 1em; } .lb-count { font-family: var(--sc); color: var(--gold2); font-size: 1.3em; letter-spacing: .1em; background: #0b0606c0; padding: .2em .9em; } .lb-count b { color: var(--bone); font-size: 1.3em; } .ledger { background: linear-gradient(#e9dcc0, #cbb88f); color: #2a1a10; padding: .8em 1.2em; min-width: 18em; box-shadow: 0 14px 40px #000, inset 0 0 40px #8a6f4a66; transform: rotate(-1.5deg); } .ledger .lh { font-family: var(--sc); font-weight: 700; display: flex; justify-content: space-between; border-bottom: 1px solid #8a6f4a; margin-bottom: .3em; } .ledger ol { margin: 0; padding-left: 1.4em; font-family: var(--serif); font-style: italic; font-size: 1.25em; } .ledger li { display: flex; align-items: center; gap: .5em; border-bottom: 1px dashed #8a6f4a88; padding: .15em 0; position: relative; } .ledger li .ava { font-size: .8em; } .ledger li.empty { color: #6a5a4a; } .ledger .x { margin-left: auto; background: none; border: 0; color: #8a0712; cursor: pointer; } body.three .lobby2 .keytag .qr { width: 200px; height: 200px; } body.three .lobby2 .keytag .qr img { width: 190px; height: 190px; } /* ---------- финал: шахматное поле ---------- */ .board { width: 100%; font-family: var(--serif); margin-top: .4em; } .brow { display: grid; grid-template-columns: 6.5em repeat(var(--cols), 1fr) 2.2em; align-items: center; } .brow .bn { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: .4em; text-align: right; font-size: .95em; } .brow.head .bc { text-align: center; font-family: var(--sc); color: var(--gold2); font-size: .8em; } .brow.head .bc.exit { font-size: 1em; } .sq { position: relative; aspect-ratio: 1; display: grid; place-items: center; box-shadow: inset 0 0 0 1px #0006; } .sq.l { background: #c9b48c; } .sq.d { background: #3a2618; } .sq.danger.l { background: #c96a5c; } .sq.danger.d { background: #5a1810; } .sq.exit { background: radial-gradient(#fff6d8, #c9a24a 55%, #6a4a12) !important; box-shadow: 0 0 18px #f4e7c4aa; } .sq .tok { font-style: normal; font-size: 1.05em; width: 1.5em; height: 1.5em; display: grid; place-items: center; border-radius: 50%; background: radial-gradient(#1a0c08, #000); border: 2px solid var(--c); box-shadow: 0 0 10px var(--c), 0 3px 6px #000; z-index: 2; transition: transform .6s cubic-bezier(.3,1.6,.5,1); } .sq .tok.ghost { opacity: .55; border-style: dashed; } .sq .tok.beast { box-shadow: 0 0 10px #7fbf4f; } .sq .hun { font-style: normal; position: absolute; font-size: 1.1em; filter: drop-shadow(0 0 6px red); z-index: 1; opacity: .9; } .brow .bm { text-align: center; } .blegend { display: flex; justify-content: space-between; color: #b8a58a; font-size: .85em; margin-top: .3em; } .blegend .lg { display: inline-block; width: .9em; height: .9em; vertical-align: -.1em; background: #5a1810; } body.three .race { display: none; } body.three .board { display: block; } /* ---------- антракт и гадалка ---------- */ .wares { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5em, 1fr)); gap: .6em; margin: .8em 0; } .ware { display: flex; flex-direction: column; align-items: center; background: linear-gradient(#22150f, #0d0806); border: 1px solid #6a4f22; padding: .5em .3em; animation: emerge .5s ease-out both; } .ware span { font-size: 2em; } .ware small { font-family: var(--serif); color: #c9b38a; font-size: .85em; text-align: center; } .oracle { display: flex; gap: 1.2em; align-items: flex-start; } .seer { flex: none; width: 9em; } .seersvg { width: 100%; filter: drop-shadow(0 0 30px #9b6be088); } .seersvg .ball { animation: ball 2.4s ease-in-out infinite; } .seersvg .aura { animation: ball 3s ease-in-out infinite; } .seersvg .eye { animation: blink 5s infinite; transform-box: fill-box; transform-origin: center; } @keyframes ball { 50% { opacity: .65; } } .offers { display: flex; flex-direction: column; gap: .4em; margin: .6em 0; } .offer { background: #140a1ccc; border: 1px solid #5a3a7a; padding: .4em .8em; font-family: var(--serif); font-size: 1.1em; } .offer .oi { font-size: 1.3em; margin-right: .3em; } .offer .op { color: #c9a0ff; font-weight: 700; } .offer small { display: block; color: #b8a5c8; } .obought { font-family: var(--serif); font-size: 1.05em; display: flex; flex-direction: column; gap: .2em; } /* ---------- лифт: ар-деко ---------- */ #lift .ldoor { position: absolute; top: 0; bottom: 0; width: 50.5%; transition: transform .75s cubic-bezier(.7,0,.3,1); border: 0; box-shadow: inset 0 0 160px #000, 0 0 50px #000; background: linear-gradient(90deg, transparent 6%, #c9a24a 6.3%, transparent 6.8%, transparent 93.2%, #c9a24a 93.7%, transparent 94%), linear-gradient(transparent 5%, #c9a24a 5.3%, transparent 5.8%, transparent 94.2%, #c9a24a 94.7%, transparent 95%), repeating-conic-gradient(from 0deg at var(--fx) 50%, #3c2814 0 3deg, #24170c 3deg 6deg), #2a1a0e; } #lift .ldoor::after { display: none; } #lift .l { left: 0; --fx: 100%; transform: translateX(-102%); } #lift .r { right: 0; --fx: 0%; transform: translateX(102%); } #lift .ldoor .handle { position: absolute; top: 46%; width: .9em; height: 8%; border-radius: .5em; background: linear-gradient(#f6e0a0, #8a6a2a); box-shadow: 0 0 12px #c9a24a88; } #lift .l .handle { right: 3%; } #lift .r .handle { left: 3%; } #lift .seam { position: absolute; left: 50%; top: 0; bottom: 0; width: 4px; margin-left: -2px; background: linear-gradient(transparent, #f4d27a, transparent); opacity: 0; transition: opacity .3s .5s; box-shadow: 0 0 20px #f4d27a; } #lift.closed .seam { opacity: .8; } #lift .panel { top: 7%; width: 30em; } #lift .dial { width: 18em; height: 9em; border: 4px solid #c9a24a; border-bottom: 0; background: radial-gradient(ellipse at 50% 100%, #4a3418, #120a06 75%); box-shadow: 0 0 40px #c9a24a55, inset 0 0 30px #000; overflow: visible; } #lift .dial span { position: absolute; transform: translate(-50%, -50%); font-family: var(--sc); font-weight: 700; color: #f1d27a; font-size: 1.1em; text-shadow: 0 0 8px #c9a24a; } #lift .dial .needle { position: absolute; left: 50%; bottom: 0; width: 4px; height: 7.6em; margin-left: -2px; background: linear-gradient(#ff3a2a, #8a0712); transform-origin: 50% 100%; transform: rotate(-70deg); transition: transform 1.4s cubic-bezier(.3,.1,.3,1.25); box-shadow: 0 0 12px #e3142a; border-radius: 2px; } #lift .dial .hub { position: absolute; left: 50%; bottom: -.7em; width: 1.4em; height: 1.4em; margin-left: -.7em; border-radius: 50%; background: radial-gradient(#f6e0a0, #8a6a2a); } #lift .where { font-size: 3.6em; margin-top: .5em; } #lift .lamp { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 0%, #f4d27a22, transparent 60%); opacity: 0; } #lift.shake .lamp { opacity: 1; animation: lampflick .25s steps(2) infinite; } @keyframes lampflick { 50% { opacity: .3; } } /* с настоящей 3D-кабиной CSS-двери не нужны — остаётся только циферблат */ #lift.real .ldoor, #lift.real .seam { display: none; } #lift.real .panel { top: 3%; transform: translateX(-50%) scale(.75); transform-origin: 50% 0; } #lift.real .where { text-shadow: 0 0 30px #000, 0 0 10px #000; } /* ---------- конец комнаты и блиц ---------- */ .duel { display: flex; align-items: center; justify-content: center; gap: 2.2vw; margin: 1.2vh 0; } .dside { display: flex; flex-direction: column; align-items: center; gap: .4vh; background: #120a0dd0; border: 1px solid #4a1e27; border-radius: 12px; padding: 1.2vh 1.6vw; min-width: 12vw; animation: emerge .6s ease-out both; } .dside .ava { font-size: 2.6em; } .dside b { font-size: 1.3em; } .dside small { color: var(--muted); } .dside.doomed { border-color: var(--blood2); box-shadow: 0 0 30px #e3142a55; } .dside.done { border-color: var(--bone); } .dscore { font-family: var(--scary); font-size: 2.6em; color: var(--gold); line-height: 1; } .duel .vs { font-family: var(--title); font-size: 3em; color: var(--blood2); text-shadow: 0 0 20px #e3142a; animation: pulse 1s ease-in-out infinite; } .cands { display: flex; flex-wrap: wrap; gap: .8vw; justify-content: center; margin: 1vh 0; } .cands span { background: #120a0d; border: 1px dashed #c9a24a88; border-radius: 30px; padding: .5vh 1vw; } .cands small { color: var(--gold); } .winners { display: flex; flex-wrap: wrap; gap: 3vw; justify-content: center; } @keyframes pulse { 50% { transform: scale(1.12); } } .itemgrid.spots { gap: .5em; } .itemgrid.spots .item { width: 7em; padding: .35em; } .itemgrid.spots .item .ic { font-size: 1.6em; } .itemgrid.spots .item .in { font-size: .8em; } .itemgrid.spots .fx { font-size: .7em; } body.three .itemgrid.spots .item { width: 6em; } /* ---------- видео-мир: фоны-ролики и гости на прозрачном фоне ---------- */ #vworld { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: #000; pointer-events: none; } #vworld .bg { position: absolute; inset: 0; } #vworld .bg video, #vworld .bg .dawn { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s; } #vworld .bg video.on { opacity: 1; } #vworld .bg .dawn { background: url(/video/dawn.jpg) center/cover; transition: opacity 2.5s; animation: dawnglow 6s ease-in-out infinite alternate; } #vworld .bg .dawn.on { opacity: 1; } @keyframes dawnglow { from { filter: brightness(1); transform: scale(1.02); } to { filter: brightness(1.18) saturate(1.1); transform: scale(1.06); } } #vworld .bg.fly { animation: vfly 1.6s cubic-bezier(.2,.7,.2,1); } @keyframes vfly { from { transform: scale(1.35); filter: blur(6px) brightness(.4); } to { transform: none; filter: none; } } #vworld .vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at 40% 45%, transparent 45%, #000000b0 100%), linear-gradient(transparent 70%, #000000a0); } #vworld .guests { position: absolute; inset: 0; transition: opacity .6s; } #vworld.noguests .guests { opacity: 0; } #vworld .flash { position: absolute; inset: 0; background: #e8ecff; opacity: 0; mix-blend-mode: screen; } #vworld .flash.on { animation: vflash .7s ease-out; } @keyframes vflash { 0% { opacity: .75; } 15% { opacity: .1; } 25% { opacity: .55; } 100% { opacity: 0; } } #vworld.shake { animation: vshake .5s; } @keyframes vshake { 20% { transform: translate(-8px, 3px); } 40% { transform: translate(7px, -4px); } 60% { transform: translate(-5px, 2px); } 80% { transform: translate(3px, -1px); } } .vg { position: absolute; transition: left 1.1s cubic-bezier(.4,.1,.2,1), bottom 1.1s cubic-bezier(.4,.1,.2,1), width 1.1s, height 1.1s, opacity .8s, filter .8s; } .vg video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; opacity: 0; filter: drop-shadow(0 10px 18px #000c); } .vg video.on { opacity: 1; } .vg .halo { position: absolute; left: 18%; right: 18%; bottom: -1.5%; height: 7%; border-radius: 50%; background: radial-gradient(ellipse, var(--pc, #c9a35a) 0%, transparent 70%); opacity: .55; filter: blur(3px); } .vg.enter { opacity: 0; filter: blur(8px) brightness(3); } .vg.leave { opacity: 0; filter: blur(10px); } .vg.dim { filter: brightness(.55) saturate(.7); } .vg.ghost video { filter: grayscale(1) sepia(.3) hue-rotate(170deg) brightness(1.3) drop-shadow(0 0 14px #7fd0ffaa); opacity: 0; } .vg.ghost video.on { opacity: .6; } .vg.ghost { animation: ghostfloat 3.5s ease-in-out infinite; } .vg.ghost .halo { background: radial-gradient(ellipse, #7fd0ff 0%, transparent 70%); } @keyframes ghostfloat { 50% { transform: translateY(-14px); } } .vg.rise { animation: ghostrise 1.4s ease-out; } @keyframes ghostrise { from { transform: translateY(40px); opacity: 0; } } .vg.joy { animation: hop 1s ease-out; } @keyframes hop { 25% { transform: translateY(-22px) scale(1.03); } 50% { transform: none; } 70% { transform: translateY(-10px); } } .vg.recoil { animation: recoil .8s ease-out; } @keyframes recoil { 20% { transform: translateX(-14px) rotate(-2deg); } 45% { transform: translateX(10px) rotate(1deg); } 70% { transform: translateX(-5px); } } .vg.bless { animation: bless 1.1s ease-out; } @keyframes bless { 30% { filter: drop-shadow(0 0 30px #ffd76a) brightness(1.5); } } .vg.hurt { animation: hurt 1.1s ease-out; } @keyframes hurt { 20%, 60% { filter: drop-shadow(0 0 30px #ff2020) brightness(1.3) sepia(1) hue-rotate(-40deg) saturate(4); transform: translateX(-6px); } 40% { transform: translateX(6px); } } .vg.cure { animation: cure 1.2s ease-out; } @keyframes cure { 0% { filter: brightness(4) blur(4px); } 100% { filter: none; } } .vg.winner { filter: drop-shadow(0 0 40px #ffd98a); } body.vid .fog, body.vid .fog2, body.vid #mortWrap, body.vid footer, body.vid #grain { display: none !important; } /* финал: коридор побега — гости бегут на зрителя, тьма догоняет из глубины */ #vworld .bg.final video { inset: 0 auto auto calc(34vw - 75vh); width: 150vh; height: 100vh; object-fit: cover; } #vworld .track { position: absolute; inset: 0; opacity: 0; transition: opacity 1s; } #vworld .track.on { opacity: 1; } #vworld .track .step { position: absolute; height: 0; border-top: 2px solid #ffd99a40; border-radius: 50%; } #vworld .track .step b { position: absolute; left: -1.5em; top: -.7em; font: 700 15px var(--serif, serif); color: #f3dcae; text-shadow: 0 0 6px #000, 0 0 3px #000; opacity: .85; } #vworld .track .step.exit { border-top-color: #ffe2a0aa; box-shadow: 0 0 22px #ffd27a; } #vworld .track .step.exit b { font-size: 22px; } #vworld .dark { position: absolute; top: 0; height: 100vh; left: calc(34vw - 75vh); width: 150vh; opacity: 0; transition: opacity 1.5s; pointer-events: none; z-index: 1; --line: 16vh; } #vworld .dark.on { opacity: 1; } #vworld .dark .solid { position: absolute; left: 0; right: 0; top: 0; height: max(0px, calc(var(--line) - 55vh)); background: #000; transition: height 2.4s cubic-bezier(.4,.1,.3,1); } #vworld .dark video { position: absolute; left: -4%; width: 108%; height: 84.4vh; top: calc(var(--line) - 59vh); object-fit: fill; filter: brightness(.55) contrast(1.4); transition: top 2.4s cubic-bezier(.4,.1,.3,1); } #vworld .guests { z-index: 0; } .vg.walk { animation: walkbob .38s ease-in-out 6; } @keyframes walkbob { 50% { transform: translateY(-7px) rotate(1.2deg); } } body.vid[data-phase^=final] .vg, body.vid[data-phase=oracle] .vg { transition: left 2.2s cubic-bezier(.4,.1,.3,1), bottom 2.2s cubic-bezier(.4,.1,.3,1), width 2.2s, height 2.2s, opacity .8s, filter .8s; } /* миниатюрные таблички с именем над гостями */ .tag { padding: .05em .5em .1em; gap: 0; border-radius: 10px; border-color: #6a4f2288; background: #0b0606b8; box-shadow: 0 2px 8px #0008; } .tag .tn { font-size: .82em; } .tag .tc { top: -.45em; right: -.55em; width: 1.1em; height: 1.1em; font-size: .65em; } .tag .x { top: -.6em; left: -.6em; } /* объёмные двери в комнате */ #props { position: fixed; left: 1vw; width: 60vw; bottom: 14vh; top: 12vh; z-index: 4; pointer-events: none; display: flex; align-items: flex-end; justify-content: center; } #props .doors { display: flex; align-items: flex-end; justify-content: center; gap: .6vw; width: 100%; height: 100%; margin: 0; perspective: none; flex-wrap: nowrap; } #props .door.d3 { position: relative; flex: 0 1 auto; height: min(52vh, calc(56vw / var(--nd, 5) * 2.05)); aspect-ratio: 402 / 900; width: auto; background: none; box-shadow: none; border-radius: 0; filter: drop-shadow(0 18px 24px #000c); animation: doorIdle 3.2s ease-in-out infinite; } #props .door.d3:nth-child(2n) { animation-delay: -1.1s; } #props .door.d3:nth-child(3n) { animation-delay: -2s; } @keyframes doorIdle { 50% { transform: translateY(-3px) rotate(.3deg); } } #props .door.d3 img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .5s, transform .8s; } #props .door.d3 .do { opacity: 0; } #props .door.d3 .inside { position: absolute; left: 21%; right: 40%; top: 12%; bottom: 3%; border-radius: 50% 50% 0 0 / 18% 18% 0 0; background: #000; opacity: 0; transition: opacity .6s; } #props .door.d3 .n { position: absolute; left: 50.5%; top: 40.8%; transform: translate(-50%, -50%); font: 700 clamp(16px, 3vh, 30px) var(--sc); color: #ffe2a0; text-shadow: 0 0 6px #000, 0 0 12px #c9a24a; transition: opacity .4s; } #props .door.d3 .on { position: absolute; left: -10%; right: -10%; top: -1.8em; display: flex; flex-wrap: wrap; justify-content: center; gap: .1em .5em; font-size: .85em; text-shadow: 0 0 6px #000; } #props .door.d3.open { animation: doorKick .5s ease-out; } @keyframes doorKick { 30% { transform: scale(1.04) translateY(-4px); } } #props .door.d3.open .dc { opacity: 0; } #props .door.d3.open .do { opacity: 1; } #props .door.d3.open .n { opacity: 0; } #props .door.d3.open .inside { opacity: 1; } #props .door.d3.safe .inside { background: radial-gradient(ellipse at 50% 60%, #fff3c8, #e0a040 35%, #3a1a06 75%); box-shadow: 0 0 40px 10px #ffcf7a88; } #props .door.d3.trap .inside { background: radial-gradient(ellipse at 50% 55%, #b0000a, #3a0003 45%, #000 80%); box-shadow: 0 0 40px 8px #e3142a66; } #props .door.d3 .do { z-index: 1; } #props .door.d3 .inside { z-index: 2; mix-blend-mode: screen; } #props .door.d3 .n, #props .door.d3 .on { z-index: 3; } body.vid[data-phase=kill] #vworld .guests, body.vid[data-phase=killResult] #vworld .guests { transition: opacity .6s; } body.vid.doorsOn #vworld .guests { opacity: .35; } body.vid.doorsOn #tags { opacity: 0; transition: opacity .4s; } #props .door.d3 .mon { position: absolute; left: 0; top: 4%; width: 82%; height: auto; inset: auto; z-index: 4; opacity: 0; transform-origin: 50% 40%; transform: translate(6%, 30%) scale(.25); filter: drop-shadow(0 0 18px #e3142a88) brightness(.85); pointer-events: none; } #props .door.d3.open .mon { animation: monLunge 2.6s cubic-bezier(.2,.9,.2,1) .25s forwards; } @keyframes monLunge { 0% { opacity: 0; transform: translate(6%, 30%) scale(.25); } 12% { opacity: 1; } 30% { transform: translate(4%, 2%) scale(1.45); filter: drop-shadow(0 0 30px #ff2020) brightness(1.1); } 45% { transform: translate(5%, 6%) scale(1.25) rotate(-2deg); } 100% { opacity: 1; transform: translate(6%, 10%) scale(1.05); filter: drop-shadow(0 0 14px #e3142a88) brightness(.8); } } #props .door.d3 .inside::before { content: none; } /* объёмные сундуки */ #props .chests.c3d { display: flex; align-items: flex-end; justify-content: center; gap: 3vw; width: 100%; margin: 0 0 4vh; } .chest3d { width: min(17vw, 300px); animation: emerge .7s ease-out both; filter: drop-shadow(0 18px 22px #000d); } .chest3d img { width: 100%; display: block; } .chest3d.shake img { animation: chestRattle 2.4s ease-in-out infinite; transform-origin: 50% 100%; } .chest3d:nth-child(2).shake img { animation-delay: -.8s; } .chest3d:nth-child(3).shake img { animation-delay: -1.6s; } @keyframes chestRattle { 0%, 70%, 100% { transform: none; } 74% { transform: rotate(-2deg) translateY(-3px); } 78% { transform: rotate(2deg); } 82% { transform: rotate(-1.5deg) translateY(-2px); } 86% { transform: rotate(1deg); } } .item .chestopen { position: relative; width: 100%; margin: .2em 0; } .item .chestopen img { width: 100%; display: block; filter: drop-shadow(0 8px 12px #000c); } .item .chestopen .ic { position: absolute; left: 0; right: 0; top: 34%; text-align: center; font-size: 2.2em; animation: popOut 1.2s cubic-bezier(.2,1.4,.4,1) both; animation-delay: inherit; } .item.good .chestopen .ic { filter: drop-shadow(0 0 14px #ffd76a); } .item.bad .chestopen .ic { filter: drop-shadow(0 0 14px #ff2020); } @keyframes popOut { 0% { transform: translateY(60%) scale(.3); opacity: 0; } 60% { transform: translateY(-35%) scale(1.25); opacity: 1; } 100% { transform: translateY(-20%) scale(1); } } .item:has(.chestopen) .fx { position: static !important; order: 9; font-size: 1.05em; } .item:has(.chestopen) .nm { order: 0; } .item .chestopen.mimic img { animation: mimicBite 1.6s ease-out both; animation-delay: inherit; filter: drop-shadow(0 0 16px #e3142a99); } @keyframes mimicBite { 0% { transform: scale(.6) translateY(20%); opacity: 0; } 25% { transform: scale(1.25) rotate(-4deg); opacity: 1; } 35% { transform: scale(1.1) rotate(3deg); } 45% { transform: scale(1.2) rotate(-2deg); } 60%, 100% { transform: scale(1.05); } } .item .chestopen .ic .ipic { height: 2.6em; width: auto; vertical-align: middle; filter: drop-shadow(0 0 10px #ffd76a99); } .item.bad .chestopen .ic .ipic { filter: drop-shadow(0 0 10px #ff202099); } .item .chestopen .ic { top: 10%; } .item .chestopen .ic { display: flex; justify-content: center; align-items: flex-end; height: 50%; } .item .chestopen .ic .ipic { height: 100%; } .item .chestopen .ic { top: -8%; height: 78%; } .item .chestopen .ic .ipic { height: 100%; max-width: 80%; object-fit: contain; } .item:has(.chestopen) .nm { position: relative; z-index: 3; margin-bottom: .6em; text-shadow: 0 0 6px #000, 0 0 3px #000; } /* гадалка */ #vworld .seer { position: absolute; z-index: 5; height: 66vh; bottom: 3vh; left: calc(62vw - 33vh * 557 / 820 - 2vw); opacity: 0; transform: translateY(6vh) scale(.92); transition: opacity 1.2s, transform 1.2s; filter: drop-shadow(0 0 40px #9b4be0aa); pointer-events: none; } #vworld.seerOn .seer { opacity: 1; transform: none; animation: seerBreath 4s ease-in-out infinite 1.2s; } @keyframes seerBreath { 50% { filter: drop-shadow(0 0 60px #b46cffdd) brightness(1.08); transform: translateY(-4px); } } body.vid[data-phase=oracle] #vworld .guests, body.vid[data-phase=breakShop] #vworld .guests { opacity: .5; } #vworld .seer { width: auto; aspect-ratio: 557 / 820; height: 70vh; bottom: 1vh; left: calc(61vw - 70vh * 557 / 820); object-fit: contain; } .ware .ipic { height: 2.4em; width: auto; filter: drop-shadow(0 0 8px #c9a24a66); } body.vid[data-phase=breakShop] #tags, body.vid[data-phase=oracle] #tags { opacity: .35; } /* лифт-клетка */ .lift3d { position: relative; height: 66vh; aspect-ratio: 520 / 790; filter: drop-shadow(0 20px 26px #000d); animation: liftSway 4s ease-in-out infinite; transform-origin: 50% 0; } .lift3d img { width: 100%; height: 100%; object-fit: contain; display: block; } @keyframes liftSway { 50% { transform: rotate(.6deg); } } .lift3d .in { position: absolute; left: 32%; right: 32%; top: 40%; bottom: 14%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: .1em; font-size: .9em; text-shadow: 0 0 6px #000, 0 0 3px #000; } .lift3d .cap { position: absolute; left: 0; right: 0; bottom: -1.6em; text-align: center; font-family: var(--sc); color: var(--gold2); letter-spacing: .1em; text-shadow: 0 0 6px #000; } .lift3d.ok { animation: liftUp 2.5s ease-in-out both; } @keyframes liftUp { 0% { transform: translateY(0); } 100% { transform: translateY(-6vh); } } .lift3d.broke { animation: liftFall 2.2s cubic-bezier(.6,0,.9,.4) .8s both; } .lift3d.broke .cap { color: var(--blood2); } @keyframes liftFall { 0% { transform: none; } 10% { transform: rotate(-3deg); } 20% { transform: rotate(2deg) translateY(1vh); } 100% { transform: translateY(80vh) rotate(6deg); opacity: .2; } } #props .lift3d + .note { position: absolute; bottom: -2em; } /* маятник: раскачивается и опускается, пока решают примеры */ #vworld .pend { position: absolute; z-index: 6; left: 30vw; top: 0; width: 34vh; margin-left: -17vh; transform-origin: 50% 0; opacity: 0; transition: opacity .8s; pointer-events: none; } #vworld .pend img { width: 100%; display: block; filter: drop-shadow(0 20px 20px #000c); } #vworld.pendOn .pend { opacity: 1; animation: pendDrop 30s linear forwards; } #vworld.pendOn .pend img { transform-origin: 50% 0; animation: pendSwing 2.4s ease-in-out infinite alternate; } @keyframes pendSwing { from { transform: rotate(-28deg); } to { transform: rotate(28deg); } } @keyframes pendDrop { from { top: -22vh; } to { top: 16vh; } } #vworld.pendCut .pend { opacity: 1; top: 16vh; } #vworld.pendCut .pend img { animation: pendSlash .45s ease-in 3; transform-origin: 50% 0; } @keyframes pendSlash { 0% { transform: rotate(-35deg); } 50% { transform: rotate(35deg); filter: drop-shadow(0 0 30px #ff0000); } 100% { transform: rotate(-35deg); } } /* карты */ .cards3d { display: flex; gap: 1.4vw; justify-content: center; align-items: center; perspective: 1400px; margin-bottom: 6vh; } .card3d { width: min(10.5vw, 26vh * .65); aspect-ratio: 300 / 460; animation: cardDeal .6s cubic-bezier(.2,.9,.3,1.2) both; animation-delay: calc(var(--i) * .12s); } @keyframes cardDeal { from { transform: translateY(-60vh) rotate(-30deg); opacity: 0; } } .card3d .flip { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.4,.1,.2,1); animation: cardFloat 3s ease-in-out infinite; animation-delay: calc(var(--i) * -.6s); } @keyframes cardFloat { 50% { transform: translateY(-6px) rotateZ(.8deg); } } .card3d .back, .card3d .face { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 6%; filter: drop-shadow(0 14px 16px #000c); } .card3d .back img { width: 100%; height: 100%; display: block; } .card3d .back .n { position: absolute; left: 0; right: 0; top: 4%; text-align: center; font: 700 clamp(18px, 3.6vh, 40px) var(--sc); color: #ffe2a0; text-shadow: 0 0 8px #000, 0 0 14px #c9a24a; } .card3d .face { transform: rotateY(180deg); background: radial-gradient(ellipse at 50% 40%, #efe0bf, #b89a66 85%); border: 3px solid #8a6a2a; display: flex; flex-direction: column; align-items: center; padding: 8% 4%; gap: .3em; } .card3d .face .n { font: 700 clamp(26px, 6vh, 64px) var(--sc); color: #3a1a0a; line-height: 1; } .card3d .face .on { display: flex; flex-direction: column; align-items: center; gap: .1em; font-size: .85em; } .card3d .face .on b { text-shadow: 0 0 3px #000, 0 0 2px #000; } .card3d .face .hat { font-style: normal; color: #8a0010; font-weight: 700; } .card3d.trap .face { background: radial-gradient(ellipse at 50% 40%, #e7a0a0, #6a0a10 85%); border-color: #e3142a; box-shadow: 0 0 30px #e3142a88; } .cards3d.res .card3d .flip { animation: none; transform: rotateY(180deg); transition-delay: calc(.6s + var(--i) * .35s); } .cards3d.res .card3d { animation: none; } .card3d .face .on { font-size: clamp(13px, 2.2vh, 22px); font-family: var(--serif, serif); } .card3d .face .on b { text-shadow: 0 1px 2px #000a; filter: brightness(.75) saturate(1.4); } .card3d .face .hat { font-size: 1.05em; } /* сигнальная лампа */ .lamp3d { position: relative; height: 60vh; aspect-ratio: 326 / 600; margin-bottom: 4vh; display: flex; justify-content: center; } .lamp3d img { position: relative; height: 100%; filter: brightness(.55) drop-shadow(0 16px 20px #000c); transition: filter .05s; animation: lampFlick 3s infinite; } @keyframes lampFlick { 0%, 100% { filter: brightness(.55) drop-shadow(0 16px 20px #000c); } 47% { filter: brightness(.55); } 48% { filter: brightness(.8); } 49% { filter: brightness(.5); } } .lamp3d .glow { position: absolute; left: 50%; top: 38%; width: 90vh; height: 90vh; margin: -45vh 0 0 -45vh; border-radius: 50%; background: radial-gradient(#ff2a1a 0%, #c0000a88 25%, transparent 60%); opacity: 0; transition: opacity .05s; pointer-events: none; mix-blend-mode: screen; } .lamp3d.on img { animation: none; filter: brightness(1.7) saturate(1.6) drop-shadow(0 0 40px #ff2010) drop-shadow(0 0 80px #ff0000); } .lamp3d.on .glow { opacity: 1; animation: lampPulse .25s ease-in-out infinite alternate; } @keyframes lampPulse { to { transform: scale(1.08); opacity: .8; } } .lamp3d b { position: absolute; bottom: -1.8em; left: -50%; right: -50%; text-align: center; font: 700 1.6em var(--sc); color: var(--bone); text-shadow: 0 0 10px #000; letter-spacing: .1em; } .lamp3d.on b { color: #fff; font-size: 3em; bottom: -1.3em; text-shadow: 0 0 20px #ff0000, 0 0 6px #000; } body.vid.doorsOn:has(.lamp3d.on) #vworld .bg { filter: sepia(1) hue-rotate(-40deg) saturate(3) brightness(.9); } .lamp3d .lon { position: absolute; top: 0; height: 100%; opacity: 0; animation: none; filter: drop-shadow(0 0 40px #ff2010); } .lamp3d.on .lon { opacity: 1; filter: brightness(1.15) drop-shadow(0 0 40px #ff2010) drop-shadow(0 0 80px #ff0000); } .lamp3d.on img:not(.lon) { opacity: 0; } /* судейский молоток */ .gavel3d { width: min(42vw, 70vh); margin-bottom: 6vh; filter: drop-shadow(0 20px 24px #000d); } .gavel3d img { width: 100%; display: block; transform-origin: 85% 55%; animation: gavelIdle 3s ease-in-out infinite; } @keyframes gavelIdle { 50% { transform: rotate(-4deg); } } .gavel3d.slam img { animation: gavelSlam 1.4s cubic-bezier(.5,0,.3,1) .4s both; } @keyframes gavelSlam { 0% { transform: none; } 45% { transform: rotate(-28deg); } 60% { transform: rotate(3deg); filter: brightness(1.4) drop-shadow(0 0 30px #e3142a); } 70% { transform: rotate(-3deg); } 100% { transform: none; } } /* прятки: комната с укрытиями */ #props:has(.hideroom) { top: 9vh; bottom: 12vh; } .hideroom { position: relative; height: 100%; max-width: 100%; aspect-ratio: 1280 / 853; border-radius: 8px; overflow: hidden; box-shadow: 0 10px 40px #000; animation: emerge .7s ease-out both; } .hideroom img { width: 100%; height: 100%; display: block; object-fit: cover; filter: brightness(.8); } .hspot { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; background: #0b0608b8; border: 1px solid #c9a24a88; border-radius: 10px; padding: .1em .45em .15em; animation: emerge .5s ease-out both; text-shadow: 0 0 4px #000; } .hspot .ic { font-size: 1.1em; line-height: 1.1; } .hspot small { font-size: .62em; color: #e8d3a0; white-space: nowrap; } .hspot .who { display: flex; flex-direction: column; align-items: center; font-size: .78em; } .hspot .look { font-size: .58em; color: #f1dca0; white-space: nowrap; } .hspot.hit { background: #5a0010e0; border-color: #ff3a3a; box-shadow: 0 0 22px #e3142a; animation: emerge .5s ease-out both, hspotHit .5s ease-in-out 1.2s 3; } .hspot.safe { background: #0e3a1ad8; border-color: #6be08a; box-shadow: 0 0 16px #6be08a88; } .hspot.empty { opacity: .7; } .hspot.idle { opacity: .35; } @keyframes hspotHit { 50% { transform: translate(-50%, -50%) scale(1.15); } } .hideroom { height: auto; width: min(100%, 79vh * 1.5); } /* концовка: чистый экран с победителем, потом титры */ .vg.gone { opacity: 0 !important; } body.ending #app, body.ending #tags, body.ending #props, body.ending #htoast { opacity: 0; pointer-events: none; transition: opacity 1s; } body.ending #vworld .vignette { background: radial-gradient(ellipse at 50% 55%, transparent 40%, #000000c0 100%); } #credits { position: fixed; inset: 0; z-index: 50; background: #000000d8; overflow: hidden; display: none; cursor: pointer; } #credits.on { display: block; animation: fadeIn 1.2s ease both; } @keyframes fadeIn { from { opacity: 0; } } #credits .roll { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); width: min(900px, 90vw); text-align: center; animation: roll linear forwards; } @keyframes roll { to { top: 0; transform: translate(-50%, -100%); } } #credits h1 { font: 700 3.4em var(--title, serif); color: #c4102a; margin: 0 0 .1em; text-shadow: 0 0 30px #e3142a88; } #credits h2 { font: 500 1.2em var(--sc, serif); letter-spacing: .4em; color: #c9a24a; margin: 2.5em 0 1.2em; text-transform: uppercase; } #credits .who { display: flex; align-items: center; gap: 1.2em; text-align: left; margin: 0 auto 2.2em; width: fit-content; max-width: 100%; } #credits .who img { width: 6.5em; height: 6.5em; border-radius: 50%; object-fit: cover; border: 3px solid var(--pc, #c9a24a); box-shadow: 0 0 20px #000; flex: none; } #credits .who.dead img { filter: grayscale(1) brightness(.8) sepia(.3) hue-rotate(170deg); } #credits .who.win img { box-shadow: 0 0 30px #ffd76a; } #credits .who b { display: block; font: 700 1.9em var(--title, serif); } #credits .who small { display: block; font-size: .95em; color: #a8907a; letter-spacing: .1em; margin-bottom: .3em; } #credits .who span { display: block; font: italic 1.35em var(--serif, serif); color: #e8d8c0; } #credits .who em { display: block; font-style: normal; color: #c9a24a; font-size: .95em; margin-top: .2em; } #credits .fin { font: italic 1.3em var(--serif, serif); color: #a8907a; margin: 1em 0; } #credits .skip { position: fixed; right: 1.5em; bottom: 1em; color: #6a5a4a; font-size: .85em; } /* правки: без красной полоски, узкая панель вопросов, финальная карточка не перекрывается табличками */ .drips, .drips::before { display: none !important; } body.three:not([data-phase=lobby]):not([data-phase=gameOver]) .stage { width: min(29vw, 520px); font-size: .86em; padding: .8em 1em .8em 2em; max-height: calc(100vh - 9em); } body.three:not([data-phase=lobby]):not([data-phase=gameOver]) h2.q { font-size: 1.5em; } body.three:not([data-phase=lobby]):not([data-phase=gameOver]) .opt { font-size: 1.05em; min-height: 1.7em; padding: .3em .6em; } body.three #subs { max-width: 46em; } body.three #bottom { padding-right: 32%; } body[data-phase=gameOver] #tags { opacity: 0; } body.vid[data-phase=gameOver] #vworld .guests { opacity: .25; } #props { width: 66vw; } #vworld .seer.keeper { opacity: 0; } #vworld.shopOn .seer.keeper { opacity: 1; transform: none; animation: seerBreath 4s ease-in-out infinite 1.2s; filter: drop-shadow(0 0 30px #c9a24a88); } /* переход между комнатами: пролёт камеры */ #lift { display: none !important; } #vworld .bg.flyout { transition: transform .9s cubic-bezier(.6,0,1,.6), filter .9s; transform: scale(2.4); filter: blur(10px) brightness(.1); } #vworld .bg.fly { animation: vfly 1.3s cubic-bezier(.1,.7,.2,1); } @keyframes vfly { from { transform: scale(.55); filter: blur(8px) brightness(.15); } to { transform: none; filter: none; } } #flyTitle { position: fixed; inset: 0; z-index: 45; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; opacity: 0; transition: opacity .4s; } #flyTitle.on { opacity: 1; } #flyTitle.on.out { opacity: 0; transition: opacity .9s; } #flyTitle small { font: 500 1.3em var(--sc); letter-spacing: .5em; color: #c9a24a; text-transform: uppercase; } #flyTitle b { font: 700 5em var(--title); color: #c4102a; text-shadow: 0 0 40px #e3142a99, 0 4px 0 #000; animation: titleIn 1.2s ease-out; } @keyframes titleIn { from { letter-spacing: .4em; filter: blur(8px); opacity: 0; } } /* туман в комнатах */ #vworld .rfog { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 2s; overflow: hidden; z-index: 0; } #vworld.fogOn .rfog { opacity: 1; } #vworld .rfog i { position: absolute; bottom: -10vh; width: 90vw; height: 45vh; border-radius: 50%; background: radial-gradient(ellipse at center, #c8c0d040, #9890a018 45%, transparent 70%); filter: blur(18px); animation: fogdrift linear infinite; } #vworld .rfog i:nth-child(1) { left: -30vw; animation-duration: 50s; } #vworld .rfog i:nth-child(2) { left: 20vw; bottom: -14vh; animation-duration: 70s; animation-delay: -25s; opacity: .8; } #vworld .rfog i:nth-child(3) { left: 55vw; bottom: 5vh; height: 30vh; animation-duration: 60s; animation-delay: -40s; opacity: .55; } #vworld .guests { z-index: 1; } /* призраки парят над полом */ .vg.ghost { animation: ghostfly 4.5s ease-in-out infinite; } @keyframes ghostfly { 0% { transform: translate(0, -6vh) rotate(-1.5deg); } 25% { transform: translate(1.2vw, -9vh) rotate(1deg); } 50% { transform: translate(0, -11vh) rotate(1.8deg); } 75% { transform: translate(-1.2vw, -8vh) rotate(-1deg); } 100% { transform: translate(0, -6vh) rotate(-1.5deg); } } .vg.ghost video.on { opacity: .55; -webkit-mask-image: linear-gradient(#000 55%, transparent 98%); mask-image: linear-gradient(#000 55%, transparent 98%); } .vg.ghost .halo { opacity: .25; transform: scale(.7); } .vg.rise { animation: ghostrise 1.6s ease-out; } @keyframes ghostrise { from { transform: translateY(2vh); opacity: .2; } to { transform: translateY(-6vh); } } /* шаг при перемещении */ .vg.walk video.on { animation: walkbob .3s ease-in-out 4; } @keyframes walkbob { 50% { transform: translateY(-1.2%) rotate(1deg); } } #vworld .seer.keeper { aspect-ratio: 341 / 820; height: 74vh; left: calc(60vw - 74vh * 341 / 820); } body.vid[data-phase=breakShop] #vworld .guests { opacity: .5; } body.vid[data-phase=breakShop] #tags { opacity: .35; } #vworld.shopOn .seer.keeper { filter: drop-shadow(0 0 30px #e0a04066) drop-shadow(0 20px 20px #000c); } /* таймер-счётчик вместо полоски */ #timerbar, #clock { display: none !important; } #bigclock { position: fixed; left: 2.2vw; bottom: 13vh; z-index: 30; display: flex; flex-direction: column; align-items: center; opacity: 0; transform: translateY(20px) scale(.9); transition: opacity .4s, transform .4s; pointer-events: none; } #bigclock.on { opacity: 1; transform: none; } #bigclock .tv { position: relative; width: 8.5vw; min-width: 96px; aspect-ratio: 1.15; border-radius: 18% / 22%; background: linear-gradient(#3a1a14, #1a0806); border: 4px solid #6a2a18; box-shadow: 0 0 0 3px #000, 0 10px 30px #000c, inset 0 0 20px #000; display: grid; place-items: center; } #bigclock .tv b { width: 74%; height: 70%; display: grid; place-items: center; background: linear-gradient(#f2ead8 0 49%, #b8ad98 49% 51%, #e8dfcb 51%); color: #1a0c08; border-radius: 6%; font: 700 clamp(28px, 4.2vw, 72px) var(--sc); box-shadow: inset 0 2px 6px #0008; } #bigclock .tv i { position: absolute; left: 13%; right: 13%; top: 50%; height: 2px; background: #0006; } #bigclock.flip .tv b { animation: flipIt .35s ease-out; } @keyframes flipIt { 0% { transform: rotateX(70deg); filter: brightness(.6); } 100% { transform: none; } } #bigclock small { margin-top: .3em; font: 700 .85em var(--sc); letter-spacing: .3em; color: #c9a24a; text-transform: uppercase; text-shadow: 0 0 6px #000; } #bigclock.hot .tv { border-color: #e3142a; box-shadow: 0 0 0 3px #000, 0 0 30px #e3142a; animation: shake .15s infinite; } #bigclock.hot .tv b { color: #a0000a; } /* вопрос в стиле Jackbox: гости сверху, крупный вопрос слева, варианты справа */ body.vid[data-phase=question] .stage, body.vid[data-phase=reveal] .stage { position: fixed !important; left: 12vw; right: 4vw; top: 40vh; width: auto !important; max-height: 48vh !important; margin: 0 !important; background: none !important; padding: 0 !important; display: grid !important; grid-template-columns: 1.1fr .9fr; gap: 1em 4vw; align-items: center; text-align: left; overflow: visible !important; font-size: 1em !important; } body.vid[data-phase=question] .stage > .kicker, body.vid[data-phase=reveal] .stage > .kicker { grid-column: 1 / -1; font-size: .95em; color: #c9a24a; } body.vid[data-phase=question] h2.q, body.vid[data-phase=reveal] h2.q { font: 700 2.3em var(--serif) !important; line-height: 1.25; color: #f4ecdc; text-shadow: 0 3px 0 #000, 0 0 20px #000; transform: rotate(-1.5deg); margin: 0; } body.vid[data-phase=question] .opts, body.vid[data-phase=reveal] .opts { display: flex !important; flex-direction: column; gap: .55em; } body.vid[data-phase=question] .opt, body.vid[data-phase=reveal] .opt { background: none !important; border: 0 !important; box-shadow: none !important; padding: .1em 0 !important; font: 700 1.7em var(--serif) !important; color: #f4ecdc; text-shadow: 0 2px 0 #000, 0 0 12px #000; min-height: 0 !important; } body.vid[data-phase=question] .opt:nth-child(2n), body.vid[data-phase=reveal] .opt:nth-child(2n) { transform: rotate(1.2deg) translateX(.6em); } body.vid[data-phase=question] .opt:nth-child(2n+1), body.vid[data-phase=reveal] .opt:nth-child(2n+1) { transform: rotate(-1deg); } body.vid[data-phase=question] .opt .L, body.vid[data-phase=reveal] .opt .L { display: inline-grid; place-items: center; width: 1.25em; height: 1.25em; margin-right: .45em; font-size: .85em; color: #111; background: #e8d34a; text-shadow: none; transform: rotate(-4deg); box-shadow: 0 3px 0 #000; } body.vid .opt:nth-child(2) .L { background: #e6e2d8 !important; } body.vid .opt:nth-child(3) .L { background: #59c46a !important; } body.vid .opt:nth-child(4) .L { background: #4fb39c !important; } body.vid[data-phase=reveal] .opt.wrong { opacity: .35; } body.vid[data-phase=reveal] .opt.right { color: #8af0a0; } body.vid[data-phase=reveal] .opt.right .L { box-shadow: 0 0 18px #6be08a, 0 3px 0 #000; } body.vid[data-phase=question] .stage .note, body.vid[data-phase=reveal] .stage .note, body.vid[data-phase=reveal] .stage .banner { grid-column: 1 / -1; } body.vid[data-phase=question] #vworld .vignette, body.vid[data-phase=reveal] #vworld .vignette { background: radial-gradient(ellipse at 45% 60%, #00000060 30%, #000000d0 100%); } body.vid[data-phase=question] #vworld .bg, body.vid[data-phase=reveal] #vworld .bg { filter: brightness(.55); } body.vid #bottom { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; } body.vid[data-phase=question] .stage, body.vid[data-phase=reveal] .stage { top: 44vh; } body.vid[data-phase=question] #vworld .vignette, body.vid[data-phase=reveal] #vworld .vignette { background: linear-gradient(transparent 35%, #000000b0 60%, #000000d0); } #bigclock .tv { width: 10vw; min-width: 110px; } /* ===== v43: испытания по центру, без гостей; текст сверху по центру ===== */ body.vid.doorsOn .stage { position: fixed !important; left: 0 !important; right: 0 !important; margin-left: auto !important; margin-right: auto !important; top: 8.5vh !important; transform: none !important; animation: none !important; width: min(70vw, 1100px) !important; max-height: 22vh !important; padding: .5em 1.5em !important; text-align: center !important; align-items: center !important; background: radial-gradient(ellipse at 50% 40%, #050203e8, #05020388 60%, transparent 80%) !important; overflow: hidden !important; } body.vid.doorsOn .stage .kicker, body.vid.doorsOn .stage h1, body.vid.doorsOn .stage h2 { text-align: center !important; } body.vid.doorsOn .stage .victims, body.vid.doorsOn .stage .deaths, body.vid.doorsOn .stage .opts { justify-content: center !important; } body.vid.doorsOn #vworld .guests, body.vid.doorsOn #tags { opacity: 0 !important; transition: opacity .5s; } body.vid.doorsOn.soloOn #vworld .guests, body.vid.doorsOn.soloOn #tags { opacity: 1 !important; } body.soloOn #props, body.soloOn .stage { opacity: 0 !important; transition: opacity .5s; } #props { left: 0 !important; right: 0 !important; width: 100vw !important; top: 31vh !important; bottom: 11vh !important; align-items: center !important; justify-content: center !important; transition: opacity .5s; } #props .door.d3 { height: min(56vh, calc(86vw / var(--nd, 5) * 2.05)) !important; } #props .chests.c3d { margin: 0 !important; } .chest3d { width: min(22vw, 360px) !important; } .lift3d { height: 100% !important; max-height: 58vh; animation: none !important; } .lift3d.ok { animation: liftUp 2.5s ease-in-out both !important; } .lift3d.broke { animation: liftFall 2.2s cubic-bezier(.6,0,.9,.4) .8s both !important; } .lamp3d { height: 100% !important; max-height: 58vh; margin: 0 !important; } /* монстр не вылетает, а проступает в проёме */ #props .door.d3 .mon { width: 64% !important; left: 18% !important; top: 12% !important; transform: none !important; filter: brightness(.75) drop-shadow(0 0 14px #e3142a88) !important; } #props .door.d3.open .mon { animation: monAppear 1.6s ease-out .5s both !important; } @keyframes monAppear { 0% { opacity: 0; filter: brightness(0) blur(6px); } 60% { opacity: 1; } 100% { opacity: 1; filter: brightness(.8) drop-shadow(0 0 14px #e3142a88); } } /* прятки на весь экран */ #props:has(.hideroom) { top: 0 !important; bottom: 0 !important; } .hideroom { width: 100vw !important; height: 100vh !important; max-width: none; aspect-ratio: auto !important; border-radius: 0 !important; box-shadow: none !important; } .hideroom img { object-fit: cover; filter: brightness(.7) !important; } .hspot { font-size: 1.15em; } .hspot .caught { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; gap: .2em; pointer-events: none; } .hspot .caught img { width: 6em; height: 6em; border-radius: 50%; object-fit: cover; border: 3px solid var(--pc); box-shadow: 0 0 30px #e3142a; animation: caughtPop 1.8s cubic-bezier(.2,1.5,.4,1) 1s both; } @keyframes caughtPop { 0% { transform: scale(0) rotate(-30deg); opacity: 0; } 40% { transform: scale(1.4) rotate(8deg); opacity: 1; } 60% { transform: scale(1) rotate(-4deg); } 100% { transform: scale(1.1) translateY(-1.5em); } } body.vid:has(.hideroom) .stage { top: 7vh !important; background: radial-gradient(ellipse, #000000e0, transparent 75%) !important; } /* суд: портреты, без молотка */ .vote3d { display: flex; gap: 4vw; align-items: center; justify-content: center; } .vote3d .vface { display: flex; flex-direction: column; align-items: center; gap: .3em; text-shadow: 0 0 8px #000; } .vote3d .vface img { width: min(17vw, 30vh); height: min(17vw, 30vh); border-radius: 50%; object-fit: cover; border: 5px solid var(--pc); box-shadow: 0 0 40px #000, 0 0 20px var(--pc); } .vote3d .vface b { font: 700 1.8em var(--title); color: var(--pc); } .vote3d .vface em { font-style: normal; font-size: 2em; color: #e3142a; letter-spacing: .1em; } .vote3d .vface.dead img { filter: grayscale(1) brightness(.6); box-shadow: 0 0 50px #e3142a; animation: shake .15s 6; } .vote3d .vside { display: flex; flex-direction: column; align-items: center; font: 700 1.4em var(--sc); text-shadow: 0 0 10px #000; } .vote3d .vside b { font-size: 3em; } .vote3d .vside em { font-style: normal; font-size: 3.5em; line-height: 1; } .vote3d .vside.kill { color: #e3142a; } .vote3d .vside.spare { color: #cfe8ff; } .vote3d.verdict.dead .vface img { filter: grayscale(1) brightness(.6); } .vote3d.verdict.spared .vface img { box-shadow: 0 0 50px #cfe8ff; } body.vid.doorsOn .stage .verdict, body.vid.doorsOn .stage .votes { display: none; } /* лобби: кнопка «Начать ночь» не обрезается */ body.three .stage:has(.lobby) { max-height: calc(100vh - 6em) !important; } .lb-right .start { font-size: 1.6em; padding: .3em 1.2em; margin-top: .2em; } .lb-right .keytag .qr img { max-width: 22vh; height: auto; } /* вступление: только кнопка пропуска */ body.vid[data-phase=intro] .stage { position: fixed !important; left: 0 !important; right: 0 !important; margin: 0 auto !important; bottom: 14vh !important; top: auto !important; transform: none !important; animation: none !important; width: fit-content !important; background: none !important; } .introSkip { display: flex; flex-direction: column; align-items: center; gap: .5em; } .start.small { font-size: 1.4em; padding: .3em 1.2em; } /* масштабное превращение на весь экран */ #vworld .bigfx { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 7; opacity: 0; transition: opacity .3s; pointer-events: none; } #vworld .bigfx.on { opacity: 1; } /* после сцены превращения гости возвращаются на места */ body.vid.doorsOn.focusDone #props, body.focusDone.vid .stage:has(.doors) { opacity: 0; transition: opacity .6s; } body.vid.doorsOn.focusDone #vworld .guests, body.vid.doorsOn.focusDone #tags { opacity: 1 !important; } /* вопрос сверху, гости внизу */ body.vid[data-phase=question] .stage, body.vid[data-phase=reveal] .stage { top: 11vh !important; max-height: 50vh !important; } body.cineOn:not([data-phase=intro]) #props, body.cineOn:not([data-phase=intro]):not([data-phase=question]) .stage, body.cineOn #tags, body.cineOn #bigclock { opacity: 0 !important; transition: opacity .4s; } /* ===== v50 ===== */ /* без полос прокрутки */ html, body, main, .stage, #props { scrollbar-width: none; } html::-webkit-scrollbar, body::-webkit-scrollbar, main::-webkit-scrollbar, .stage::-webkit-scrollbar, #props::-webkit-scrollbar { display: none; width: 0; height: 0; } body.vid main { overflow: hidden !important; } /* вопрос: как раньше — тёмная плашка, вопрос по центру, варианты в рамках 2×2; гости крупно внизу */ body.vid[data-phase=question] .stage, body.vid[data-phase=reveal] .stage { left: 0 !important; right: 0 !important; margin: 0 auto !important; top: 8vh !important; width: min(80vw, 1400px) !important; max-height: 44vh !important; display: flex !important; flex-direction: column; align-items: center !important; text-align: center !important; gap: .7em !important; padding: 1em 2em 1.2em !important; background: radial-gradient(ellipse at 50% 45%, #050203f0 0%, #050203cc 55%, transparent 78%) !important; transform: none !important; } body.vid[data-phase=question] .stage > .kicker, body.vid[data-phase=reveal] .stage > .kicker { text-align: center !important; } body.vid[data-phase=question] h2.q, body.vid[data-phase=reveal] h2.q { transform: none !important; text-align: center !important; font-size: 2.2em !important; max-width: 100%; } body.vid[data-phase=question] .opts, body.vid[data-phase=reveal] .opts { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: .6em .8em !important; width: 100%; } body.vid[data-phase=question] .opt, body.vid[data-phase=reveal] .opt { transform: none !important; font: 700 1.45em var(--serif) !important; padding: .55em 1em !important; min-height: 0 !important; text-shadow: 0 2px 0 #000; background: linear-gradient(170deg, #241712f0, #0f0907f0) !important; border: 1px solid #6a4f22 !important; box-shadow: inset 0 0 0 3px #0b0606, inset 0 0 0 4px #3a2a12, inset 0 0 30px #000, 0 8px 20px #000a !important; border-radius: 2px; } body.vid[data-phase=question] .opt .L, body.vid[data-phase=reveal] .opt .L { background: none !important; color: var(--gold2) !important; box-shadow: none !important; transform: none !important; width: 1.2em; margin-right: .2em; font-size: 1em; } body.vid[data-phase=reveal] .opt.right { border-color: #e9dfcc !important; background: linear-gradient(170deg, #4a3d2a, #1c150e) !important; box-shadow: 0 0 34px #e9dfcc55, inset 0 0 20px #000 !important; color: #f4ecdc; } body.vid[data-phase=reveal] .opt.right .L { box-shadow: none !important; } body.vid[data-phase=reveal] .opt.wrong { opacity: .3; } body.vid[data-phase=question] .stage .note { display: none; } /* сундуки ниже */ #props:has(.chests) { top: 42vh !important; bottom: 2vh !important; } /* испытание появляется с переходом */ #props.pin > * { animation: trialIn .9s cubic-bezier(.2,.8,.3,1) both !important; } @keyframes trialIn { 0% { opacity: 0; transform: scale(.85); filter: blur(12px) brightness(2.5); } 60% { opacity: 1; filter: blur(0) brightness(1.3); } 100% { opacity: 1; transform: none; filter: none; } } body.vid.doorsOn .stage.glitch-in { animation: trialText .8s ease-out both !important; } @keyframes trialText { 0% { opacity: 0; filter: blur(8px); clip-path: inset(0 50% 0 50%); } 100% { opacity: 1; filter: none; clip-path: inset(0 0 0 0); } } /* колдовство → превращение: через затемнение, без рывков */ #vworld .dip { position: absolute; inset: 0; background: #000; opacity: 0; transition: opacity .55s ease; z-index: 9; pointer-events: none; } #vworld .dip.on { opacity: 1; } #vworld .bigfx { transition: opacity .5s ease !important; } #vworld.snap .vg, #vworld.snap .vg video { transition: none !important; } #vworld.walkback .vg { transition: left 2s ease-in-out, bottom 2s ease-in-out, width 2s ease-in-out, height 2s ease-in-out, opacity .8s, filter .8s !important; } /* концовка: победитель целиком, не прозрачный и не прыгает */ body.ending #vworld .vg.winner:not(.ascend), body.ending #vworld .vg.winner:not(.ascend) video.on { opacity: 1 !important; animation: none !important; } /* финал: тьма ползёт по полу из глубины коридора */ @property --rx { syntax: ''; inherits: true; initial-value: 100px; } @property --ry { syntax: ''; inherits: true; initial-value: 100px; } #vworld .dark { position: absolute; inset: 0; left: 0; width: 100%; top: 0; height: 100%; opacity: 0; transition: opacity 1.5s, --rx 2.4s cubic-bezier(.4,.1,.3,1), --ry 2.4s cubic-bezier(.4,.1,.3,1); pointer-events: none; z-index: 1; } #vworld .dark.on { opacity: 1; } #vworld .dark .deep { position: absolute; inset: 0; background: radial-gradient(var(--rx) var(--ry) at 40% 14%, #000 0%, #000000f0 45%, #000000a0 75%, transparent 100%); } #vworld .dark .wall { position: absolute; left: var(--wx); bottom: var(--wb); width: var(--ww); height: var(--wh); transition: left 2.4s cubic-bezier(.4,.1,.3,1), bottom 2.4s cubic-bezier(.4,.1,.3,1), width 2.4s cubic-bezier(.4,.1,.3,1), height 2.4s cubic-bezier(.4,.1,.3,1); } #vworld .dark .wall video { position: absolute; inset: -10% -15% 0; width: 130%; height: 110%; object-fit: fill; display: none; filter: brightness(.6) contrast(1.3); } #vworld .dark.hasvid .wall video { display: block; } #vworld .dark.hasvid .wall i { display: none; } #vworld .dark .wall i { position: absolute; bottom: -8%; width: 46%; height: 70%; border-radius: 50%; background: radial-gradient(ellipse at 50% 60%, #000 0%, #000000e6 40%, #05000a80 62%, transparent 72%); filter: blur(10px); animation: churn 5s ease-in-out infinite alternate; } #vworld .dark .wall i:nth-child(2) { left: -12%; animation-duration: 4.2s; } #vworld .dark .wall i:nth-child(3) { left: 14%; height: 95%; animation-duration: 5.6s; animation-delay: -1.5s; } #vworld .dark .wall i:nth-child(4) { left: 36%; height: 110%; animation-duration: 4.8s; animation-delay: -3s; } #vworld .dark .wall i:nth-child(5) { left: 58%; height: 90%; animation-duration: 6s; animation-delay: -.7s; } #vworld .dark .wall i:nth-child(6) { left: 78%; height: 68%; animation-duration: 4.5s; animation-delay: -2.2s; } #vworld .dark .wall i:nth-child(7) { left: 20%; width: 60%; height: 40%; bottom: -14%; animation: rollfwd 3.2s ease-in-out infinite; } @keyframes churn { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(4%, -6%) scale(1.12, .95); } 100% { transform: translate(-5%, 3%) scale(.94, 1.08); } } @keyframes rollfwd { 0% { transform: translateY(0) scale(1); opacity: .9; } 50% { transform: translateY(6%) scale(1.15, 1.05); opacity: 1; } 100% { transform: translateY(0) scale(1); opacity: .9; } } body.ending #vworld .vg.winner:not(.ascend) { filter: drop-shadow(0 0 18px #ffd98a66) !important; } #vworld .dark .wall i { background: radial-gradient(ellipse at 50% 60%, #000 0%, #050208f2 38%, #1a1224a8 58%, #2a203033 68%, transparent 74%) !important; } #vworld .dark.hasvid .wall video { inset: auto; left: -25%; width: 150%; height: 140%; bottom: -20%; top: auto; filter: brightness(.7) contrast(1.2); } #vworld .dark.hasvid .wall video { -webkit-mask-image: linear-gradient(#000 70%, transparent 88%); mask-image: linear-gradient(#000 70%, transparent 88%); } #vworld .dark .deep { background: radial-gradient(var(--rx) var(--ry) at 40% 14%, #000 0%, #000000f2 55%, #00000099 85%, transparent 100%) !important; } /* концовка: победитель не полупрозрачный (раньше вся группа гостей была .25) */ body.ending #vworld:not(.noguests) .guests { opacity: 1 !important; } /* финал: кто впереди тьмы — виден поверх неё */ body.vid[data-phase^=final] #vworld .guests, body.vid[data-phase=oracle] #vworld .guests { z-index: 2; } /* ===== v52 ===== */ /* лавка: людей нет, только гробовщик (кроме сцены эволюции) */ body.vid[data-phase=breakShop] #vworld .guests, body.vid[data-phase=breakShop] #tags, body.vid[data-phase=breakMini] #vworld .guests, body.vid[data-phase=breakMini] #tags { opacity: 0 !important; } body.vid[data-phase=breakShop].soloOn #vworld .guests { opacity: 1 !important; } body.vid.soloOn[data-phase=breakShop] .seer.keeper { opacity: 0 !important; transition: opacity .5s; } /* пролёт перед испытанием: старые предметы и табличка гаснут */ body.flying #props, body.flying .stage { opacity: 0 !important; transition: opacity .3s; } /* финал: всё позади стены дыма — полная тьма */ #vworld .dark .deep { background: linear-gradient(#000 0, #000 calc(100% - 9vh), transparent 100%) !important; position: absolute; left: 0; right: 0; top: 0; bottom: auto !important; height: calc(100vh - var(--wb) - var(--wh) * .35); transition: height 2.4s cubic-bezier(.4,.1,.3,1); } #vworld .dark .wall { margin-left: calc(var(--ww) * -.35); width: calc(var(--ww) * 1.7) !important; } #vworld .vg.inDark { filter: brightness(.08) blur(1px) !important; opacity: .35; } /* финал: гости — марионетки на нитях, плывут на клетку, а не прыгают */ body.vid[data-phase^=final] #vworld .vg::before, body.vid[data-phase^=final] #vworld .vg::after { content: ''; position: absolute; bottom: 62%; height: 120vh; width: 1px; background: linear-gradient(transparent, #e8dcc488 40%, #e8dcc4cc); pointer-events: none; } body.vid[data-phase^=final] #vworld .vg::before { left: 36%; transform: rotate(-1.5deg); transform-origin: bottom; } body.vid[data-phase^=final] #vworld .vg::after { left: 64%; transform: rotate(1.5deg); transform-origin: bottom; } body.vid[data-phase^=final] #vworld .vg.ghost::before, body.vid[data-phase^=final] #vworld .vg.ghost::after, body.vid[data-phase^=final] #vworld .vg.inDark::before, body.vid[data-phase^=final] #vworld .vg.inDark::after { display: none; } body.vid[data-phase^=final] #vworld .vg:not(.ghost) { animation: puppetSway 3.4s ease-in-out infinite; transform-origin: 50% -40%; } body.vid[data-phase^=final] #vworld .vg.walk video.on { animation: none !important; } #vworld .vg.glide video.on { animation: glideLift 2.4s ease-in-out !important; } @keyframes puppetSway { 0%, 100% { transform: rotate(-1deg); } 50% { transform: rotate(1deg); } } @keyframes glideLift { 0% { transform: none; } 25% { transform: translateY(-6%) rotate(-2deg); } 75% { transform: translateY(-6%) rotate(2deg); } 100% { transform: none; } } body.vid[data-phase^=final] #vworld .vg { transition: left 2.4s cubic-bezier(.45,.05,.35,1), bottom 2.4s cubic-bezier(.45,.05,.35,1), width 2.4s cubic-bezier(.45,.05,.35,1), height 2.4s cubic-bezier(.45,.05,.35,1), opacity .8s, filter .8s !important; } /* эволюция: золотая аура навсегда */ #vworld .vg.evo .halo { background: radial-gradient(ellipse, #ffd98a 0%, #ffb84a55 40%, transparent 70%) !important; opacity: .9 !important; transform: scale(1.5); animation: evoHalo 2.6s ease-in-out infinite; } #vworld .vg.evo:not(.ghost):not(.inDark) video.on { filter: drop-shadow(0 0 14px #ffd98a99) drop-shadow(0 10px 18px #000c); } @keyframes evoHalo { 50% { opacity: .55; transform: scale(1.8); } } /* эволюция: сцена */ #vworld.evoFx::after { content: ''; position: absolute; inset: 0; z-index: 6; pointer-events: none; background: radial-gradient(ellipse 22% 70% at 50% 60%, #fff6d0aa, #ffd98a55 35%, transparent 70%), repeating-conic-gradient(from 0deg at 50% 62%, #ffd98a33 0deg 4deg, transparent 4deg 16deg); mix-blend-mode: screen; animation: evoRays 5.6s ease-in-out both; } @keyframes evoRays { 0% { opacity: 0; transform: scale(.6) rotate(0deg); } 30% { opacity: .7; } 55% { opacity: 1; transform: scale(1.1) rotate(25deg); } 100% { opacity: 0; transform: scale(1.4) rotate(45deg); } } #vworld .vg.evolving video.on { animation: evolving 4.2s ease-in both !important; } @keyframes evolving { 0% { filter: brightness(1); transform: none; } 50% { filter: brightness(1.8) drop-shadow(0 0 30px #ffd98a); transform: translateY(-3%) scale(1.03); } 74% { filter: brightness(6) blur(3px) drop-shadow(0 0 80px #fff); transform: translateY(-5%) scale(1.06); } 100% { filter: drop-shadow(0 0 20px #ffd98a); transform: none; } } #vworld .flash.evoflash { animation: evoFlash 1.4s ease-out; } @keyframes evoFlash { 0% { opacity: 0; background: #fff8e0; } 12% { opacity: 1; background: #fff8e0; } 100% { opacity: 0; background: #ffd98a; } } #vworld .dark.hasvid .wall video { left: 50% !important; width: auto !important; aspect-ratio: 16 / 9; height: 140% !important; transform: translateX(-50%); filter: brightness(.9) contrast(1.15) !important; } /* эволюция: монтаж крупных планов */ #vworld .evomont { position: absolute; inset: 0; z-index: 8; display: none; overflow: hidden; background: radial-gradient(ellipse at 50% 50%, #3b1458 0%, #14051f 55%, #050108 100%); } #vworld .evomont.on { display: block; animation: evoIn .5s ease-out both; } #vworld .evomont.out { opacity: 0; transition: opacity .7s; } @keyframes evoIn { from { opacity: 0; } } #vworld .evomont .rays { position: absolute; inset: -50%; background: repeating-conic-gradient(from 0deg, #ffd98a2a 0deg 5deg, transparent 5deg 15deg); animation: evoSpin 9s linear infinite; mix-blend-mode: screen; } @keyframes evoSpin { to { transform: rotate(360deg); } } #vworld .evomont .shot { position: absolute; inset: 0; } #vworld .evomont .shot img { position: absolute; max-width: none; filter: drop-shadow(0 0 30px #c070ff88); } #vworld .evomont .shot.go img { animation: evoPush 1.6s ease-out both; } #vworld .evomont .shot .b { clip-path: inset(100% 0 0 0); } #vworld .evomont .shot.go .b { animation: evoPush 1.6s ease-out both, evoWipe 1s cubic-bezier(.5,0,.3,1) .35s both; } #vworld .evomont.noimg .shot .b { filter: sepia(.5) saturate(2.2) hue-rotate(-12deg) brightness(1.25) drop-shadow(0 0 30px #ffd98a); } #vworld .evomont .shot .line { position: absolute; left: 0; right: 0; height: 6px; top: 100%; background: radial-gradient(ellipse at center, #fff 0%, #ffd98a 30%, transparent 70%); box-shadow: 0 0 40px 10px #ffd98a88; opacity: 0; } #vworld .evomont .shot.go .line { animation: evoLine 1s cubic-bezier(.5,0,.3,1) .35s both; } @keyframes evoPush { from { transform: scale(1.12) rotate(-2deg); } to { transform: scale(1) rotate(0); } } @keyframes evoWipe { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } } @keyframes evoLine { 0% { top: 100%; opacity: 1; } 100% { top: -2%; opacity: 0; } } #vworld .evomont .spark { position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(2px 2px at 20% 30%, #fff, transparent), radial-gradient(3px 3px at 70% 60%, #ffd98a, transparent), radial-gradient(2px 2px at 40% 80%, #fff, transparent), radial-gradient(3px 3px at 85% 20%, #e0b0ff, transparent), radial-gradient(2px 2px at 10% 70%, #ffd98a, transparent), radial-gradient(2px 2px at 55% 15%, #fff, transparent); background-size: 300px 300px; animation: evoSpark 3s linear infinite; mix-blend-mode: screen; } @keyframes evoSpark { from { background-position: 0 0; } to { background-position: 0 -300px; } } #vworld .evomont .cap { position: absolute; left: 6vw; bottom: 10vh; font: 700 3.2em var(--title); color: #ffd98a; text-shadow: 0 0 30px #ffb84a, 0 4px 0 #000; letter-spacing: .05em; } #vworld .evomont .shot.go ~ .cap { animation: evoCap 1.5s ease-out both; } @keyframes evoCap { 0% { opacity: 0; transform: translateX(-40px); } 25%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } } #vworld .evomont.full .rays { background: repeating-conic-gradient(from 0deg, #ffd98a55 0deg 6deg, transparent 6deg 14deg); } #vworld .evomont.full .shot.go img { animation: evoRise 2.8s ease-out both; } #vworld .evomont.full .shot.go .b { animation: evoRise 2.8s ease-out both, evoWipe 1.2s cubic-bezier(.5,0,.3,1) .2s both; } @keyframes evoRise { from { transform: translateY(6%) scale(.9); } to { transform: none; } } /* старый облик гаснет, пока проступает новый */ #vworld .evomont:not(.noimg) .shot.go .a { animation: evoPush 1.6s ease-out both, evoFadeOld 1s ease-in .35s both; } #vworld .evomont.full:not(.noimg) .shot.go .a { animation: evoRise 2.8s ease-out both, evoFadeOld 1.2s ease-in .2s both; } @keyframes evoFadeOld { to { opacity: 0; filter: brightness(3) blur(4px); } } #vworld .vg .evoimg { position: absolute; bottom: 2%; left: 50%; height: 96%; width: auto; transform: translateX(-50%); opacity: 0; transition: opacity .6s; pointer-events: none; transform-origin: 50% 100%; filter: drop-shadow(0 0 14px #ffd98a88) drop-shadow(0 10px 18px #000c); } #vworld .vg.evoStill .evoimg { opacity: 1; animation: evoBreath 4s ease-in-out infinite; } #vworld .vg.evoStill video { opacity: 0 !important; } #vworld .vg.evoStill.inDark .evoimg { filter: brightness(.08); } @keyframes evoBreath { 50% { transform: translateX(-50%) scale(1.008, 1.012); } } /* ===== v56 ===== */ /* комнаты испытаний */ #vworld .bg .trialbg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .6s; z-index: 1; } #vworld .bg .trialbg.on { opacity: 1; animation: trialZoom 30s ease-in-out infinite alternate; } @keyframes trialZoom { from { transform: scale(1); } to { transform: scale(1.08) translateY(-1%); } } body.cineOn #vworld .bg .trialbg { opacity: 0 !important; } /* финал: тьма ровная, без размытых краёв; из дыма тянутся руки */ #vworld .dark .deep { background: #000 !important; height: calc(100vh - var(--wb) - var(--wh) * .3) !important; } #vworld .dark .wall { left: -4vw !important; width: 108vw !important; margin-left: 0 !important; } #vworld .dark.hasvid .wall video { left: 0 !important; width: 100% !important; aspect-ratio: auto !important; transform: none !important; height: 140% !important; object-fit: fill; -webkit-mask-image: none !important; mask-image: none !important; } #vworld .dark .claws { position: absolute; top: auto !important; left: -6vw; width: 112vw; height: calc(var(--wh) * 1.3); bottom: calc(var(--wb) - var(--wh) * .35); object-fit: fill; display: none; filter: brightness(.75) contrast(1.2); transition: bottom 2.4s cubic-bezier(.4,.1,.3,1), height 2.4s cubic-bezier(.4,.1,.3,1); -webkit-mask-image: linear-gradient(transparent 0, #000 25%); mask-image: linear-gradient(transparent 0, #000 25%); } #vworld .dark.hasclaws .claws { display: block; } /* лавка: эволюция на полке */ .ware.evo { border-color: #ffd98a !important; box-shadow: 0 0 20px #ffd98a55; } .ware.evo .evofaces { display: flex; justify-content: center; gap: .2em; height: 100%; } .ware.evo .evofaces img { height: 100%; max-height: 7em; width: auto; object-fit: contain; filter: drop-shadow(0 0 8px #ffd98a); } #vworld .dark .claws { z-index: 0; filter: brightness(1) contrast(1.15) !important; -webkit-mask-image: linear-gradient(transparent 0, transparent 42%, #000 58%) !important; mask-image: linear-gradient(transparent 0, transparent 42%, #000 58%) !important; } #vworld .dark .wall { z-index: 1; } #vworld .dark .deep { z-index: 0; } #vworld .dark.hasvid .wall video { -webkit-mask-image: linear-gradient(#000 82%, transparent 96%) !important; mask-image: linear-gradient(#000 82%, transparent 96%) !important; } .ware.evo { overflow: hidden; } .ware.evo .evofaces { height: 2.4em !important; max-height: 2.4em; } .ware.evo .evofaces img { height: 2.4em !important; max-height: 2.4em !important; width: auto !important; } /* сцена лифта */ #vworld .liftfx { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; opacity: 0; transition: opacity .3s; pointer-events: none; } #vworld .liftfx.on { opacity: 1; } #vworld.inTrialLift .guests { z-index: 2; } body.vid[data-phase=kill] #props .lift3d, body.vid[data-phase=killResult] #props .lift3d { } body.liftRoom #props .lift3d { display: none !important; } body.liftRoom.doorsOn:not(.cineOn) #vworld:not(.noguests) .guests, body.liftRoom.doorsOn:not(.cineOn) #tags { opacity: 1 !important; } #vworld .bg .trialbg { transition: none !important; } body.cineOn #vworld .liftfx { opacity: 0 !important; transition: none; } /* ===== v59 ===== */ /* концовка: победитель сразу целиком, без проявления */ body.ending #vworld .guests, body.ending #vworld .vg, body.ending #vworld .vg video { transition: none !important; } body.ending #vworld .vg.winner:not(.ascend) { opacity: 1 !important; filter: none !important; } body.ending #vworld .vg.winner:not(.ascend) video.on { opacity: 1 !important; filter: drop-shadow(0 0 18px #ffd98a66) !important; } /* финал: тьма v59 — мягкая, ровная по всей ширине, без резких краёв */ #vworld .dark .deep { height: calc(100vh - var(--wb) - var(--wh) * .15) !important; background: linear-gradient(#000 0, #000 calc(100% - 26vh), #000000d0 calc(100% - 12vh), transparent 100%) !important; } #vworld .dark .wall { left: -12vw !important; width: 124vw !important; } #vworld .dark.hasvid .wall video { position: absolute; inset: auto !important; top: auto !important; bottom: -18% !important; height: 150% !important; width: 58% !important; left: 0 !important; object-fit: fill; transform: none !important; filter: brightness(.8) contrast(1.15) !important; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%), linear-gradient(#000 70%, transparent 92%) !important; -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%), linear-gradient(#000 70%, transparent 92%) !important; mask-composite: intersect; } #vworld .dark.hasvid .wall video.w2 { left: 42% !important; transform: scaleX(-1) !important; } #vworld .dark .claws { -webkit-mask-image: linear-gradient(transparent 0, transparent 38%, #000 55%, #000 80%, transparent 96%) !important; mask-image: linear-gradient(transparent 0, transparent 38%, #000 55%, #000 80%, transparent 96%) !important; } #vworld .vg.walk, #vworld .vg.walk video.on, #vworld .vg.joy, #vworld .vg.recoil { animation: none !important; } /* без программных прыжков */ /* ===== v65 ===== */ #vworld .dark.waiting .wall, #vworld .dark.waiting .claws { opacity: 0; transition: opacity 1s; } /* победитель — никогда не призрачный */ body.ending #vworld .vg.winner:not(.ascend), body.ending #vworld .vg.winner:not(.ascend).ghost { animation: none !important; } body.ending #vworld .vg.winner:not(.ascend) video.on, body.ending #vworld .vg.winner:not(.ascend).ghost video.on { opacity: 1 !important; -webkit-mask-image: none !important; mask-image: none !important; filter: drop-shadow(0 0 18px #ffd98a55) !important; } body.ending #vworld .vg.winner:not(.ascend) .halo { opacity: .5 !important; background: radial-gradient(ellipse, #ffd98a 0%, transparent 70%) !important; } /* мягкие края роликов персонажей — не видно границ кадра (хлыст, искры) */ #vworld .vg video { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%), linear-gradient(transparent 0, #000 3%, #000 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 5%, #000 95%, transparent 100%), linear-gradient(transparent 0, #000 3%, #000 100%); mask-composite: intersect; } /* побег без роликов: беглец пролетает за кадр, тьма пожирает коридор */ body.ending #vworld.escapeRun .vg { transition: left 1.7s cubic-bezier(.5,0,.8,.6), bottom 1.7s cubic-bezier(.5,0,.8,.6), width 1.7s cubic-bezier(.5,0,.8,.6), height 1.7s cubic-bezier(.5,0,.8,.6), opacity .9s ease-in .8s, filter 1s !important; } body.ending #vworld.escapeRun .vg.gone { opacity: 0 !important; } #vworld .dark.devour .deep { height: 100vh !important; transition: height 2.4s cubic-bezier(.5,0,.3,1) !important; background: linear-gradient(#000 0, #000 70%, #000000e0 100%) !important; } #vworld .dark.devour .claws { height: 120vh !important; bottom: -10vh !important; transition: all 2.4s !important; } body.ending #vworld.escapeRun .guests { opacity: 1 !important; } body.cineOn #vworld .dark { opacity: 0 !important; transition: opacity .3s !important; } body.cineOn #vworld .track { opacity: 0 !important; transition: opacity .3s !important; } /* ===== v68: тьма — гаснет свет по клеткам ===== */ #vworld .dark .wall, #vworld .dark .claws { display: none !important; } #vworld .dark .deep { position: absolute; left: 0; right: 0; top: 0; height: 0; background: linear-gradient(#000 0, #000 calc(100% - 1.2vh), #000000c0 100%) !important; transition: none !important; } #vworld .dark .band { position: absolute; left: 0; right: 0; top: 0; height: 0; background: #000; opacity: 0; pointer-events: none; } #vworld .dark .band.blink { animation: lightsOut 1.5s steps(1) forwards; } @keyframes lightsOut { 0% { opacity: .85; } 12% { opacity: 0; } 22% { opacity: .9; } 30% { opacity: .1; } 44% { opacity: 1; } 52% { opacity: .2; } 66%, 100% { opacity: 1; } } #vworld .dark.devour .deep { height: 100vh !important; } .usefx img { width: 2.2em; height: 2.2em; object-fit: contain; filter: drop-shadow(0 0 12px #ffd98a); } /* v68: во время тяжёлых роликов — без лишних эффектов */ body.heavy #vworld .rfog { display: none !important; } body.heavy .fx.fog, body.heavy .fx.fog2 { display: none !important; } /* v69: ролики Графа в финале — на весь экран и по центру */ body.cineOn #vworld .bg.final video { inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover; } /* v69: покадровая тьма — картинки коридора, где гаснет свет */ #vworld .bg img.stg { position: absolute; top: 0; left: calc(34vw - 75vh); width: 150vh; height: 100vh; object-fit: cover; opacity: 0; transition: opacity .6s; pointer-events: none; } #vworld .bg.final img.stg.on { opacity: 1; } #vworld .bg.final img.stg.flick { animation: stgflick 1.4s steps(1, end) forwards; } @keyframes stgflick { 0% { opacity: 0; } 12% { opacity: 1; } 22% { opacity: 0; } 36% { opacity: 1; } 44% { opacity: .2; } 58% { opacity: 1; } 66% { opacity: 0; } 80%, 100% { opacity: 1; } } #vworld .dark.pics .band { display: none; } #vworld .dark.pics .deep { -webkit-mask-image: linear-gradient(#000 calc(100% - 60px), transparent); mask-image: linear-gradient(#000 calc(100% - 60px), transparent); } body.cineOn #vworld .bg img.stg { display: none; } #vworld .track .step.gone { opacity: 0; transition: opacity 1.2s; } /* v71: без полосок клеток */ #vworld .track { display: none !important; } /* у двери — золотое свечение (мягкий ореол позади, без «коробки») */ #vworld .vg.atdoor { background: radial-gradient(ellipse 50% 48% at 50% 55%, #fff3c8aa 0%, #ffd98a55 40%, #ffd27a1a 70%, transparent 100%); animation: doorglow 1.6s ease-in-out infinite alternate; } @keyframes doorglow { from { background-size: 92% 92%; background-position: center; filter: brightness(1); } to { background-size: 100% 100%; filter: brightness(1.25); } } /* финал: выживший растворяется в ярком свете */ body #vworld .guests .vg.ascend > video.on { animation: ascendV 2.6s ease-in forwards !important; } @keyframes ascendV { 0% { filter: brightness(1.2); opacity: 1; transform: none; } 45% { filter: brightness(2.4); opacity: 1; transform: scale(1.03); } 100% { filter: brightness(6) blur(10px); opacity: 0; transform: scale(1.12) translateY(-5%); } } #vworld .vg .fxglow.light { content: ''; position: absolute; left: -60%; right: -60%; top: -20%; bottom: -15%; pointer-events: none; background: radial-gradient(ellipse at 50% 50%, #ffffff 0%, #fff3c8dd 18%, #ffe9a877 35%, #ffd27a22 55%, transparent 72%); animation: ascendGlow 2.9s ease-in-out forwards; } @keyframes ascendGlow { 0% { opacity: 0; transform: scale(.5); } 50% { opacity: 1; transform: scale(1); } 75% { opacity: 1; transform: scale(1.2); } 100% { opacity: 0; transform: scale(1.6); } } /* остальные взрываются красным */ body #vworld .guests .vg.burst > video.on { animation: burstV 1.2s cubic-bezier(.3,0,.6,1) forwards !important; } @keyframes burstV { 0% { filter: none; opacity: 1; transform: none; } 35% { filter: brightness(1.6) sepia(1) hue-rotate(-50deg) saturate(8); opacity: 1; transform: scale(1.08); } 100% { filter: brightness(2.5) sepia(1) hue-rotate(-50deg) saturate(10) blur(16px); opacity: 0; transform: scale(1.6); } } #vworld .vg .fxglow.red { content: ''; position: absolute; left: -70%; right: -70%; top: -25%; bottom: -20%; pointer-events: none; background: radial-gradient(circle at 50% 50%, #ffd0a0 0%, #ff3a1aee 15%, #c00000aa 35%, #60000044 55%, transparent 70%); animation: burstGlow 1.3s ease-out forwards; } @keyframes burstGlow { 0% { opacity: 0; transform: scale(.2); } 30% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.8); } } #vworld.redburst::after { content: ''; position: absolute; inset: 0; z-index: 50; pointer-events: none; background: radial-gradient(circle at 50% 60%, #ff2a1a99, #8a000099 50%, #300000cc); animation: redflash 1.1s ease-out forwards; } @keyframes redflash { 0% { opacity: 0; } 15% { opacity: 1; } 100% { opacity: .35; } } /* тьма поглощает всё */ #vworld .dark.swallow { opacity: 1 !important; } #vworld .dark.swallow .deep { height: 100% !important; transition: height 1.1s ease-in !important; -webkit-mask-image: none !important; mask-image: none !important; } /* v72: нити марионеток видны поверх тьмы; в финальной тьме — никого */ body.vid[data-phase^=final] #vworld .guests { z-index: 2; } #vworld .dark.swallow { z-index: 6 !important; } body.doomed #tags { opacity: 0 !important; transition: opacity .6s; } #vworld .bg .trialbg.on { animation: none !important; transform: none !important; } /* v72: без «плавающего» зума — фон не дрожит */ .hideroom > video { width: 100%; height: 100%; display: block; object-fit: cover; filter: brightness(.75); } .hideroom img, .hideroom > video { filter: brightness(.92) !important; } /* v73: свет как в других комнатах */ /* v74: новая комната пряток 16:9; при поиске по комнате ползёт тень Графа с фонарём */ .hideroom { aspect-ratio: 16 / 9; } .hideroom .seekshadow { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; } .hideroom .seekshadow .sh { position: absolute; bottom: 4%; height: 82%; width: auto; fill: #000; opacity: .72; filter: blur(7px); animation: seekWalk 11s ease-in-out infinite alternate; transform-origin: 50% 100%; } .hideroom .seekshadow .lamp { position: absolute; top: 15%; width: 40%; height: 75%; background: radial-gradient(ellipse at 50% 50%, #ffcf7a40, #ffb04a1a 40%, transparent 70%); mix-blend-mode: screen; animation: seekLamp 11s ease-in-out infinite alternate; } @keyframes seekWalk { 0% { left: -12%; transform: skewX(-8deg) scaleY(1.05); } 50% { transform: skewX(6deg) scaleY(.98); } 100% { left: 92%; transform: skewX(-6deg) scaleY(1.04); } } @keyframes seekLamp { 0% { left: -20%; opacity: .6; } 30% { opacity: 1; } 60% { opacity: .7; } 100% { left: 80%; opacity: 1; } } .hideroom .hspot { z-index: 2; } /* v75: имя растворяется вместе с персонажем */ #tags .tag.fxAscend { animation: tagAscend 2.6s ease-in forwards; } @keyframes tagAscend { 0% { opacity: 1; filter: none; } 45% { opacity: 1; filter: brightness(2.5) drop-shadow(0 0 10px #fff); } 100% { opacity: 0; filter: brightness(4) blur(6px); } } #tags .tag.fxBurst { animation: tagBurst .9s ease-out forwards; } @keyframes tagBurst { 0% { opacity: 1; } 30% { opacity: 1; filter: sepia(1) hue-rotate(-50deg) saturate(8) drop-shadow(0 0 10px #f00); } 100% { opacity: 0; filter: blur(6px); transform: scale(1.4); } } /* персонаж лопается и исчезает вместе с красной вспышкой */ body #vworld .guests .vg.burst > video.on { animation: burstV .9s cubic-bezier(.3,0,.6,1) forwards !important; } @keyframes burstV { 0% { filter: none; opacity: 1; transform: none; } 25% { filter: brightness(1.8) sepia(1) hue-rotate(-50deg) saturate(9); opacity: 1; transform: scale(1.1); } 60% { filter: brightness(2.6) sepia(1) hue-rotate(-50deg) saturate(10) blur(10px); opacity: .25; transform: scale(1.45); } 100% { opacity: 0; transform: scale(1.6); filter: blur(18px); } } #vworld .vg .fxglow.red { animation: burstGlow 1s ease-out forwards; } /* финал: над выжившим у дверей — его имя */ body.winShow #tags { opacity: 1 !important; transition: opacity .8s; } body.winShow #tags .tag:not(.win) { display: none !important; } body.winShow #tags .tag.win .tn { font-size: 1.6em; text-shadow: 0 0 12px #ffd98a, 0 2px 4px #000; } #vworld .vg .fxglow { position: absolute; display: block; z-index: 3; } body.vid #vworld .vg.ascend::before, body.vid #vworld .vg.ascend::after, body.vid #vworld .vg.burst::before, body.vid #vworld .vg.burst::after { opacity: 0 !important; transition: opacity .8s; } body #vworld .guests .vg.ascend > :not(video.on):not(.fxglow), body #vworld .guests .vg.burst > :not(video.on):not(.fxglow) { opacity: 0 !important; } .offer .oi .ipic, .note .ipic, .bought .ipic { height: 1.6em; width: auto; vertical-align: middle; object-fit: contain; } img.emo { object-fit: contain; } .hspot .ic .spic { height: 2em; width: 2em; object-fit: contain; display: block; margin: 0 auto; filter: drop-shadow(0 2px 4px #000); } #tags .tmic { font-size: .8em; margin-left: .3em; opacity: .85; } body.vid #vworld .vg.falling::before, body.vid #vworld .vg.falling::after { opacity: 0 !important; transition: opacity .6s; } /* провал: нити обрываются */