/* «Бездна душ» — бумажный Миктлан. Графика: /assets (собирается tools/build-assets.mjs из бренд-кита). */ @font-face { font-family: 'Yeseva One'; src: url(/assets/fonts/yeseva.woff2) format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Rubik'; src: url(/assets/fonts/rubik.woff2) format('woff2'); font-weight: 300 900; font-display: swap; } :root { --bg: #120b14; --bg2: #1d1320; --card: #241827; --card2: #2e1f33; --line: #3d2a42; --txt: #f3e3c3; --mut: #c4ae9c; --gold: #e2b04a; --gold2: #fbba64; --pink: #e2457a; --teal: #3fb7ae; --red: #ff6a5a; --green: #5fd07a; --blue: #4ba8ff; --cemp: #f46a32; --oxblood: #7d261e; --obsidian: #141314; --stone-dark: #3f3833; --r: 14px; --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px); --f-display: 'Yeseva One', Georgia, serif; --f-ui: 'Rubik', system-ui, sans-serif; --f-text: var(--f-ui); --r-frame: 14px; --r-card: calc(var(--r-frame) * .7); --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --fs-h1: 22px; --fs-h2: 18px; --fs-btn: 16px; --fs-sm: 15px; --fs-text: 15px; --fs-meta: 15px; --fs-tiny: 15px; --U: /assets/ui; /* для справки; url() не принимает переменные */ } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html { background: #070407; } html, body { margin: 0; min-height: 100%; color: var(--txt); font: var(--fs-text)/1.4 var(--f-ui); overscroll-behavior: none; } body { display: flex; justify-content: center; } /* десктоп: размытый фон экрана по бокам колонки */ body::before { content: ''; position: fixed; inset: -40px; background: var(--bgwide, var(--bgimg, none)) center / cover no-repeat; filter: blur(14px) brightness(.38) saturate(1.15); z-index: -2; } @media (max-width: 560px) { body::before { display: none; } } #app { width: 100%; max-width: 480px; min-height: 100vh; position: relative; display: flex; flex-direction: column; isolation: isolate; } #app::before { content: ''; position: fixed; top: 0; bottom: 0; width: 100%; max-width: 480px; background: var(--bgimg, none) center top / cover no-repeat, #120b14; z-index: -1; } #app::after { content: ''; position: fixed; top: 0; bottom: 0; width: 100%; max-width: 480px; z-index: -1; pointer-events: none; background: linear-gradient(180deg, rgba(10,6,11,.55) 0%, rgba(10,6,11,.62) 40%, rgba(10,6,11,.78) 100%); } #app[data-screen=hub]::after { background: linear-gradient(180deg, rgba(10,6,11,.25) 0%, rgba(10,6,11,.55) 45%, rgba(10,6,11,.85) 70%); } button { font: inherit; color: inherit; border: 0; cursor: pointer; background: none; } button:focus-visible, summary:focus-visible, [data-a]:focus-visible { outline: 2px solid var(--gold2); outline-offset: 3px; } input { font: inherit; } .hidden { display: none !important; } .mut { color: var(--mut); } .gold { color: var(--gold2); } .red { color: var(--red); } .green { color: var(--green); } .teal { color: var(--teal); } .small { font-size: var(--fs-meta); } .tiny { font-size: var(--fs-tiny); } /* Элемент small в браузере сам уменьшает шрифт (~83%). Игровой текст не опускаем ниже 15px. */ small { font-size: max(15px, 1em); } .row { display: flex; gap: var(--space-2); align-items: center; } .col { display: flex; flex-direction: column; gap: var(--space-3); } .grow { flex: 1; min-width: 0; } .wrap { flex-wrap: wrap; } .between { justify-content: space-between; } .center { text-align: center; } .hand { font-family: var(--f-ui); font-size: 20px; line-height: 1.3; font-style: italic; letter-spacing: .3px; } .display { font-family: var(--f-display); font-weight: 400; } img.ic { width: 18px; height: 18px; object-fit: contain; vertical-align: -3px; flex: none; } img.ic.lg { width: 24px; height: 24px; vertical-align: -6px; } img.ic.xl { width: 30px; height: 30px; } p, .txt { font-family: var(--f-text); } /* ---------- 9-slice панели и кнопки ---------- */ .card { border: var(--r-frame) solid transparent; border-image: url(/assets/ui/panel/card@256.webp) 64 fill / var(--r-frame); padding: var(--space-1); position: relative; } .card.alt { border-image-source: url(/assets/ui/panel/card_alt@256.webp); border-image-slice: 48 fill; } .card h2, .card h3 { margin: 0 0 var(--space-2); font: 600 var(--fs-h2)/1.3 var(--f-ui); color: var(--gold2); } .btn { --bi: url(/assets/ui/button/btn_secondary_default@720.webp); --bip: url(/assets/ui/button/btn_secondary_pressed@720.webp); border: 12px solid transparent; border-image: var(--bi) 56 fill / 12px; border-radius: var(--r); padding: 2px 6px; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font: 600 var(--fs-btn)/1.2 var(--f-ui); color: #fff4dc; text-shadow: 0 1px 2px #0009; transition: transform .08s; text-align: center; overflow-wrap: anywhere; } .btn:active { transform: scale(0.97); border-image-source: var(--bip); } .btn.primary { --bi: url(/assets/ui/button/btn_primary_default@720.webp); --bip: url(/assets/ui/button/btn_primary_pressed@720.webp); color: #fff8e6; text-shadow: 0 1px 2px #6a1d0a; } .btn.pink { --bi: url(/assets/ui/button/btn_pink_default@720.webp); --bip: url(/assets/ui/button/btn_pink_pressed@720.webp); } .btn.teal { --bi: url(/assets/ui/button/btn_secondary_default@720.webp); --bip: url(/assets/ui/button/btn_secondary_pressed@720.webp); } .btn.danger { --bi: url(/assets/ui/button/btn_danger_default@720.webp); --bip: url(/assets/ui/button/btn_danger_pressed@720.webp); } .btn.ghost { --bi: url(/assets/ui/button/btn_ghost_default@720.webp); --bip: url(/assets/ui/button/btn_ghost_pressed@720.webp); } .btn.sm { --bi: url(/assets/ui/button/btn_sm_default@360.webp); --bip: url(/assets/ui/button/btn_sm_pressed@360.webp); border-width: 8px; border-image-slice: 40 fill; border-image-width: 8px; min-height: 44px; min-width: 44px; padding: 2px 4px; font-size: var(--fs-sm); } .btn.sm.primary { --bi: url(/assets/ui/button/btn_primary_default@720.webp); --bip: url(/assets/ui/button/btn_primary_pressed@720.webp); border-image-slice: 56 fill; } .btn.sm.danger { --bi: url(/assets/ui/button/btn_danger_default@720.webp); --bip: url(/assets/ui/button/btn_danger_pressed@720.webp); border-image-slice: 56 fill; } .btn.icon { --bi: url(/assets/ui/button/btn_icon_default@192.webp); --bip: url(/assets/ui/button/btn_icon_pressed@192.webp); border-width: 0; border-image: none; background: var(--bi) center / 100% 100% no-repeat; width: 50px; min-width: 50px; height: 50px; min-height: 50px; padding: 0; } .btn.icon:active { background-image: var(--bip); } .btn.icon img.ic { width: 26px; height: 26px; } .btn.block { width: 100%; } .btn[disabled] { --bi: url(/assets/ui/button/btn_disabled_default@720.webp); color: #cdbfb0; text-shadow: none; pointer-events: none; opacity: .9; } .btn.sm[disabled] { --bi: url(/assets/ui/button/btn_sm_disabled@360.webp); } .btn.icon[disabled] { background-image: url(/assets/ui/button/btn_icon_disabled@192.webp); } .cta { font: 600 18px/1.2 var(--f-ui); min-height: 56px; } .chips { display: flex; flex-wrap: wrap; gap: var(--space-2); } .chip { border: 1px solid var(--line); border-radius: 8px; background: #1d1320dc; padding: 6px 10px; min-height: 44px; max-width: 100%; font-size: var(--fs-sm); white-space: normal; text-align: center; color: var(--mut); } .chip.on { border-color: var(--teal); background: #163c38; color: #c2fff2; font-weight: 600; } .tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-1); background: #120b14c9; border-radius: 8px; padding: var(--space-1); } .tabs button { border-bottom: 2px solid transparent; padding: 6px 2px; min-height: 44px; color: var(--mut); font-weight: 600; font-size: var(--fs-text); } .tabs button.on { border-bottom-color: var(--gold2); background: #e2b04a12; color: #fff4dc; } /* ---------- предметы ---------- */ .item { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1); min-height: 72px; border: var(--r-card) solid transparent; border-image: url(/assets/ui/rarity/row_common@720.webp) 40 / var(--r-card); --rc: 191,180,158; background: linear-gradient(90deg, rgba(var(--rc),.18), rgba(var(--rc),.06) 55%, rgba(18,12,10,.65)), #241a14ed; background-clip: padding-box; text-align: left; width: 100%; color: var(--tx, #f3e3c3); } .item.r1 { border-image-source: url(/assets/ui/rarity/row_uncommon@720.webp); --rc: 76,175,101; } .item.r2 { border-image-source: url(/assets/ui/rarity/row_rare@720.webp); --rc: 55,143,212; } .item.r3 { border-image-source: url(/assets/ui/rarity/row_epic@720.webp); --rc: 148,87,203; } .item.r4 { border-image-source: url(/assets/ui/rarity/row_legendary@720.webp); --rc: 230,156,44; } .islot { width: 56px; height: 56px; flex: none; display: grid; place-items: center; margin: 0; } .islot img.ico, .item img.ico { width: 52px; height: 52px; object-fit: contain; filter: drop-shadow(0 2px 3px #000a); } .item .portrait.sm { margin-left: -4px; } .item .nm { font-weight: 600; font-size: 15px; } .item .sub { font-size: 15px; color: #d9c6a4; } .item .nm, .item .sub { text-shadow: 0 1px 2px #000c; } .rar0 { color: #e3d7bf; } .rar1 { color: #6fdc8a; } .rar2 { color: #6cbcff; } .rar3 { color: #cf8bff; } .rar4 { color: #ffb84a; } .gem { width: 12px; height: 12px; vertical-align: -1px; margin-right: 3px; } .tag { display: inline-flex; align-items: center; gap: 3px; height: auto; min-height: 22px; font-size: 15px; font-weight: 700; padding: 1px 4px; margin-left: 4px; vertical-align: 1px; } border: 1px solid var(--line); border-radius: 4px; background: #120b14a6; color: var(--mut); text-transform: uppercase; letter-spacing: .3px; line-height: 1; } .tag.super, .tag.counter { color: var(--gold2); } .tag.npc, .tag.player { color: var(--teal); } .tag.timer { text-transform: none; } .tag.new { color: var(--green); } .list { display: flex; flex-direction: column; gap: var(--space-2); } .empty { color: var(--mut); text-align: center; padding: 8px 8px 14px; font-size: 15px; display: flex; flex-direction: column; align-items: center; gap: 4px; } .empty img { width: 120px; height: 120px; object-fit: contain; filter: drop-shadow(0 6px 10px #0008); } .empty.small img { width: 84px; height: 84px; } /* ---------- верх и навигация ---------- */ .top { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; padding: calc(4px + var(--safe-t)) 12px 4px; min-height: 56px; border: 0 solid transparent; border-width: 0 16px; border-image: url(/assets/ui/panel/topbar@256.webp) 0 48 fill / 0 16px; } .top h1 { font: 400 var(--fs-h1)/1.3 var(--f-display); margin: 0; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--gold2); text-shadow: 0 2px 4px #000; } .top .btn.icon { width: 44px; min-width: 44px; height: 44px; min-height: 44px; } .top .btn.icon img.ic { width: 22px; height: 22px; } .money { display: inline-flex; align-items: center; gap: 4px; height: auto; min-height: 44px; padding: 0 4px; border: 10px solid transparent; border-image: url(/assets/ui/badge/tag_money@160.webp) 24 fill / 10px; color: #fff1c8; font-weight: 700; font-size: 15px; line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px #000; } .money img { width: 20px; height: 20px; margin-left: -4px; } .content { flex: 1; padding: var(--space-3) var(--space-3) calc(92px + var(--safe-b)); display: flex; flex-direction: column; gap: var(--space-4); } .nav { position: fixed; bottom: 0; width: 100%; max-width: 480px; display: grid; grid-template-columns: 0.68fr 0.8fr 1.7fr 0.88fr 0.99fr; padding: 6px 2px calc(4px + var(--safe-b)); z-index: 6; border: 0 solid transparent; border-width: 0 16px; border-image: url(/assets/ui/panel/navbar@256.webp) 0 48 fill / 0 16px; } .nav button { padding: 2px 0 4px; display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: 15px; line-height: 1.05; text-align: center; white-space: nowrap; color: var(--mut); min-height: 58px; } .nav button img { width: 24px; height: 24px; object-fit: contain; filter: grayscale(.7) brightness(.75); transition: transform .15s; } .nav button.on { color: var(--gold2); } .nav button.on img { filter: drop-shadow(0 0 6px #f29a2e88); transform: translateY(-2px) scale(1.06); } /* ---------- хаб — офренда на фоне bg.hub_ofrenda ---------- */ .ofrenda { position: relative; margin: calc(-1 * var(--space-3)) calc(-1 * var(--space-3)) 0; overflow: hidden; aspect-ratio: 1080 / 860; } .ofrenda .obg { position: absolute; left: 0; width: 100%; top: calc(var(--y0) * -100% / var(--yh)); height: calc(100% / var(--yh)); object-fit: cover; } .ofrenda .picado { position: absolute; top: 0; left: 0; right: 0; height: 52px; background: url(/assets/ui/divider/papel_picado_tile@960.webp) center top / auto 100% repeat-x; z-index: 2; filter: drop-shadow(0 3px 4px #0008); } .ofrenda .slot { position: absolute; display: flex; align-items: center; justify-content: center; background: none; border-radius: 10px; z-index: 3; } .ofrenda .slot::before { content: ''; position: absolute; inset: 0; border-radius: 10px; transition: box-shadow .2s, background .2s; } .ofrenda .slot:active::before, .ofrenda .slot:focus-visible::before { box-shadow: inset 0 0 0 2px var(--gold2), 0 0 14px #f29a2e88; } .ofrenda .slot .art { position: absolute; display: flex; align-items: flex-end; justify-content: center; } .ofrenda .slot .art img { max-width: 100%; max-height: 135%; object-fit: contain; filter: drop-shadow(0 4px 5px #000c); } .ofrenda .slot.filled .glow { position: absolute; inset: 10% 15%; border-radius: 50%; background: radial-gradient(circle, var(--rc, #e3d7bf55), transparent 70%); } .ofrenda .slot .plus { width: 26px; height: 26px; opacity: .55; filter: drop-shadow(0 0 6px #ffcf7a); } .ofrenda .petals { position: absolute; inset: 0; pointer-events: none; z-index: 4; } .ofrenda .petals i { position: absolute; top: -20px; width: 18px; height: 18px; background: url(/assets/vfx/petals_ambient@192.webp) 0 0 / 54px 36px; opacity: .85; animation: fall 11s linear infinite; } .ofrenda .candles { position: absolute; bottom: 4%; left: 0; right: 0; display: flex; justify-content: space-between; padding: 0 3%; pointer-events: none; z-index: 2; } @keyframes fall { from { transform: translate(0, 0) rotate(0); } 50% { transform: translate(14px, 260px) rotate(180deg); } to { transform: translate(-6px, 560px) rotate(360deg); } } .ofrenda .val { position: absolute; left: 0; right: 0; bottom: 0; padding: 8px 12px; background: linear-gradient(transparent, #120b14ed 35%); text-align: center; font-size: var(--fs-meta); z-index: 4; text-shadow: 0 1px 3px #000; } .statgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .stat { padding: var(--space-2); background: #120b1480; border-radius: 8px; text-align: center; min-height: 60px; display: flex; flex-direction: column; justify-content: center; } .stat b { display: block; font: 600 20px var(--f-ui); color: #fff1d0; } .stat span { font-size: var(--fs-tiny); color: var(--mut); } .hub-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); } .hub-about summary { color: var(--mut); cursor: pointer; padding: var(--space-2) 0; } .layers { display: flex; gap: 3px; margin-top: 6px; } .layers i { flex: 1; height: 10px; border-radius: 3px; } .emblems { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; margin-top: 6px; } .emblems img { width: 100%; aspect-ratio: 1; object-fit: contain; } .emblems img.off { filter: grayscale(1) brightness(.45); opacity: .7; } .divider { height: 22px; background: url(/assets/ui/divider/greca@960.webp) center / auto 100% repeat-x; opacity: .9; margin: 2px 0; } .garland { height: 26px; background: url(/assets/ui/divider/marigold_garland@960.webp) center / auto 100% repeat-x; } /* ---------- герои ---------- */ .hero { display: flex; gap: 12px; align-items: flex-start; } .soul-name { font-size: var(--fs-h2); line-height: 1.4; } .portrait { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; object-position: center 20%; background: radial-gradient(circle at 50% 35%, #3a2a3a, #140c14); border: 3px solid var(--gold); box-shadow: 0 0 0 2px #5a3a10, 0 4px 10px #000a; flex: none; } .portrait.sm { width: 46px; height: 46px; border-width: 2px; } .portrait.lg { width: 140px; height: 140px; } .portrait.dead { filter: grayscale(1) contrast(1.1) brightness(.6) sepia(.15); border-color: #6e625a; } .heroart { position: relative; flex: none; } .heroart .badge { position: absolute; right: -6px; bottom: -4px; width: 34px; height: 34px; } .pbar { position: relative; height: 16px; border: 0 solid transparent; border-width: 0 8px; border-image: url(/assets/ui/bar/bar_xp_frame@840.webp) 0 40 fill / 0 8px; } .pbar > i { position: absolute; inset: 0 -8px; border: 0 solid transparent; border-width: 0 8px; border-image: url(/assets/ui/bar/bar_xp_fill@840.webp) 0 40 fill / 0 8px; transition: clip-path .35s; } .pbar.hp { border-image-source: url(/assets/ui/bar/bar_hp_frame@840.webp); } .pbar.hp > i { border-image-source: url(/assets/ui/bar/bar_hp_fill@840.webp); } .pbar.hp.low > i { border-image-source: url(/assets/ui/bar/bar_hp_glow@840.webp); animation: pulse 1s infinite alternate; } .pbar.o2 { border-image-source: url(/assets/ui/bar/bar_air_frame@840.webp); } .pbar.o2 > i { border-image-source: url(/assets/ui/bar/bar_air_fill@840.webp); } .pbar.light { border-image-source: url(/assets/ui/bar/bar_light_frame@840.webp); } .pbar.light > i { border-image-source: url(/assets/ui/bar/bar_light_fill@840.webp); } @keyframes pulse { to { filter: brightness(1.35); } } .kv { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; font-size: 15px; text-align: center; } .kv div { border-bottom: 1px solid var(--line); border-radius: 6px; background: #120b145c; padding: var(--space-2) var(--space-1); color: var(--mut); line-height: 1.2; } .kv b { display: flex; align-items: center; justify-content: center; gap: 3px; font-size: 15px; color: #fff1d0; } .kv b img.ic { width: 16px; height: 16px; } .ready { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; margin-top: 4px; } .ready i { height: 12px; background: url(/assets/ui/bar/readiness_segments_safe@64.webp) center / 100% 100%; } .ready i.low { background-image: url(/assets/ui/bar/readiness_segments_low@64.webp); } .ready i.mid { background-image: url(/assets/ui/bar/readiness_segments_mid@64.webp); } .ready i.high { background-image: url(/assets/ui/bar/readiness_segments_high@64.webp); } .tomb { text-align: center; padding: 2px 0; } .tombart { width: 96px; height: 96px; object-fit: contain; flex: none; } /* ---------- снаряжение ---------- */ .eqgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .eq { position: relative; aspect-ratio: 1; background: url(/assets/ui/slot/eq_weapon@256.webp) center / 100% 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8% 4% 4%; } .eq[data-slot=armor] { background-image: url(/assets/ui/slot/eq_armor@256.webp); } .eq[data-slot=lamp] { background-image: url(/assets/ui/slot/eq_lamp@256.webp); } .eq[data-slot=tank] { background-image: url(/assets/ui/slot/eq_tank@256.webp); } .eq[data-slot=super] { background-image: url(/assets/ui/slot/eq_perk@256.webp); } .eq[data-slot=belt] { background-image: url(/assets/ui/slot/eq_belt@256.webp); } .eq.locked { background-image: url(/assets/ui/slot/eq_perk_locked@256.webp) !important; } .eq.full { background-image: url(/assets/ui/rarity/slot_common@256.webp) !important; } .eq.full.r1 { background-image: url(/assets/ui/rarity/slot_uncommon@256.webp) !important; } .eq.full.r2 { background-image: url(/assets/ui/rarity/slot_rare@256.webp) !important; } .eq.full.r3 { background-image: url(/assets/ui/rarity/slot_epic@256.webp) !important; } .eq.full.r4 { background-image: url(/assets/ui/rarity/slot_legendary@256.webp) !important; } .eq img { width: 62%; height: 62%; object-fit: contain; filter: drop-shadow(0 3px 4px #000b); } .eq .nm { position: absolute; left: 2px; right: 2px; bottom: -16px; color: var(--txt); font-size: 15px; line-height: 1.1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .eq .lk { position: absolute; bottom: 10%; font-size: 15px; color: #e9ddc4; text-shadow: 0 1px 2px #000; } .eqwrap { padding-bottom: 18px; } .charpick { display: flex; gap: 6px; } .charpick button { flex: 1; min-width: 0; border: 10px solid transparent; border-image: url(/assets/ui/ctrl/chip_off@360.webp) 40 fill / 10px; padding: 0; display: flex; align-items: center; gap: 6px; font-size: 15px; text-align: left; line-height: 1.15; overflow-wrap: anywhere; } .charpick button.on { border-image-source: url(/assets/ui/ctrl/chip_on@360.webp); color: #2a1206; } .charpick button.on .mut { color: #5a3410; } .charpick .portrait.sm { width: 38px; height: 38px; margin: -4px 0 -4px -4px; } .npcline { display: flex; gap: 10px; align-items: flex-end; } .npcline img.npc { width: 92px; height: 122px; object-fit: contain; object-position: bottom; flex: none; margin: -14px -4px -8px -8px; filter: drop-shadow(0 4px 6px #000a); } .npcline .say { flex: 1; font-family: var(--f-text); font-size: 15px; } .npcline .say b { font-weight: 600; color: var(--gold2); display: block; font-size: 15px; } .npc-banner { border-bottom: 1px solid var(--line); background: #120b14b8; border-radius: 8px; padding: var(--space-2) var(--space-3); } .npc-banner summary { display: flex; align-items: center; gap: var(--space-2); min-height: 36px; cursor: pointer; color: var(--gold2); font-weight: 600; list-style: none; } .npc-banner summary::-webkit-details-marker { display: none; } .npc-banner summary::after { content: '▾'; margin-left: auto; color: var(--mut); } .npc-banner[open] summary::after { content: '▴'; } .npc-banner summary img { width: 32px; height: 32px; object-fit: contain; } .npc-banner .npcline { align-items: center; padding-top: var(--space-2); } .npc-banner .npcline img.npc { width: 64px; height: 78px; margin: 0; } .npc-banner .say { font-size: var(--fs-text); line-height: 1.4; } .seller { display: inline-flex; align-items: center; gap: 4px; } .seller img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; object-position: top; background: #0006; border: 1px solid var(--gold); } /* ---------- погружение ---------- */ .dive { position: fixed; inset: 0; z-index: 20; display: flex; justify-content: center; background: #050305; } .dive .dbg { position: absolute; inset: -30px; background: var(--dbg) center / cover no-repeat; filter: blur(16px) brightness(.4); } .dive-inner { position: relative; width: 100%; max-width: 480px; display: flex; flex-direction: column; height: 100%; overflow: hidden; isolation: isolate; } .dive-inner::before { content: ''; position: absolute; inset: 0; background: var(--dbg) center top / cover no-repeat; z-index: -2; } .dive-inner::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,5,9,.45), rgba(8,5,9,.7) 45%, rgba(8,5,9,.9)); z-index: -1; } .dhud { margin: calc(var(--space-2) + var(--safe-t)) var(--space-2) 0; border: var(--r-frame) solid transparent; border-image: url(/assets/ui/panel/dive_hud@256.webp) 48 fill / var(--r-frame); padding: 0; display: flex; gap: var(--space-2); align-items: center; } .dhud .bars { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: 15px; } .dhud .bars .lbl { display: flex; justify-content: space-between; color: #e5d4c0; gap: 6px; white-space: nowrap; } .dhud .bars .lbl span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .depthbar { margin: var(--space-2) var(--space-2) 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; row-gap: 4px; gap: var(--space-2); padding: var(--space-2); min-height: 40px; font-size: var(--fs-meta); border-bottom: 1px solid var(--line); background: #120b14d9; border-radius: 8px; } .depthbar .lname { display: inline-flex; align-items: center; gap: 4px; flex: 1 1 auto; min-width: min(100%, max-content); max-width: 100%; white-space: nowrap; overflow: hidden; } .depthbar .lname img { width: 22px; height: 22px; } .doom { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; font-size: 15px; color: #ffd2c8; white-space: nowrap; position: relative; } .doom img { width: 26px; height: 26px; } .doom.safe { color: #a8f0c0; } .doom .vfx { position: absolute; left: -12px; top: -12px; pointer-events: none; } .scene { position: relative; margin: 6px 8px 0; border-radius: 14px; overflow: hidden; aspect-ratio: 1440 / 1020; max-height: 36vh; width: calc(100% - 16px); align-self: center; box-shadow: 0 0 0 2px #a8741e, 0 0 0 4px #2a1a10, 0 8px 18px #000c; background: #120b14; flex: none; } @media (max-height: 700px) { .scene { max-height: 30vh; } } .dive-inner:has(.opts.many) .scene { max-height: 27vh; } .dive-inner:has(.dscroll.combat) .scene { max-height: 31vh; } @media (max-height: 820px) { .dive-inner:has(.dscroll.combat) .scene { max-height: 26vh; } } .dive-inner:has(.dscroll.combat) .soulline { display: none; } .opts.many .opt { min-height: 58px; } .opts.many .opt:last-child:nth-child(odd) { grid-column: span 2; } .dscroll { -webkit-mask-image: linear-gradient(#000 calc(100% - 18px), #0000); mask-image: linear-gradient(#000 calc(100% - 18px), #0000); } .scene .sbg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .scene .dark { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 55%, transparent 25%, rgba(0,0,0,var(--dk,0)) 75%); } .scene .mon { position: absolute; right: 2%; bottom: 8%; height: 86%; width: auto; max-width: 62%; object-fit: contain; filter: drop-shadow(0 6px 10px #000d); animation: monIn .35s ease-out; } .scene .mon.boss { right: 50%; transform: translateX(50%); height: 98%; max-width: 80%; bottom: 0; } .scene .mon.elite { filter: drop-shadow(0 0 10px #ff2a2a) drop-shadow(0 6px 10px #000d); } .scene .npcm { position: absolute; right: 4%; bottom: 0; height: 92%; object-fit: contain; filter: drop-shadow(0 6px 10px #000d) opacity(.92); } @keyframes monIn { from { transform: translateX(30px) scale(.9); opacity: 0; } } .scene .mon.boss { animation: bossIn .6s ease-out; } @keyframes bossIn { from { transform: translateX(50%) scale(1.15); opacity: 0; } } .scene .ttl { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 12px 8px; background: linear-gradient(transparent, rgba(0,0,0,0.88)); } .scene .ttl b { display: block; font: 400 var(--fs-h2)/1.4 var(--f-display); text-shadow: 0 2px 4px #000; } .scene .ttl span { font-size: var(--fs-meta); color: #e3d2c4; } .scene .pw { display: inline-flex; align-items: center; gap: 3px; font: 600 15px var(--f-ui); color: #ffb0a8; } .scene .pw img { width: 16px; height: 16px; } .scene .fx { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; } .scene .fx .vfx { grid-area: 1 / 1; } .scene.shake { animation: shake .35s; } @keyframes shake { 20% { transform: translate(-6px, 2px); } 40% { transform: translate(5px, -3px); } 60% { transform: translate(-4px, 1px); } 80% { transform: translate(3px, 0); } } .dscroll { flex: 1; overflow-y: auto; padding: var(--space-3) var(--space-2); display: flex; flex-direction: column; gap: var(--space-3); min-height: 60px; } .outcome { border-left: 2px solid var(--line); background: #120b14bf; border-radius: 0 8px 8px 0; padding: var(--space-2) var(--space-3); animation: pop .25s; position: relative; } .outcome.good, .outcome.safe { border-left-color: var(--green); } .outcome.bad { border-left-color: var(--red); } @keyframes pop { from { transform: scale(.96); opacity: 0; } to { transform: none; opacity: 1; } } .outcome > b { font: 600 var(--fs-text) var(--f-ui); color: #fff1d0; } .outcome p { margin: var(--space-1) 0 0; font-size: var(--fs-text); } .rolls { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; } .found { position: relative; display: flex; gap: 8px; align-items: center; margin-top: 8px; padding: 4px 6px; border-radius: 10px; background: #0007; } .found .islot { margin: 0; } .found .vfx { position: absolute; left: -38px; top: -46px; pointer-events: none; } .opts { padding: var(--space-3) var(--space-2) calc(var(--space-3) + var(--safe-b)); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); } .opt { --oi: url(/assets/ui/option/opt_neutral@540.webp); --op: url(/assets/ui/option/opt_neutral_pressed@540.webp); --ob: url(/assets/ui/option/opt_neutral_busy@540.webp); border: 12px solid transparent; border-image: var(--oi) 48 fill / 12px; border-radius: var(--r); padding: 2px 4px; min-height: 52px; font: 600 var(--fs-btn)/1.2 var(--f-ui); text-align: left; display: grid; grid-template-columns: auto 1fr; column-gap: var(--space-2); align-items: center; } .opt img.ic { width: 24px; height: 24px; margin: 0; filter: drop-shadow(0 2px 2px #0009); } .opt b { font: inherit; color: #fff4dc; text-shadow: 0 1px 2px #000a; } .opts > .action-notes, .opts > .option-meta { grid-column: 1 / -1; } .action-notes, .option-meta { font-size: var(--fs-meta); color: var(--mut); background: #120b14bf; border-radius: 8px; padding: var(--space-2) var(--space-3); } .action-notes summary { cursor: pointer; min-height: 24px; color: var(--txt); } .action-notes p { margin: var(--space-2) 0; } .action-notes dl { margin: var(--space-2) 0 0; } .action-notes dt { color: var(--txt); font-weight: 600; } .action-notes dd { margin: 0 0 var(--space-2); } .opt.primary { --oi: url(/assets/ui/option/opt_primary@540.webp); --op: url(/assets/ui/option/opt_primary_pressed@540.webp); --ob: url(/assets/ui/option/opt_primary_busy@540.webp); } .opt.safe { --oi: url(/assets/ui/option/opt_safe@540.webp); --op: url(/assets/ui/option/opt_safe_pressed@540.webp); --ob: url(/assets/ui/option/opt_safe_busy@540.webp); } .opt.danger { --oi: url(/assets/ui/option/opt_danger@540.webp); --op: url(/assets/ui/option/opt_danger_pressed@540.webp); --ob: url(/assets/ui/option/opt_danger_busy@540.webp); } .opt.warn { --oi: url(/assets/ui/option/opt_warn@540.webp); --op: url(/assets/ui/option/opt_warn_pressed@540.webp); --ob: url(/assets/ui/option/opt_warn_busy@540.webp); } .opt.item { --oi: url(/assets/ui/option/opt_item@540.webp); --op: url(/assets/ui/option/opt_item_pressed@540.webp); --ob: url(/assets/ui/option/opt_item_busy@540.webp); } .opt:active { transform: scale(.97); border-image-source: var(--op); } .opts.busy .opt { border-image-source: var(--ob); pointer-events: none; } .opts.busy .opt > * { opacity: .55; } .bagline { display: flex; align-items: center; gap: 6px; font-size: 15px; color: #e5d4c0; border: 10px solid transparent; border-image: url(/assets/ui/panel/bagline@256.webp) 32 fill / 10px; padding: 0 2px; min-height: 44px; cursor: pointer; flex-wrap: wrap; } .bagline img.bi { width: 26px; height: 26px; object-fit: contain; } .reqs { font-size: 15px; color: #e5d4c0; border: 10px solid transparent; border-image: url(/assets/ui/panel/reqs@256.webp) 32 fill / 10px; padding: 0 2px; } .newlayer { position: absolute; inset: 0; display: grid; place-items: center; z-index: 30; pointer-events: none; } .newlayer .nlt { position: relative; text-align: center; font: 400 28px var(--f-display); color: #ffe3a1; text-shadow: 0 2px 8px #000, 0 0 24px #f29a2e; padding: 0 16px; animation: nlt 2.4s forwards; } .newlayer .nlt small { display: block; font: 600 15px var(--f-ui); color: #f3e3c3; letter-spacing: 1px; text-transform: uppercase; } .newlayer .nlt img { width: 84px; height: 84px; display: block; margin: 0 auto 4px; } @keyframes nlt { 0% { opacity: 0; transform: scale(.9); } 15%, 75% { opacity: 1; transform: none; } 100% { opacity: 0; } } .fxlayer { position: absolute; inset: 0; pointer-events: none; z-index: 25; display: grid; place-items: center; overflow: hidden; } .fxlayer > * { grid-area: 1 / 1; } .fxlayer .full { width: 100% !important; height: 100% !important; } .overlay { position: absolute; inset: 0; background: center / cover no-repeat; pointer-events: none; z-index: 24; animation: ovl .6s ease-out forwards; } @keyframes ovl { from { opacity: 1; } to { opacity: 0; } } .overlay.hold { animation: breathe 1.6s ease-in-out infinite alternate; opacity: .6; } @keyframes breathe { from { opacity: .35; } to { opacity: .75; } } .splash { position: absolute; inset: 0; z-index: 35; background: #000 center / cover no-repeat; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; padding: 0 16px calc(28px + var(--safe-b)); animation: fade .3s; cursor: pointer; } .splash h2 { font: 400 30px var(--f-display); color: #ffe3a1; margin: 0; text-shadow: 0 2px 10px #000, 0 0 30px #b62e24; text-align: center; } .splash .mut { text-shadow: 0 1px 4px #000; } /* ---------- итог ---------- */ .result { position: fixed; inset: 0; z-index: 30; display: flex; justify-content: center; background: #050305; animation: fade .3s; } .result .rbg { position: absolute; inset: 0; background: var(--rbg) center / cover no-repeat; filter: blur(16px) brightness(.35); } @keyframes fade { from { opacity: 0; } } .result-inner { position: relative; width: 100%; max-width: 480px; overflow-y: auto; padding: calc(20px + var(--safe-t)) 12px calc(24px + var(--safe-b)); display: flex; flex-direction: column; gap: 12px; isolation: isolate; } .result-inner::before { content: ''; position: fixed; top: 0; bottom: 0; width: 100%; max-width: 480px; margin-left: -12px; background: linear-gradient(180deg, rgba(8,5,9,.25), rgba(8,5,9,.65) 35%, rgba(8,5,9,.85)), var(--rbg) center top / cover no-repeat; z-index: -1; } .result h1 { margin: 0; font: 400 30px var(--f-display); text-align: center; text-shadow: 0 2px 8px #000; } .result .big { text-align: center; text-shadow: 0 1px 4px #000; } .result.dead h1 { color: #ff8a7a; } .result.win h1 { color: #ffd27a; } .rhero { position: relative; display: grid; place-items: center; height: 160px; } .rhero > * { grid-area: 1 / 1; } .rhero .vfx { pointer-events: none; } .epitaph { text-align: center; font: italic 20px/1.4 var(--f-ui); color: #f3e3c3; } /* ---------- шторка и тосты ---------- */ .sheet-bg { position: fixed; inset: 0; background: rgba(0,0,0,0.62); z-index: 40; display: flex; justify-content: center; align-items: flex-end; animation: fade .2s; } .sheet { position: relative; width: 100%; max-width: 480px; max-height: 88vh; overflow-y: auto; border: 0 solid transparent; border-width: 30px 16px 0; border-image: url(/assets/ui/panel/sheet@256.webp) 96 48 0 fill / 30px 16px 0; background: linear-gradient(#1d2a2acc, #161013f2) padding-box; padding: 0 0 calc(16px + var(--safe-b)); display: flex; flex-direction: column; gap: 10px; animation: up .22s; isolation: isolate; } .sheet.has-bg::before { content: ''; position: absolute; inset: 0; background: var(--sbg) center top / cover no-repeat; opacity: .22; z-index: -1; pointer-events: none; } @keyframes up { from { transform: translateY(40px); opacity: .4; } } .sheet h3 { margin: 0; font: 600 var(--fs-h2)/1.3 var(--f-ui); color: var(--gold2); display: flex; align-items: center; gap: var(--space-2); } .sheet h3 img.ic { width: 26px; height: 26px; } .grabber { width: 72px; height: 24px; background: url(/assets/ui/ctrl/grabber@360.webp) center / contain no-repeat; margin: -22px auto 0; flex: none; } #toast-root { position: fixed; top: calc(62px + var(--safe-t)); left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; z-index: 60; pointer-events: none; } .toast { border: 12px solid transparent; border-image: url(/assets/ui/panel/toast_info@256.webp) 32 fill / 12px; padding: 0 4px; font-size: 15px; max-width: 92%; filter: drop-shadow(0 6px 12px #000a); animation: pop .2s; } .toast.err { border-image-source: url(/assets/ui/panel/toast_err@256.webp); } .toast.ok { border-image-source: url(/assets/ui/panel/toast_ok@256.webp); } input.field { width: 100%; border: 12px solid transparent; border-image: url(/assets/ui/ctrl/field@360.webp) 40 fill / 12px; background: none; color: var(--txt); padding: 2px 4px; font-size: 16px; min-height: 50px; outline: none; } input.field:focus { border-image-source: url(/assets/ui/ctrl/field_focus@360.webp); } input.field::placeholder { color: #a8968a; } .login { padding: calc(20px + var(--safe-t)) 18px calc(24px + var(--safe-b)); display: flex; flex-direction: column; gap: 14px; align-items: stretch; justify-content: flex-end; min-height: 100vh; } .login img.logo { width: min(92%, 380px); height: auto; margin: 0 auto 4px; filter: drop-shadow(0 6px 18px #000); animation: float 5s ease-in-out infinite; } @keyframes float { 50% { transform: translateY(-5px); } } .login h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .login .tagline { font-family: var(--f-text); font-size: 15px; text-shadow: 0 1px 4px #000; color: #f3e3c3; } .login details { text-shadow: 0 1px 3px #000; } .login .loginmsg { font-size: 15px; line-height: 1.35; color: var(--red); text-shadow: 0 1px 3px #000; } .lore-item { display: flex; gap: 10px; align-items: flex-start; border: 14px solid transparent; border-image: url(/assets/ui/panel/lore_item@256.webp) 48 fill / 14px; padding: 0; } .lore-item img.lore { width: 84px; height: 84px; object-fit: contain; flex: none; margin: -4px 0 -4px -4px; } .lore-item.locked { border-image-source: url(/assets/ui/panel/lore_locked@256.webp); color: var(--mut); align-items: center; } .lore-item.locked img.lore { width: 52px; height: 52px; opacity: .8; } .lore-item b { color: #a8ffe0; font-family: var(--f-display); font-weight: 400; } .lore-item .small { font-family: var(--f-text); } .layerhead { display: flex; align-items: center; gap: 6px; margin: 8px 0 4px; } .layerhead img { width: 30px; height: 30px; } .spark { width: 100%; height: 60px; display: block; } .lb-row { display: flex; gap: 8px; align-items: center; min-height: 44px; padding: 0 2px; border: 9px solid transparent; border-image: url(/assets/ui/panel/lb_row@256.webp) 24 fill / 9px; font-size: 15px; margin-bottom: 3px; } .lb-row.me { border-image-source: url(/assets/ui/panel/lb_row_me@256.webp); } .lb-row .n { width: 26px; color: var(--mut); text-align: center; flex: none; font-weight: 700; } .lb-row .n img { width: 26px; height: 26px; vertical-align: middle; } .timer { font-variant-numeric: tabular-nums; } .vfx { pointer-events: none; background-repeat: no-repeat; flex: none; } .loading { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 18vh; background: #120b14 center / cover no-repeat; z-index: 80; color: #f3e3c3; font-size: 15px; text-shadow: 0 1px 4px #000; transition: opacity .3s; } /* Клавиша мыши/клавиатуры: на телефоне скрыта (hover+fine pointer). Не игровой текст. */ .kbd { display: none; font-size: 10px; font-weight: 700; background: #0006; border: 1px solid #fff3; border-radius: 4px; padding: 0 4px; margin-right: 4px; vertical-align: 2px; color: var(--mut); } @media (hover: hover) and (pointer: fine) { .kbd { display: inline-block; } #app::before { box-shadow: 0 0 60px #000; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } } /* ---------- рогалик: карта слоя ---------- */ .mapscroll { padding-top: 6px; } .outcome.mini { padding: 0; font-size: 15px; } .outcome.mini > b { font-size: 15px; } .outcome.mini p { font-size: 15px; margin-top: 2px; } .lmap { position: relative; flex: none; margin: 2px 4px 0 30px; } .lmap::before { content: ''; position: absolute; inset: 0 -6px 0 -34px; border-radius: 16px; background: linear-gradient(#120b1466, #120b14bf); pointer-events: none; } .mlines { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; } .mlines line { stroke: #e2b04a33; stroke-width: 2.5; stroke-dasharray: 2 6; stroke-linecap: round; } .mlines line.dim { stroke: #e2b04a44; } .mlines line.open { stroke: #fbba64; stroke-width: 3; stroke-dasharray: 6 6; animation: dash 1.2s linear infinite; } .mlines line.walked { stroke: #f46a32; stroke-width: 4; stroke-dasharray: none; } @keyframes dash { to { stroke-dashoffset: -24; } } .mlv { position: absolute; left: -32px; font: 600 15px var(--f-ui); color: #c4ae9c; letter-spacing: 0; width: 30px; text-align: center; line-height: 1.1; } .mnode { position: absolute; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; display: grid; place-items: center; padding: 0; background: radial-gradient(circle at 50% 38%, #f6e7c8, #d9c19a 62%, #9c7a4a); border: 3px solid #6b4a1e; box-shadow: 0 3px 0 #2a1a10, 0 6px 10px #000a; transition: transform .15s, filter .15s; } .mnode img.ic { width: 34px; height: 34px; filter: drop-shadow(0 1px 1px #0006); } .mnode > span { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); margin-top: 3px; padding: 1px 5px; border-radius: 4px; background: #120b14e6; font-size: var(--fs-tiny); font-weight: 600; color: #f3e3c3; white-space: nowrap; text-shadow: 0 1px 2px #000; } .mnode[disabled]:not(.here):not(.visited) > span { display: none; } .mnode[disabled] { cursor: default; filter: grayscale(.75) brightness(.6); } .mnode.visited { filter: grayscale(.5) brightness(.75); border-color: #f46a32; } .mnode.visited::after, .mnode.here::after { content: '✓'; position: absolute; right: -4px; top: -4px; width: 20px; height: 20px; border-radius: 50%; background: #f46a32; color: #fff; font-size: 15px; line-height: 20px; text-align: center; font-weight: 800; box-shadow: 0 1px 2px #000; } .mnode.here { filter: none; border-color: #fbba64; box-shadow: 0 0 0 3px #f46a3299, 0 6px 10px #000a; } .mnode.reach { filter: none; border-color: #fbba64; animation: nodePulse 1.4s ease-in-out infinite; cursor: pointer; } .mnode.reach:active { transform: scale(.94); } @keyframes nodePulse { 50% { box-shadow: 0 0 0 5px #fbba6455, 0 0 18px #f29a2e, 0 6px 10px #000a; } } .mnode.t-elite { background: radial-gradient(circle at 50% 38%, #ffd7c8, #e38b74 62%, #8a2e22); } .mnode.t-boss { width: 76px; height: 76px; margin: -38px 0 0 -38px; overflow: visible; background: radial-gradient(circle at 50% 40%, #5a2a3a, #1d0f16); border-color: #e2b04a; } .mnode.t-boss img.bossface { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: center 22%; } .mnode.t-rest, .mnode.t-ascent { background: radial-gradient(circle at 50% 38%, #e3fff4, #9fd9c4 62%, #2f7f6f); } .mnode.t-anomaly { background: radial-gradient(circle at 50% 38%, #f0e2ff, #b99ae6 62%, #5b3fa0); } .mnode.t-shop { background: radial-gradient(circle at 50% 38%, #fff, #cfd8e6 62%, #6a7a96); } .opts.one { grid-template-columns: 1fr; } .mhp { display: flex; align-items: center; gap: 6px; margin-top: 3px; flex-wrap: wrap; } .mhp .pbar { flex: 1; height: 9px; margin: 0; min-width: 40px; } .mhp > span { font-size: 15px; color: #ffe8c8; } .dscroll.combat { gap: 6px; } .die:active .die-svg { transform: scale(.92) rotate(-6deg); } .cbopts .opt.turn { grid-column: 1 / -1; } /* ---------- сборка забега ---------- */ .bmask { width: 30px; height: 30px; border-radius: 50%; background: #f4e6c8; box-shadow: 0 0 0 2px #c08bff, 0 2px 0 #0008; display: grid; place-items: center; flex: none; } .bmask img { width: 26px; height: 26px; } .bmask.used { filter: grayscale(1) brightness(.7); } .bmask.none { background: #0004; box-shadow: inset 0 0 0 1px #fff3; font-size: 15px; } .bsyn { margin-left: auto; font-size: 15px; color: #ffd88a; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .syncard { border-color: #ffc94d88 !important; } .syncard b { color: #ffd88a; } .opt.off, .opt:disabled { filter: grayscale(.8) brightness(.75); } /* ---------- свечи предков ---------- */ .depthbar .copal { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; margin-right: 8px; font-size: 15px; color: #ffd88a; } .depthbar .copal img { width: 20px; height: 20px; } .sheet h3.mh { display: flex; align-items: center; gap: 8px; } .sheet h3.mh img { width: 30px; height: 30px; } .depthbar .ascb { font-size: 15px; font-weight: 800; color: #ffb38a; margin-left: 6px; display: inline-flex; align-items: center; } .depthbar .ascb img { width: 16px; height: 16px; } /* ==================================================================== Единая визуальная система (маски и исследование): тёмные 9-slice панели и опции, тон — только маленьким акцентом; одна оранжевая кнопка-CTA на экран. ==================================================================== */ :root { --acc-gold: #ffc94d; --acc-teal: #3fd0c2; --acc-red: #ff6a4d; --acc-green: #6fe08f; --acc-violet: #c08bff; } /* опции: все тона кроме primary — на нейтральной плашке с цветной меткой слева */ .opt { position: relative; } .opt.safe, .opt.danger, .opt.warn, .opt.item, .opt.neutral, .opt[class*="acc-"] { --oi: url(/assets/ui/option/opt_neutral@540.webp); --op: url(/assets/ui/option/opt_neutral_pressed@540.webp); --ob: url(/assets/ui/option/opt_neutral_busy@540.webp); } .opt::after { content: ''; position: absolute; left: -9px; top: 4px; bottom: 4px; width: 3px; border-radius: 2px; background: var(--acc, transparent); box-shadow: 0 0 8px var(--acc, transparent); } .opt.acc-safe, .opt.safe { --acc: var(--acc-green); } .opt.acc-danger, .opt.danger { --acc: var(--acc-red); } .opt.acc-warn, .opt.warn { --acc: var(--acc-gold); } .opt.acc-item, .opt.item { --acc: var(--acc-violet); } .opt.acc-gold { --acc: var(--acc-gold); } .opt.primary::after { display: none; } /* панельная строка (иконка + заголовок + пояснение) — вместо всех самодельных плашек */ .panel-row, .panelbtn { display: flex; align-items: center; gap: 10px; text-align: left; width: 100%; color: var(--txt, #f3e3c3); font: inherit; border: var(--r-card) solid transparent; border-image: url(/assets/ui/panel/card_alt@256.webp) 48 fill / var(--r-card); padding: 0 2px; min-height: 52px; position: relative; margin: 0; } .panel-row > img, .panelbtn > img, .panel-row > .masksvg, .panelbtn > img.ic { width: 34px; height: 34px; flex: none; object-fit: contain; } .panel-row > div, .panelbtn > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .panel-row b, .panelbtn b { font-size: 15px; color: #ffe2a6; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; } .panel-row span, .panelbtn span { font-size: 15px; color: #e3d2c4; line-height: 1.25; overflow-wrap: anywhere; } .panel-row.center { justify-content: center; width: auto; max-width: 100%; margin: 4px auto; } .panel-row.center > div { flex: none; } .panel-row::before, .panelbtn::before { content: ''; position: absolute; left: -7px; top: 2px; bottom: 2px; width: 3px; border-radius: 2px; background: var(--acc, transparent); box-shadow: 0 0 8px var(--acc, transparent); } .panel-row.gold, .panelbtn { --acc: var(--acc-gold); } .panel-row.teal, .panelbtn.daily { --acc: var(--acc-teal); } .panel-row.red { --acc: var(--acc-red); } .panel-row.red b { color: #ffb0a0; } .panel-row.teal b, .panelbtn.daily b { color: #a8ffe0; } .panel-row.locked { opacity: .7; } .panel-row.locked > :first-child { width: 34px; text-align: center; font: 700 20px var(--f-display); color: var(--mut); } .panel-row.gold > :first-child:not(img):not(svg) { width: 34px; text-align: center; font-size: 20px; color: var(--acc-gold); text-shadow: 0 0 8px #ffb34d; } .panel-row.unl .ua { width: 46px; height: 46px; object-fit: cover; border-radius: 10px; flex: none; } .panel-row.unl .ut { flex: 1; min-width: 0; } .panel-row.unl.own { opacity: .78; --acc: var(--acc-green); } .panel-row.asc .btn.sm { min-width: 40px; font-size: 18px; flex: none; } .panelbtn { cursor: pointer; } .panelbtn:active { transform: scale(.985); } .shelfline { border: 0; border-bottom: 1px solid var(--line); border-image: none; border-radius: 8px; background: #120b14db; padding: var(--space-2) var(--space-3); min-height: 40px; } .shelfline::before { display: none; } .shelfline > img.ic:first-child { width: 22px; height: 22px; } .shelfline > img.ic:last-child { width: 16px; height: 16px; } .shelfline span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .box-count { color: var(--gold2) !important; font-size: 18px !important; font-weight: 700; font-variant-numeric: tabular-nums; } .ugh { margin: 12px 0 4px; font: 400 15px var(--f-display); color: var(--gold2); } .panel-row .txt, .masklore .txt { font-family: var(--f-text); font-style: italic; color: #f3e3c3; font-size: 15px; } .rolls { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; } .roll { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-meta); padding: 2px 6px; border: 1px solid var(--line); border-radius: 4px; background: #120b14a6; color: #d9f5e2; font-variant-numeric: tabular-nums; } .roll img { width: 20px; height: 20px; } .roll.no { color: #ffc4b8; } .found { border: 10px solid transparent; border-image: url(/assets/ui/panel/reqs@256.webp) 32 fill / 10px; padding: 0 2px; border-radius: 0; background: none; } .tagline { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-meta); color: #eadccd; border: 1px solid var(--line); border-radius: 4px; background: #120b14a6; padding: 2px 6px; } .tagline b { color: #ffd88a; } .tagline img { width: 14px; height: 14px; } .abil { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; } /* сборка забега: плашка в стиле HUD */ .buildbar { display: flex; align-items: center; gap: 6px; width: calc(100% - 16px); margin: 4px 8px 0; padding: 0 2px; min-height: 32px; font: inherit; color: #eadccd; cursor: pointer; border-bottom: 1px solid var(--line); background: #120b14bf; border-radius: 8px; } .buildbar img { width: 20px; height: 20px; object-fit: contain; } .bmask { width: 28px; height: 28px; display: grid; place-items: center; flex: none; } .bmask img { width: 26px; height: 26px; } .bmask.used { filter: grayscale(1) brightness(.7); } .bmask.none { opacity: .5; } .btag { display: inline-flex; align-items: center; gap: 1px; font-size: 15px; padding: 0 3px; } .btag.syn b { color: var(--acc-gold); text-shadow: 0 0 6px #ffc94d; } .bsyn { margin-left: auto; font-size: 15px; color: #ffd88a; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .tagrow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin: 6px 0; } .tagc { display: flex; flex-direction: column; align-items: center; gap: 1px; font-size: 15px; border: 8px solid transparent; border-image: url(/assets/ui/panel/stat_tile@256.webp) 24 fill / 8px; padding: 0; overflow-wrap: anywhere; } .tagc img { width: 32px; height: 32px; object-fit: contain; } .tagc.syn { border-image-source: url(/assets/ui/panel/card_alt@256.webp); } .tagc.syn b { color: var(--acc-gold); } .syncard b { color: #ffd88a; } .depthbar .copal { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; margin-right: 8px; font-size: 15px; color: #ffd88a; } .depthbar .copal img { width: 20px; height: 20px; } /* ---------- души в масках ---------- */ .soulfig { display: block; overflow: visible; filter: drop-shadow(0 4px 6px #000a); } .soulfig.dead { filter: grayscale(1) brightness(.6) sepia(.2); } .masksvg { display: inline-block; overflow: visible; flex: none; filter: drop-shadow(0 2px 3px #0009); vertical-align: middle; } .masksvg.sil { filter: brightness(.35) drop-shadow(0 0 1px #a8741e); opacity: .8; } .heroart.soulart { width: 92px; display: grid; place-items: end center; margin: -8px 0 -6px -6px; } .heroart.soulart::before { content: ''; position: absolute; left: 6px; right: 6px; top: 18px; bottom: 6px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--sc) 35%, transparent), transparent 70%); z-index: -1; } .souldots { display: flex; gap: var(--space-1); } .souldots .sd { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 3px; font-size: var(--fs-meta); color: var(--acc-gold); background: #120b145c; border-bottom: 1px solid var(--line); border-radius: 4px; padding: var(--space-1); } .souldots .sd small { font-size: var(--fs-tiny); line-height: 1.2; color: var(--mut); text-align: center; overflow-wrap: anywhere; } .souldots .sd.on small { color: #ffe2a6; } .btn.icon.glowing { animation: pulse 1.2s infinite alternate; filter: drop-shadow(0 0 8px #ffc94d); } .hudmask { flex: none; width: 46px; height: 46px; display: grid; place-items: center; } .soulline { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-1) var(--space-2) 0; padding: 2px var(--space-2); min-height: 26px; font-size: var(--fs-meta); color: var(--mut); } .soulline .sdots { display: inline-flex; gap: 3px; } .soulline .sdots i { width: 9px; height: 9px; transform: rotate(45deg); border: 1.5px solid #a8741e; } .soulline .sdots i.found { background: var(--acc-gold); box-shadow: 0 0 6px #ffc94d; } .soulline .sdots i.carried { background: #ffe2a6; animation: pulse 1s infinite alternate; } .soulline .pass img { width: 18px; height: 18px; filter: drop-shadow(0 0 4px #3fd0c2); } .maskgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 4px; } .mcell { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 0; font: inherit; color: var(--txt, #f3e3c3); cursor: pointer; border: 8px solid transparent; border-image: url(/assets/ui/panel/stat_tile@256.webp) 24 fill / 8px; } .mcell b { font-size: 15px; line-height: 1.15; text-align: center; overflow-wrap: anywhere; } .mcell span { font-size: 15px; color: var(--mut); overflow-wrap: anywhere; } .mcell.rev { border-image-source: url(/assets/ui/panel/card_alt@256.webp); } .mcell.rev span { color: var(--acc-gold); } .mcell.unk b { color: var(--mut); } .reveal { text-align: center; display: flex; flex-direction: column; gap: 6px; align-items: center; } .reveal > small { letter-spacing: 1px; text-transform: uppercase; color: var(--acc-gold); font-size: 15px; } .reveal h3 { margin: 0; } .reveal .small.txt { text-align: left; } .rvmask { animation: reveal 1.4s ease-out both; filter: drop-shadow(0 0 18px #ffc94d); } @keyframes reveal { 0% { transform: scale(.6) rotate(-8deg); opacity: 0; filter: brightness(3) drop-shadow(0 0 40px #fff); } 60% { transform: scale(1.06); opacity: 1; } 100% { transform: none; } } /* ---------- карта: тайны и тайный ход ---------- */ .mnode.t-secret { background: radial-gradient(circle at 50% 38%, #fff3c8, #e2b04a 62%, #7a4d16); } .mnode.t-secret.memory { box-shadow: 0 0 0 3px #ffc94d, 0 0 16px #ffc94d; } .mnode.t-secret.memory::before { content: '✦'; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); color: #ffe2a6; text-shadow: 0 0 6px #ffb34d; font-size: 15px; } .mnode.locked { filter: grayscale(.9) brightness(.55); border-style: dashed; } .mnode .lock { position: absolute; right: -6px; bottom: -4px; width: 22px; height: 22px; border-radius: 50%; background: #1a1016; display: grid; place-items: center; box-shadow: 0 0 0 1.5px #a8741e; } .mnode .lock img { width: 14px; height: 14px; } .mlv.boss { color: #ffb0a0; } /* ---------- быстрый бой: костяные кости ---------- */ .mhearts { display: inline-flex; gap: 3px; } .mhearts i { width: 18px; height: 16px; background: url(/assets/icons/hp@48.webp) center / contain no-repeat; filter: drop-shadow(0 1px 1px #000); } .mhearts i.off { filter: grayscale(1) brightness(.35); transform: scale(.85); } .dscroll.combat { gap: var(--space-3); padding-top: var(--space-3); } .dstage { position: relative; flex: none; border: var(--r-card) solid transparent; border-image: url(/assets/ui/panel/card_alt@256.webp) 48 fill / var(--r-card); padding: var(--space-1); isolation: isolate; } .dstage::before { content: ''; position: absolute; inset: -6px; z-index: -1; border-radius: 10px; pointer-events: none; background: radial-gradient(ellipse 70% 60% at 50% 60%, rgba(120,40,60,.25), transparent 70%); } .dstage .odds { display: flex; justify-content: center; gap: var(--space-2) var(--space-3); flex-wrap: wrap; font-size: var(--fs-meta); color: var(--mut); } .dstage .odds b { color: #fff1d0; font-size: var(--fs-text); font-variant-numeric: tabular-nums; } .btray { position: relative; height: 96px; display: flex; justify-content: center; align-items: center; gap: 30px; perspective: 600px; perspective-origin: 50% 30%; } .bdie { --s: 60px; --hz: 30px; position: relative; width: var(--s); height: var(--s); transform-style: preserve-3d; will-change: transform; } .bcube { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; } .bf { position: absolute; inset: 0; background-size: 100% 100%; border-radius: 18%; backface-visibility: hidden; box-shadow: inset 0 0 6px rgba(90,58,34,.35); } .bf.f2, .bf.f6 { box-shadow: inset 0 0 14px rgba(60,36,20,.5); } .bf.f5 { box-shadow: inset 0 0 4px rgba(255,255,255,.4); } .core { position: absolute; inset: 3px; background: #d6c095; border-radius: 12%; } .core.cx { transform: rotateY(90deg); } .core.cy { transform: rotateX(90deg); } .bshadow { position: absolute; left: 6%; right: 6%; bottom: -12px; height: 16px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.6), transparent); transform-origin: 50% 50%; } .bstreak { position: absolute; left: 30%; top: 15%; width: 90px; height: 70%; border-radius: 50%; opacity: 0; pointer-events: none; background: linear-gradient(90deg, rgba(255,240,210,.4), rgba(255,240,210,0)); transform: translateZ(-1px); } .bdie.blur .bf { filter: blur(1.1px); } .bdie.impact .bcube { animation: bimpact .26s ease-out; } @keyframes bimpact { 0% { scale: 1.12 .86; } 55% { scale: .96 1.05; } 100% { scale: 1; } } .bdie.dropped { opacity: .4; } .dstage.idle .bdie { animation: bob 2.6s ease-in-out infinite; } .dstage.idle .bdie + .bdie { animation-delay: -1.3s; } @keyframes bob { 50% { translate: 0 -5px; } } .bpart { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; } .bres { min-height: 30px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 10px; font-size: 15px; color: #e3d2c4; text-align: center; } .bres .bhint { color: var(--mut); font-size: 15px; } .bsum { font-variant-numeric: tabular-nums; } .bsum b { font-size: 18px; color: #fff1d0; } .bsum small { color: var(--mut); } .bword { font: 600 20px var(--f-ui); letter-spacing: .3px; text-shadow: 0 2px 4px #000; } .bword.hit { color: #9df0b8; } .bword.miss { color: #ffb0a0; } .bword.fumble { color: #ff6a4d; } .bword.crit { color: #ffe27a; font-size: 26px; text-shadow: 0 0 12px #ffb02e, 0 2px 4px #000; } .dstage.settled .bword, .dstage.fresh .bword { animation: stamp .42s cubic-bezier(.2, 1.6, .4, 1) both; } @keyframes stamp { from { transform: scale(2.2) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } } .bglow { position: absolute; inset: 10% 15%; z-index: -1; pointer-events: none; border-radius: 50%; opacity: 0; background: radial-gradient(closest-side, rgba(255,214,90,.75), rgba(255,140,30,.25) 55%, transparent); } .dstage.crit .bglow { opacity: 1; animation: glowp 1.2s ease-out both; } .dstage.high .bglow { opacity: .55; animation: glowp 1s ease-out both; } .dstage.fumble .bglow { opacity: .8; background: radial-gradient(closest-side, rgba(200,30,20,.6), transparent); animation: glowp 1s ease-out both; } @keyframes glowp { 0% { transform: scale(.4); opacity: 0; } 30% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); } } .dstage.crit { border-image-source: url(/assets/ui/panel/outcome_good@256.webp); } .dstage.fumble { border-image-source: url(/assets/ui/panel/outcome_bad@256.webp); } .dstage.shake { animation: dshake .36s; } @keyframes dshake { 20% { transform: translate(-4px, 2px); } 40% { transform: translate(4px, -2px); } 60% { transform: translate(-2px, 1px); } 80% { transform: translate(2px, 0); } } .dstage.rolling .bres { opacity: .35; } .cbopts .opt.turn { grid-column: 1 / -1; min-height: 56px; } .cbopts .opt.turn b { font-size: var(--fs-btn); } .cbopts .opt[data-a=cFlee]:last-child { grid-column: 1 / -1; } .result-loot summary { padding: var(--space-3); min-height: 44px; cursor: pointer; color: var(--gold2); background: #120b14bf; border-radius: 8px; } .result-loot > .list { margin-top: var(--space-2); } .reveal h3 { font: 400 var(--fs-h2)/1.4 var(--f-display); } .lore-item b, .ugh { font-family: var(--f-ui); font-weight: 600; } .bxc-name { font-family: var(--f-ui); font-weight: 600; } @media (min-width: 560px) { :root { --fs-h1: 26px; --fs-h2: 20px; --fs-btn: 17px; --fs-sm: 15px; --fs-text: 16px; --fs-meta: 15px; --fs-tiny: 15px; } .content { padding: var(--space-5) var(--space-5) calc(92px + var(--safe-b)); } .ofrenda { margin: calc(-1 * var(--space-5)) calc(-1 * var(--space-5)) 0; } .dscroll { padding-left: var(--space-4); padding-right: var(--space-4); } .opts { padding-left: var(--space-4); padding-right: var(--space-4); } .sheet { padding-left: var(--space-2); padding-right: var(--space-2); gap: var(--space-4); } } @media (min-width: 560px) { .bdie { --s: 70px; --hz: 35px; } .btray { height: 108px; gap: 40px; } } @media (max-height: 760px) { .btray { height: 84px; } .bdie { --s: 52px; --hz: 26px; } } @media (prefers-reduced-motion: reduce) { .dstage.idle .bdie, .bdie.impact .bcube, .dstage.shake, .rvmask { animation: none !important; } .bdie.blur .bf { filter: none; } } /* ---------- ящики душ (лутбоксы) ---------- */ svg.boxico { flex: none; filter: drop-shadow(0 2px 3px #000a); } .islot svg.boxico { width: 42px; height: 42px; } svg.ic.boxic { width: 40px; height: 40px; filter: drop-shadow(0 2px 4px #000b); } svg.ic { vertical-align: -4px; flex: none; } .boxpanel.has svg.boxic { animation: bxidle 2.6s ease-in-out infinite; transform-origin: 50% 85%; } .boxpanel.has b { color: var(--gold2); } @keyframes bxidle { 0%, 82%, 100% { transform: none; } 86% { transform: rotate(-7deg) translateY(-2px); } 90% { transform: rotate(6deg); } 94% { transform: rotate(-3deg); } } .boxcard { --bc: var(--gold); } .boxcard .bxname { font-size: 18px; color: var(--bc); text-shadow: 0 1px 2px #000c; } .boxcard svg.boxbig { flex: none; margin: -6px -2px -4px -6px; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--bc) 45%, transparent)) drop-shadow(0 3px 4px #000b); } .boxcard .row + .row, .boxcard .oddsline { margin-top: 8px; } .oddsline { display: flex; flex-wrap: wrap; gap: 4px; } .oddc { display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-meta); padding: 2px 6px; min-height: 22px; color: #eadccd; border: 1px solid var(--line); border-radius: 4px; background: #120b14a6; } .oddc b { color: #ffd88a; } .oddc img { width: 14px; height: 14px; } .card.pitycard .pityline { margin: 0; } .pityline { margin: 6px 0 8px; display: flex; flex-direction: column; gap: 3px; } .pityline .pbar { height: 12px; } .oddsnotes { gap: 6px; margin: 8px 0; } .oddsnotes img { width: 16px; height: 16px; vertical-align: -3px; } .bxscroll { display: grid; place-items: center; width: 128px; height: 128px; filter: drop-shadow(0 0 14px #ffc94d88); } .bxscroll.sm { width: 52px; height: 52px; flex: none; } .lore-item .bxscroll.sm img { width: 44px; height: 44px; } .boxopen { position: fixed; inset: 0; z-index: 80; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(circle at 50% 44%, color-mix(in srgb, var(--bc) 26%, #1d1320) 0%, #120b14f2 46%, #070407fa 100%); animation: fade .22s; touch-action: manipulation; } .boxopen .bxrays { position: absolute; left: 50%; top: 44%; width: 170vmax; height: 170vmax; margin: -85vmax 0 0 -85vmax; pointer-events: none; background: repeating-conic-gradient(color-mix(in srgb, var(--rc, var(--bc)) 30%, transparent) 0deg 7deg, transparent 7deg 20deg); -webkit-mask: radial-gradient(circle, #000 0, #0008 22%, transparent 48%); mask: radial-gradient(circle, #000 0, #0008 22%, transparent 48%); opacity: .22; animation: bxspin 18s linear infinite; transition: opacity .4s; } .boxopen.burst .bxrays { opacity: .55; } @keyframes bxspin { to { transform: rotate(360deg); } } .boxopen .bxpicado { position: absolute; top: calc(var(--safe-t) - 4px); left: 0; right: 0; height: 58px; background: repeat-x top center / auto 58px; opacity: .85; pointer-events: none; filter: drop-shadow(0 4px 4px #0008); animation: bxsway 3.2s ease-in-out infinite alternate; transform-origin: 50% 0; } @keyframes bxsway { from { transform: rotate(-.6deg); } to { transform: rotate(.6deg) translateY(2px); } } .boxopen .bxstage { position: relative; display: grid; place-items: center; transition: transform .55s cubic-bezier(.3,.8,.3,1), opacity .5s; z-index: 1; } .bxs { position: relative; width: var(--bs); height: var(--bs); } .bxs svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .bxs .bxshadow { position: absolute; left: 14%; right: 14%; bottom: 8%; height: 9%; border-radius: 50%; background: radial-gradient(#000c, transparent 70%); } .bxs .bxlid { transform-origin: 50% 50%; } .boxopen.charging .bxs { animation: bxcharge 1.15s cubic-bezier(.5,0,.9,.6) forwards; filter: drop-shadow(0 0 6px var(--bc)); } .boxopen.charging .bxs .bxlid { animation: bxlidjit .11s .35s steps(2) infinite alternate; } .boxopen.fast .bxs { animation-duration: .25s; } @keyframes bxcharge { 0% { transform: translateY(30px) scale(.86); filter: drop-shadow(0 0 2px var(--bc)); } 14% { transform: translateY(0) scale(1.02); } 24% { transform: rotate(-3deg); } 34% { transform: rotate(3deg); } 44% { transform: rotate(-5deg) translateY(-2px); } 52% { transform: rotate(5deg); } 60% { transform: rotate(-7deg) translateY(-4px) scale(1.03); } 67% { transform: rotate(7deg) translateY(-2px); } 74% { transform: rotate(-9deg) translateY(-6px) scale(1.05); } 80% { transform: rotate(9deg) translateY(-3px); } 86% { transform: rotate(-10deg) translateY(-8px) scale(1.07); } 92% { transform: rotate(8deg) translateY(-4px) scale(1.08); } 100% { transform: rotate(0) translateY(-6px) scale(1.1); filter: drop-shadow(0 0 22px var(--bc)); } } @keyframes bxlidjit { from { transform: translateY(0); } to { transform: translateY(-4px) rotate(-1.5deg); } } .boxopen.burst .bxs { transform: translateY(-6px) scale(1.1); filter: drop-shadow(0 0 18px var(--rc)); animation: bxbump .38s ease-out; } @keyframes bxbump { 0% { transform: translateY(-6px) scale(1.1); } 30% { transform: translateY(6px) scale(1.16, .94); } 100% { transform: translateY(-6px) scale(1.1); } } .boxopen.burst .bxs .bxlid { animation: bxlidfly .8s cubic-bezier(.15,.7,.35,1) forwards; } @keyframes bxlidfly { 0% { transform: none; } 25% { transform: translate(-6px, -70%) rotate(-14deg); } 100% { transform: translate(-48%, -150%) rotate(-62deg) scale(.8); opacity: 0; } } .bxbeam { position: absolute; left: 50%; bottom: 46%; width: 54%; height: 0; transform: translateX(-50%); border-radius: 50% 50% 0 0; pointer-events: none; background: linear-gradient(to top, color-mix(in srgb, var(--rc, #fff) 85%, #fff) 0%, color-mix(in srgb, var(--rc, #fff) 55%, transparent) 40%, transparent 100%); filter: blur(6px); mix-blend-mode: screen; opacity: 0; } .boxopen.burst .bxbeam { animation: bxbeam 1.3s ease-out forwards; } .boxopen.big .bxbeam { width: 72%; } @keyframes bxbeam { 0% { height: 0; opacity: 0; } 20% { height: 120%; opacity: 1; } 100% { height: 190%; opacity: .45; } } .bxflash { position: absolute; inset: -40%; border-radius: 50%; background: radial-gradient(circle, #fff 0, color-mix(in srgb, var(--rc, #fff) 70%, transparent) 25%, transparent 60%); opacity: 0; pointer-events: none; } .boxopen.burst .bxflash { animation: bxflash .5s ease-out; } @keyframes bxflash { 0% { opacity: 0; transform: scale(.3); } 25% { opacity: .95; } 100% { opacity: 0; transform: scale(1.3); } } .bxpart { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; } .boxopen.carded .bxstage { transform: translateY(min(30vh, 250px)) scale(.62); opacity: .12; } .boxopen.carded .bxhint { display: none; } .bxhint { position: absolute; bottom: calc(18px + var(--safe-b)); color: #c4ae9c99; letter-spacing: 1px; } .bxcard-slot { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 64px 16px calc(16px + var(--safe-b)); pointer-events: none; z-index: 4; } .bxcard-slot > * { pointer-events: auto; } .bxcard { position: relative; width: min(290px, 78vw); min-height: min(330px, 52vh); max-height: 64vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 5px; padding: 50px 34px 34px; background: radial-gradient(circle at 50% 30%, color-mix(in srgb, var(--rc) 22%, #2e1f33) 0%, #241827 55%, #1a111c 100%); border-radius: 8px; box-shadow: 0 10px 30px #000c, 0 0 26px color-mix(in srgb, var(--rc) 45%, transparent); animation: bxcardin .7s cubic-bezier(.2,.9,.25,1.15) both; overflow: hidden; } .bxcard::after { content: ''; position: absolute; inset: 0; background: var(--cf) center / 100% 100% no-repeat; pointer-events: none; } .bxcard::before { content: ''; position: absolute; inset: -50%; background: linear-gradient(115deg, transparent 40%, #ffffff30 50%, transparent 60%); animation: bxshine 2.8s .7s ease-in-out infinite; pointer-events: none; } .bxcard.r0::before, .bxcard.r1::before { display: none; } @keyframes bxshine { 0% { transform: translateX(-60%); } 45%, 100% { transform: translateX(60%); } } @keyframes bxcardin { 0% { transform: translateY(26vh) scale(.25) rotateY(160deg); opacity: 0; } 55% { opacity: 1; } 80% { transform: translateY(-6px) scale(1.04) rotateY(-8deg); } 100% { transform: none; } } .boxopen.big .bxcard { box-shadow: 0 10px 30px #000c, 0 0 46px color-mix(in srgb, var(--rc) 75%, transparent), 0 0 0 2px color-mix(in srgb, var(--rc) 60%, transparent); } .bxc-cat { position: relative; z-index: 1; font: 700 15px var(--f-ui); letter-spacing: .4px; text-transform: uppercase; color: color-mix(in srgb, var(--rc) 70%, #fff); display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; justify-content: center; } .bxc-art { position: relative; z-index: 1; display: grid; place-items: center; min-height: 112px; margin: 2px 0; filter: drop-shadow(0 0 16px color-mix(in srgb, var(--rc) 70%, transparent)) drop-shadow(0 4px 4px #000b); } .bxc-art img, .bxc-art svg { width: min(128px, 28vw); height: min(128px, 28vw); object-fit: contain; } .bxc-art img.lore { border-radius: 10px; } .bxc-name { position: relative; z-index: 1; font: 600 var(--fs-h2)/1.3 var(--f-ui); color: var(--gold2); text-shadow: 0 1px 2px #000; } .bxc-name img.gem { vertical-align: 1px; margin-right: 4px; } .bxc-sub { position: relative; z-index: 1; font-size: 15px; color: #d9c6a4; } .bxc-text { position: relative; z-index: 1; font-size: 15px; line-height: 1.35; color: #f3e3c3; overflow-y: auto; max-height: 26vh; padding: 0 2px; margin-top: 2px; } .bxc-text b.block { display: block; margin-top: 4px; font-size: 15px; } .bxafter { width: min(340px, 92vw); animation: fade .4s .45s both; } .bxafter .pityline { margin: 0 0 8px; } .boxopen.out { animation: fade .22s reverse forwards; } .boxopen.rm .bxrays, .boxopen.rm .bxpicado { animation: none; } .boxopen.rm .bxs, .boxopen.rm .bxs .bxlid, .boxopen.rm .bxcard, .boxopen.rm .bxbeam, .boxopen.rm .bxflash, .boxopen.rm .bxcard::before, .boxopen.rm .bxafter { animation: none !important; } .boxopen.rm.burst .bxs .bxlid { opacity: 0; } .boxopen.rm .bxstage { transition: none; } @media (prefers-reduced-motion: reduce) { .boxpanel.has svg.boxic { animation: none; } } @media (min-width: 700px) { .bxcard { width: 300px; } .boxopen.carded .bxstage { transform: translateY(300px) scale(.6); } } /* ---------- арт масок и душ (по брифу) + раскрытие: маска слетает с души ---------- */ img.masksvg.maskart { object-fit: contain; } img.masksvg.maskart.sil { filter: brightness(0) drop-shadow(0 0 1px #a8741e); opacity: .7; } img.soulfig.soulart { object-fit: contain; object-position: 50% 100%; } .rvsoul { position: relative; display: grid; place-items: center; padding-top: 6px; } .rvsoul::before { content: ''; position: absolute; inset: 8% 12% 18%; border-radius: 50%; background: radial-gradient(circle, #ffd75a55, #ffd75a00 68%); animation: rvHalo 2.4s ease-out both; pointer-events: none; } .soulfig .sfmask, .soulfig .sfface, .soulfig .sfhalo { transform-box: view-box; transform-origin: 0 0; } .soulfig.unmasked .sfmask { filter: drop-shadow(0 0 4px #ffd75a); } .soulfig.lift .sfmask { animation: sfLift 1.9s cubic-bezier(.3, .1, .2, 1) both; } .soulfig.lift .sfface { animation: sfFace 1.9s ease-out both; } .soulfig.lift .sfhalo { animation: sfHaloIn 1.9s ease-out both; } @keyframes sfLift { 0% { transform: translate(60px, 58px) scale(1.38) translate(-60px, -56px); } 18% { transform: translate(59px, 58px) rotate(-2deg) scale(1.38) translate(-60px, -56px); } 26% { transform: translate(61px, 57px) rotate(2deg) scale(1.38) translate(-60px, -56px); } 34% { transform: translate(60px, 56px) scale(1.38) translate(-60px, -56px); } 62% { transform: translate(60px, 10px) rotate(-6deg) scale(.95) translate(-60px, -56px); } 100% { transform: translate(60px, -6px) rotate(-10deg) scale(.62) translate(-60px, -56px); } } @keyframes sfFace { 0%, 34% { opacity: 0; } 60% { opacity: 1; filter: brightness(1.8); } 100% { opacity: 1; filter: none; } } @keyframes sfHaloIn { 0%, 55% { opacity: 0; } 100% { opacity: 1; } } @keyframes rvHalo { 0% { opacity: 0; transform: scale(.4); } 45% { opacity: 1; transform: scale(1.15); } 100% { opacity: .7; transform: scale(1); } } .reveal .rvtrue > .masksvg { width: 44px; height: 44px; flex: none; } @media (prefers-reduced-motion: reduce) { .soulfig.lift .sfmask, .soulfig.lift .sfface, .soulfig.lift .sfhalo, .rvsoul::before { animation: none !important; } } /* листы масок: фигурка и заголовок по центру */ .sheet h3.center { justify-content: center; text-align: center; } .center > .soulfig { margin-inline: auto; } /* ---------- v6: простой спуск, артефакты, обучение ---------- */ .nav.n2 { grid-template-columns: repeat(2, 1fr); } .nav.n3 { grid-template-columns: repeat(3, 1fr); } .nav.n4 { grid-template-columns: 0.7fr 0.85fr 1.7fr 0.95fr; } .ofrenda.nos { aspect-ratio: 1080 / 700; } .fxt { color: #f3e3c3; } .dim { opacity: .5; } .rules p { margin: 0 0 8px; line-height: 1.5; } /* слоты артефактов */ .aslots { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; } .aslot { position: relative; width: 56px; height: 56px; border-radius: 12px; display: grid; place-items: center; background: #120b14b0; box-shadow: inset 0 0 0 1.5px var(--line); padding: 0; } .aslot.full { box-shadow: inset 0 0 0 2px var(--rc, #6b5272), 0 0 10px var(--rc, transparent); background: radial-gradient(circle, #2e1f33, #120b14); } .aslot.full.r0 { --rc: #a99a86; } .aslot.full.r1 { --rc: #5fd07a; } .aslot.full.r2 { --rc: #4ba8ff; } .aslot.full.r3 { --rc: #c06bff; } .aslot.full.r4 { --rc: #ffa630; } .aslot img, .aslot svg { max-width: 82%; max-height: 82%; object-fit: contain; } .aslot.locked { opacity: .55; flex-direction: column; gap: 0; font-size: 15px; color: var(--mut); } .aslot.locked small { font-size: 15px; } .aslot img.ic { width: 18px; height: 18px; opacity: .7; } .card .aslot { width: 52px; height: 52px; } /* варианты спуска: одна колонка, подсказка под названием */ .opts.list1 { grid-template-columns: 1fr; } .opt .ol { display: flex; flex-direction: column; min-width: 0; gap: 1px; } .opt .ol small { font: 400 15px/1.25 var(--f-ui); color: #e9d9c2; opacity: .9; overflow-wrap: anywhere; } .opt img.ic { width: 26px; height: 26px; } .cbopts .option-meta { grid-column: 1 / -1; text-align: center; padding: 4px 8px; } .cbopts .opt[data-a=cFlee] { grid-column: auto; } .cbopts.even { grid-template-columns: 1fr 1fr; } .cbopts .opt.turn { grid-column: auto; } .depthbar .toboss { display: inline-flex; align-items: center; gap: 3px; font-size: 15px; color: #e3d2c4; white-space: nowrap; margin-left: auto; } .depthbar .toboss.now { color: #ffb0a0; font-weight: 700; } .depthbar .toboss img { width: 18px; height: 18px; } /* мобильный экран спуска: текст событий не прижимается к левому краю и не обрезается */ .dscroll { padding-left: max(var(--space-3), env(safe-area-inset-left, 0px)); padding-right: max(var(--space-3), env(safe-area-inset-right, 0px)); overflow-x: hidden; } .dscroll > * { min-width: 0; max-width: 100%; flex-shrink: 0; } .outcome { margin-left: 2px; overflow-wrap: anywhere; word-break: normal; animation-name: popfade; } @keyframes popfade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .outcome p, .outcome .txt { padding-left: 1px; } .opts { padding-left: max(var(--space-3), env(safe-area-inset-left, 0px)); padding-right: max(var(--space-3), env(safe-area-inset-right, 0px)); } .opt::after { left: -7px; } .found { min-width: 0; } .found .grow { min-width: 0; } .found .vfx { left: 0; } /* вступление */ .intro { position: fixed; inset: 0; z-index: 90; display: flex; justify-content: center; align-items: center; background: radial-gradient(ellipse at 50% 30%, #3a1c2e, #0b060c 70%); animation: popfade .3s; } .intro-inner { width: 100%; max-width: 420px; padding: 24px 20px calc(24px + var(--safe-b)); display: flex; flex-direction: column; gap: 12px; text-align: center; } .intro .iart-wrap { height: 190px; display: grid; place-items: center; } .intro .iart-wrap img { max-height: 190px; max-width: 80%; object-fit: contain; filter: drop-shadow(0 6px 14px #000); } .intro h2 { margin: 0; font: 400 24px/1.3 var(--f-display); color: var(--gold2); } .intro p { margin: 0; font-size: 16px; line-height: 1.5; color: #f3e3c3; } .intro .istep { color: var(--mut); letter-spacing: 2px; } .intro .dots { display: flex; justify-content: center; gap: 6px; } .intro .dots i { width: 8px; height: 8px; border-radius: 50%; background: #5a4450; } .intro .dots i.on { background: var(--gold2); } /* подсказки обучения */ .coach { position: fixed; left: 0; right: 0; bottom: calc(74px + var(--safe-b)); z-index: 60; display: flex; justify-content: center; pointer-events: none; padding: 0 10px; animation: popfade .25s; } .coach.indive { position: absolute; bottom: auto; top: 46%; } .coach-b { pointer-events: auto; width: 100%; max-width: 440px; background: #2a1a2ef2; border: 1.5px solid var(--gold); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 8px 24px #000c; } .coach-b b { color: var(--gold2); font: 600 15px var(--f-ui); } .coach-b .txt { font-size: 15px; line-height: 1.4; } .coach-b .row { justify-content: flex-end; gap: 8px; } .coach-target { position: relative; z-index: 2; animation: coachPulse 1.4s ease-in-out infinite; } @keyframes coachPulse { 50% { filter: drop-shadow(0 0 10px #fbba64) brightness(1.15); } } .outcome.mini { padding: var(--space-2) var(--space-3); } .dscroll.combat .outcome.mini p { margin: 0; } /* ---------- v7: карты колоды, рука, фонари, мини-игры ---------- */ .kcard { --kc: #8f7a66; position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; min-width: 0; min-height: 132px; padding: 6px 5px 7px; border-radius: 10px; border: 1.5px solid var(--kc); background: linear-gradient(180deg, #2e1f33, #1a111d 70%); color: var(--txt); text-align: center; box-shadow: 0 3px 8px #0008, inset 0 0 0 1px #ffffff0d; } button.kcard:active { transform: translateY(2px) scale(.98); } .kcard.t-move { --kc: #e2b04a; } .kcard.t-lantern { --kc: #ffa630; background: linear-gradient(180deg, #3a2618, #1a111d 75%); } .kcard.t-help { --kc: #3fb7ae; } .kcard.t-guard { --kc: #4ba8ff; } .kcard.t-fight { --kc: #e2457a; } .kcard .kty { font-size: 15px; letter-spacing: 0; line-height: 1.05; text-transform: uppercase; color: var(--kc); font-weight: 700; } .kcard .kic { color: var(--kc); line-height: 0; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--kc) 50%, transparent)); } .kcard .knm { font-family: var(--f-display); font-size: 15px; line-height: 1.15; color: #fff4dc; overflow-wrap: anywhere; } .kcard .ktx { font-size: 15px; line-height: 1.2; color: var(--mut); overflow-wrap: anywhere; } .kcard.off { opacity: .5; filter: grayscale(.6); } .kcard.sm { min-height: 92px; padding: 4px 3px 5px; } .kcard.sm .ktx { font-size: 15px; } .kcard.sm .knm { font-size: 15px; } .kcard.sm .kty { font-size: 15px; } .kcard.r2 { box-shadow: 0 3px 8px #0008, 0 0 10px #4ba8ff55; } .kcard.r3 { box-shadow: 0 3px 8px #0008, 0 0 12px #c06bff66; } .cico .flame { fill: #ffd27a; stroke: #ffb347; } .hand { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 6px 8px 0; } .hand.cb { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 4px; } .hand.cb:not(:has(.kcard)) { display: none; } .hand .pile { position: absolute; right: 10px; top: -18px; z-index: 2; font-size: 15px; color: var(--mut); background: #120b14d0; border-radius: 6px; padding: 1px 6px; display: flex; align-items: center; gap: 3px; max-width: calc(100% - 16px); } .hand .pile small { opacity: .75; margin-left: 4px; font-size: 15px; } .hand.sm { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 6px 0 0; } .dfoot { display: flex; flex-direction: column; } .dfoot .opts { padding-top: var(--space-2); } .dfoot.busy .kcard, .dfoot.busy .opt { pointer-events: none; opacity: .6; } .opts.small .opt { min-height: 50px; } .opt.off { opacity: .55; filter: grayscale(.5); } .offer { border: 1px solid #e2b04a66; } .offer .offerhand { padding: 6px 0 0; } .depthbar .lit { display: inline-flex; align-items: center; gap: 3px; font-size: 15px; padding: 1px 6px; border-radius: 8px; } .depthbar .lit.on { color: #ffd27a; background: #ffa63022; } .depthbar .lit.dark { color: #b9a6c9; background: #3d2a4266; } .depthbar .lit.dark .flame { fill: none; stroke: #6c5a78; } .depthbar .shd { font-size: 15px; color: #c9b8ff; } .gamechip { align-self: center; font-size: 15px; color: var(--mut); background: #120b14c0; border: 1px solid var(--line); border-radius: 10px; padding: 2px 8px; display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 4px; align-items: center; max-width: 100%; text-align: center; } .gamechip.fly { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); z-index: 5; animation: gfly 1.4s ease-out forwards; } @keyframes gfly { 0% { opacity: 0; transform: translate(-50%, 8px); } 15% { opacity: 1; transform: translate(-50%, 0); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -10px); } } .mgrade b { margin-left: 3px; } .mgrade.g-perfect { color: var(--green); } .mgrade.g-good { color: var(--gold2); } .mgrade.g-miss { color: var(--red); } .dstage.minion .btray, .dstage.minion .bres, .dstage.minion .odds { visibility: hidden; } .mgame { position: absolute; inset: 0; z-index: 6; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 10px 12px; background: #120b14ee; border-radius: 12px; border: 1px solid #e2b04a55; animation: minin .18s ease-out; } .mgame.done { opacity: 0; transition: opacity .18s; } @keyframes minin { from { opacity: 0; transform: scale(.97); } } .mgame .mhead { display: flex; flex-direction: column; align-items: center; gap: 1px; text-align: center; } .mgame .mhead b { font-family: var(--f-display); color: var(--gold2); font-size: 16px; } .mgame .mhead span { font-size: 15px; color: var(--mut); } .mtrack { position: relative; height: 26px; border-radius: 13px; background: #2e1f33; border: 1px solid var(--line); overflow: hidden; } .mtrack .zone { position: absolute; top: 0; bottom: 0; background: #e2b04a55; } .mtrack .pz { position: absolute; top: 0; bottom: 0; background: #5fd07a99; } .mtrack .mk { position: absolute; top: -2px; bottom: -2px; width: 4px; margin-left: -2px; background: #fff4dc; box-shadow: 0 0 8px #fff; } .mtrack .fill { position: absolute; left: 0; top: 7px; bottom: 7px; width: 0; background: linear-gradient(90deg, #3fb7ae, #e2457a); border-radius: 6px; } .mtap { min-height: 52px; font-size: 18px; touch-action: manipulation; user-select: none; -webkit-user-select: none; } .mtap.pulse { transform: scale(.97); filter: brightness(1.3); } .msyms { display: flex; justify-content: center; gap: 10px; font-size: 30px; color: #fff4dc; min-height: 44px; } .msyms.left { opacity: .9; } .msyms .q { color: var(--gold2); } .mtimer { height: 4px; background: #2e1f33; border-radius: 2px; overflow: hidden; } .mtimer i { display: block; height: 100%; background: var(--gold); animation: mtimer linear forwards; } @keyframes mtimer { from { width: 100%; } to { width: 0; } } .mopts, .marrows { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } .mopts .btn, .marrows .btn { min-height: 48px; font-size: 24px; padding: 0; } .mcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .mcard { min-height: 92px; border-radius: 10px; border: 1.5px solid var(--gold); background: repeating-linear-gradient(45deg, #2e1f33 0 8px, #241827 8px 16px); font-size: 28px; color: var(--gold2); transition: transform .2s; } .mcard.flip { transform: rotateY(90deg); } .mbeats { display: flex; justify-content: center; gap: 12px; height: 30px; align-items: center; } .mbeats i { width: 18px; height: 18px; border-radius: 50%; background: #3d2a42; animation: beat ease-out both; } .mbeats i.hit { border: 2px solid var(--gold2); } @keyframes beat { 0% { background: #3d2a42; transform: scale(1); } 30% { background: #ffd27a; transform: scale(1.5); box-shadow: 0 0 12px #ffd27a; } 100% { background: #5a4a52; transform: scale(1); } } .mswipe { min-height: 90px; border-radius: 12px; border: 1px dashed var(--line); display: flex; align-items: center; justify-content: center; touch-action: none; } .mswipe .tele { font-size: 22px; color: var(--red); font-family: var(--f-display); } .mswipe.go { border-color: var(--green); background: #5fd07a14; } .mswipe.go .tele { color: var(--green); } .mreact { min-height: 120px; border-radius: 14px; background: #3d2a42; border: 2px solid var(--line); font-size: 26px; font-family: var(--f-display); color: var(--mut); touch-action: manipulation; } .mreact.go { background: #e2457a; color: #fff; border-color: #ffb3c9; box-shadow: 0 0 24px #e2457a; } .dstage { position: relative; } .panelbtn .pbic { width: 36px; height: 36px; display: grid; place-items: center; color: var(--gold2); flex: none; } .panelbtn .pbic.lan { color: #ffa630; } .panel-row.master { --acc: #c9b8ff; height: auto; min-height: 52px; flex-shrink: 0; align-items: flex-start; padding-top: 8px; padding-bottom: 8px; } .panel-row.master .msig, .panel-row.shards svg { color: #c9b8ff; flex: none; } .panel-row.shards { --acc: #c9b8ff; } .kshop { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .kslot { display: flex; flex-direction: column; gap: 6px; } .kslot .btn { width: 100%; padding-left: 2px; padding-right: 2px; } .kslot.sold .kcard { opacity: .45; } .deckgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .dslot { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .dslot .row { gap: 4px; justify-content: center; flex-wrap: wrap; } .dslot .btn.sm { min-height: 44px; min-width: 44px; padding: 2px 8px; flex: 1 1 44px; } .lanlist { display: flex; flex-direction: column; gap: 4px; } .lanrow { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; background: #1d1320; color: #6c5a78; } .lanrow.on { color: #ffa630; background: #3a261866; } .lanrow b { color: var(--txt); display: block; } .lanrow .grow { display: flex; flex-direction: column; } .lanrow:not(.on) .flame { fill: none; stroke: #6c5a78; } .startpick { display: flex; flex-direction: column; gap: 4px; } .startpick .chips { flex-wrap: wrap; } .startpick .chip { display: inline-flex; align-items: center; gap: 4px; color: #ffd27a; } .toggle { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 8px; border-radius: 10px; background: #1d1320; border: 1px solid var(--line); } .toggle > i { width: 42px; height: 24px; border-radius: 12px; background: #3d2a42; position: relative; flex: none; transition: background .15s; } .toggle > i::after { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #c4ae9c; transition: left .15s; } .toggle.on > i { background: var(--teal); } .toggle.on > i::after { left: 21px; background: #fff; } .toggle div { display: flex; flex-direction: column; } @media (max-width: 340px) { .kcard { min-height: 120px; } .kcard .ktx, .kcard .knm, .kcard .kty { font-size: 15px; } .hand { gap: 4px; padding: 4px 4px 0; } } .depthbar .lit, .depthbar .shd { white-space: nowrap; flex: none; } .depthbar .lit svg { width: 14px; height: 14px; } .dive-inner:has(.dfoot .hand .kcard) .scene { max-height: 30vh; } @media (max-height: 760px) { .dive-inner:has(.dfoot .hand .kcard) .scene { max-height: 24vh; } .hand .kcard { min-height: 108px; } .hand .kcard .ktx { -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } } @media (max-height: 660px) { .dive-inner:has(.dfoot .hand .kcard) .scene { max-height: 20vh; } .hand .kcard { min-height: 96px; padding-top: 4px; } } /* 24.10.2026 — Дом последнего имени: рассказ, три сущности, подготовка к пути. */ :root { --mut:#d0c0ae; --line:#65462d; } html,body { line-height:1.5; } .txt { line-height:1.65; text-wrap:pretty; } .display,.soul-name { letter-spacing:.01em; } .top h1 { font-size:19px; } .music-toggle { flex:none; min-width:44px; min-height:44px; border:1px solid #bfa05c80; border-radius:50%; color:#ffe5a3; background:#0f3531c9; font-size:16px; } .music-toggle[aria-pressed=false] { color:#d0c0ae; } .hub-whisper,.soul-whisper,.lore-banner { color:#e8d8ba; line-height:1.65; border-left:2px solid #ec943f; padding:8px 12px; background:linear-gradient(90deg,#e276241a,transparent); } .hub-whisper { margin:4px 10px; font-size:15px; } .soul-whisper { margin:12px 0; font-size:15px; } .soul-name { font-size:21px; line-height:1.3; } .soul-entities { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; margin:12px 0; } .soul-entity { --entity:#f4b955; display:flex; align-items:center; flex-direction:column; padding:11px 5px; border:1px solid color-mix(in srgb,var(--entity) 45%,transparent); border-radius:12px; background:linear-gradient(160deg,color-mix(in srgb,var(--entity) 10%,#102925),#121c1d); text-align:center; min-width:0; } .entity-teyolia { --entity:#fb92aa; }.entity-ihiyotl { --entity:#7edbd1; } .entity-mark { color:var(--entity); font-size:25px; line-height:1.2; } .soul-entity b { color:var(--entity); font-size:14px; margin:6px 0 3px; } .entity-value { color:#fff3d9; font-size:17px; font-weight:600; } .soul-entity small { font-size:12px; line-height:1.4; color:#d6cbbb; margin-top:5px; overflow-wrap:anywhere; } .souldots { gap:5px; }.souldots .sd { min-width:0; color:#bcb2a4; }.souldots .sd small { font-size:12px; }.souldots .sd.on { color:#ffd37b; } .sheet { border-image:none; border:1px solid #ca9b50; border-bottom:0; border-radius:24px 24px 0 0; padding:22px 16px calc(22px + var(--safe-b)); background:linear-gradient(155deg,#163c37fa,#132a2afc 42%,#261522fc); box-shadow:0 -12px 60px #0009; } .sheet.has-bg::before { border-radius:24px 24px 0 0; opacity:.12; } .sheet:has(.diver-selection) { max-width:860px; } .sheet:has(.summon-ceremony) { padding:0; overflow:hidden; max-height:94dvh; } .grabber { width:54px; height:5px; margin:-10px auto 14px; background:#d7b77970; border-radius:10px; } .sheet h2 { font:400 26px/1.3 var(--f-display); color:#ffd58d; margin:8px 0 12px; } .sheet .rules p { margin:0 0 16px; } .story-kicker { display:block; color:#8bdfcf; font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; } .intro-story { padding:18px; background:radial-gradient(ellipse at 50% 25%,#174b45,#130e1d 72%); overflow-y:auto; } .intro-story .story-panel { display:grid; grid-template-columns:1fr; max-width:620px; padding:0; gap:0; border:1px solid #e7b25980; border-radius:26px; background:#122722; box-shadow:0 18px 80px #000a; overflow:hidden; flex:none; margin:auto; } .story-illustration { position:relative; height:clamp(185px,33vh,320px); background:#133c39; overflow:hidden; } .story-art { width:100%; height:100%; object-fit:cover; display:block; } .story-vignette { position:absolute; inset:0; background:linear-gradient(transparent 65%,#122722); pointer-events:none; } .story-copy { padding:8px 26px 24px; display:flex; flex-direction:column; gap:16px; text-align:left; } .story-copy h2 { font-size:30px; line-height:1.25; }.story-copy p { font-size:16px; line-height:1.65; } .story-copy .dots { margin:2px 0; }.story-copy .row { gap:12px; } .diver-selection>p { max-width:65ch; color:#e2d7c2; margin:10px 0 18px; } .diver-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin:20px 0; } .diver-choice { padding:12px; border-radius:18px; background:linear-gradient(160deg,#27594c80,#132620); border:1px solid #d4ab615e; overflow:hidden; } .diver-card { display:flex; flex-direction:column; align-items:center; width:100%; padding:4px 0 10px; min-height:300px; text-align:center; transition:background .2s; } .diver-card:hover { background:#e7b55e0c; }.diver-card:active .diver-mask { scale:.96; } .diver-mask { display:grid; place-items:center; width:140px; height:150px; position:relative; transition:scale .2s; filter:drop-shadow(0 8px 14px #0009); } .diver-mask::before { content:''; position:absolute; inset:6px; z-index:-1; background:radial-gradient(ellipse,color-mix(in srgb,var(--soul-color) 30%,transparent),transparent 70%); } .diver-mask img { object-fit:contain; max-width:100%; max-height:100%; } .diver-name { color:#ffdda0; font:400 20px/1.4 var(--f-display); margin:6px 0 10px; } .diver-whisper { color:#d6c9b3; font-size:14px; line-height:1.55; flex:1; } .diver-cta { color:#9debd1; font-size:14px; font-weight:600; margin:18px 0 0; } .diver-choice .soul-entities { gap:4px; margin:4px 0 10px; }.diver-choice .soul-entity { padding:8px 3px; }.diver-choice .soul-entity b { font-size:11px; }.diver-choice .soul-entity small { display:none; }.diver-choice .entity-value { font-size:12px; }.diver-choice .entity-mark { font-size:20px; } .preparation-deck { background:linear-gradient(110deg,#78432b90,#255e5280); border:1px solid #e1b35c; border-radius:12px; padding:12px; gap:12px; }.preparation-deck>span:nth-child(2) { flex:1; }.preparation-deck small { display:block; color:#dfd2b8; font-size:13px; } .battle-pause { display:block; padding:7px 12px; min-height:40px; color:#d4c8ad; font-size:13px; text-align:left; } .journey-hud { margin-top:0; }.tonalli-label { color:#ffd17c; font-size:12px; }.dhud .lbl { gap:6px; }.dhud .bars { min-width:0; } .hand-title { color:#8edecb; padding:8px 10px; font-size:14px; }.hand-title small { color:#d3c4ae; font-size:12px; } .motion-toggle { display:block; min-height:44px; color:#b4e9dc; text-align:center; font-size:14px; width:100%; border:1px solid #65b7a85c; border-radius:10px; padding:8px; background:#0b302b; } .boss-entrance { text-align:center; padding:0 10px 8px; }.boss-portrait { height:min(34vh,280px); display:grid; place-items:center; background:radial-gradient(ellipse,#cc984544,transparent 68%); }.boss-portrait img { max-width:100%; max-height:100%; object-fit:contain; filter:drop-shadow(0 14px 20px #000a); animation:guardian-arrive .8s both; }.boss-entrance .txt { text-align:left; color:#ecdec4; margin:16px 0 24px; } .scene .mon { animation:monIn .35s ease-out,creature-breath 4.2s ease-in-out .35s infinite; transform-origin:50% 90%; }.scene .mon.boss { animation:bossIn .6s ease-out,creature-breath 5.1s ease-in-out .6s infinite; } @keyframes creature-breath { 0%,100% { translate:0 0; scale:1 1; } 50% { translate:0 -4px; scale:1.015 1.025; } } @keyframes guardian-arrive { from { opacity:0; translate:0 18px; scale:.94; } to { opacity:1; translate:0 0; scale:1; } } .lore-item { margin:12px 0; background:linear-gradient(120deg,#cc7c3520,#16655822); border-radius:12px; }.lore-item b { color:#9fe8d2; font:400 20px/1.4 var(--f-display); }.lore-item .txt { color:#f0dfc4; margin-top:8px; }.masklore { border-left:3px solid #e69846; background:linear-gradient(100deg,#b45c2626,#163c3826); padding:12px; border-radius:8px; }.masklore .txt { color:#f5dba5; line-height:1.75; } .summon-ceremony { position:relative; min-height:min(690px,88dvh); width:100%; display:flex; justify-content:flex-end; flex-direction:column; overflow:hidden; isolation:isolate; text-align:center; } .ritual-backdrop { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-3; opacity:.7; }.summon-ceremony::after { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(transparent 25%,#112822a8 57%,#102522 90%); } .ritual-aura { position:absolute; inset:10% 3% 22%; border-radius:50%; background:radial-gradient(ellipse,#6bfff555,transparent 64%); animation:ritual-light 3s ease-out both; z-index:-2; } .summoned-figure { position:absolute; top:14%; left:0; right:0; height:38%; display:grid; place-items:center; filter:drop-shadow(0 0 20px #80e8d788); animation:soul-awakens 1.8s cubic-bezier(.18,.7,.25,1) both; }.summoned-figure img { max-height:100%; object-fit:contain; } .ritual-copy { padding:25px 24px 22px; position:relative; animation:ritual-copy .8s .65s both; }.ritual-copy p { line-height:1.7; color:#f0dfbf; margin:14px 0 22px; } .ritual-petals { position:absolute; inset:0; pointer-events:none; z-index:0; }.ritual-petals i { position:absolute; left:calc(8% + var(--i)*7.4%); bottom:30%; width:7px; height:15px; border-radius:70% 20%; background:#ff9b32; box-shadow:0 0 9px #ffb932aa; animation:ritual-petal 3.4s calc(var(--i)*-.28s) ease-out infinite; } @keyframes soul-awakens { from { opacity:0; translate:0 55px; scale:.65; filter:blur(12px); } 60% { opacity:1; filter:blur(0); } to { opacity:1; translate:0 0; scale:1; } } @keyframes ritual-light { from { opacity:0; scale:.3; } to { opacity:1; scale:1; } } @keyframes ritual-copy { from { opacity:0; translate:0 12px; } to { opacity:1; translate:0 0; } } @keyframes ritual-petal { 0% { opacity:0; translate:0 30px; rotate:0deg; } 15%,65% { opacity:.85; } 100% { opacity:0; translate:calc((var(--i) - 6)*5px) -320px; rotate:180deg; } } .summon-ceremony.still * { animation:none!important; } @media(max-width:650px) { .diver-grid { grid-template-columns:1fr; }.diver-card { display:grid; grid-template-columns:112px 1fr; column-gap:12px; text-align:left; min-height:170px; }.diver-mask { grid-row:1/4; width:112px; height:142px; }.diver-name { font-size:21px; margin:0 0 7px; }.diver-cta { margin:10px 0 0; }.diver-choice .soul-entity b { font-size:14px; }.diver-choice .entity-value { font-size:15px; }.diver-choice { padding:14px; }.intro-story { padding:12px; }.story-copy { padding:6px 20px 20px; gap:13px; }.story-copy h2 { font-size:27px; }.story-illustration { height:29vh; }.sheet { max-height:93dvh; }.top { gap:6px; padding-left:8px; padding-right:8px; }.top h1 { font-size:17px; }.music-toggle { min-width:40px; }.top .money { padding-left:5px; padding-right:5px; } } @media(max-width:350px) { .story-copy h2 { font-size:24px; }.story-copy p { font-size:15px; }.diver-card { grid-template-columns:92px 1fr; }.diver-mask { width:92px; }.soul-entity b { font-size:12px; }.entity-value { font-size:15px; }.soul-entity small { font-size:11px; }.dhud .lbl { font-size:12px; } } @media(prefers-reduced-motion:reduce) { .scene .mon,.scene .mon.boss,.summon-ceremony *,.boss-portrait img { animation:none!important; }.diver-mask { transition:none; } } .hand { font-style:normal; letter-spacing:normal; }.hand.cb { grid-template-columns:repeat(3,minmax(0,1fr)); padding-top:22px; }.hand-title small { display:block; line-height:1.4; margin-top:3px; }.hand .pile { top:0; font-size:12px; }.hand .pile small { font-size:12px; }.hand.cb .kcard { min-height:108px; max-height:130px; }.hand.cb .kcard .ktx { font-size:12px; line-height:1.3; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }.hand.cb .kcard .kty { font-size:11px; }.hand.cb .kcard .knm { font-size:14px; }.hand.cb .kcard.off { opacity:.65; }.memory-hud { color:#f2b0bd; font-size:12px; }.journey-hud { gap:5px; font-size:13px; }.journey-hud .lname { white-space:normal; min-width:0; }.dfoot:has(.hand.cb) { max-height:46dvh; overflow-y:auto; flex:none; padding-bottom:var(--safe-b); }.dive-inner:has(.hand.cb) .scene { max-height:24vh; }.dive-inner:has(.hand.cb) .dhud { margin-top:var(--safe-t); }.dive-inner:has(.hand.cb) .battle-pause { padding:3px 12px; min-height:30px; }.dive-inner:has(.hand.cb) .depthbar { min-height:32px; padding:4px 8px; }.dive-inner:has(.hand.cb) .motion-toggle { min-height:36px; font-size:12px; padding:6px; } @media(max-height:700px) { .dive-inner:has(.hand.cb) .scene { max-height:19vh; }.dfoot:has(.hand.cb) { max-height:46dvh; }.hand-title { padding:4px 8px; font-size:12px; }.hand.cb .kcard { min-height:92px; }.dhud .bars .lbl { font-size:12px; } } .dive-inner:has(.dfoot .hand.cb .kcard) .scene { max-height:18dvh; }.dive-inner:has(.dfoot .hand.cb .kcard) .dscroll.combat { min-height:160px; }.dive-inner:has(.dfoot .hand.cb .kcard) .dfoot { max-height:43dvh; }.dive-inner:has(.dfoot .hand.cb .kcard) .dfoot .option-meta { font-size:12px; padding:2px 4px; }.dive-inner:has(.dfoot .hand.cb .kcard) .hand-title { font-size:12px; padding:3px 8px; }.dive-inner:has(.dfoot .hand.cb .kcard) .hand-title small { font-size:11px; }.dive-inner:has(.dfoot .hand.cb .kcard) .hand.cb .kcard { min-height:94px; }.dive-inner:has(.dfoot .hand.cb .kcard) .dhud { border-width:9px; border-image-width:9px; }.dive-inner:has(.dfoot .hand.cb .kcard) .hudmask img { width:36px!important; height:36px!important; }.dive-inner:has(.dfoot .hand.cb .kcard) .dhud .bars { font-size:12px; }.dive-inner:has(.dfoot .hand.cb .kcard) .cbopts .opt { min-height:56px; }.dive-inner:has(.dfoot .hand.cb .kcard) .cbopts .opt .ol small { font-size:12px; } @media(max-height:700px) { .dive-inner:has(.dfoot .hand.cb .kcard) .scene { max-height:14dvh; }.dive-inner:has(.dfoot .hand.cb .kcard) .dscroll.combat { min-height:140px; }.dive-inner:has(.dfoot .hand.cb .kcard) .dfoot { max-height:42dvh; } }