/* andykate — общие стили. Цвета темы: --bg, --ink, --acc; у комнат релизов их задаёт build.py на <html>. */

:root {
  --bg: #060608;
  --ink: #EDEBF2;
  --mute: #9B99A8;
  --line: #23222A;
  --line2: #3A3946;
  --acc: #46E3F2;
  --unb: 'Unbounded', sans-serif;
  --onest: 'Onest', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --dms: 'DM Serif Display', Georgia, serif;
  --bsd: 'Big Shoulders Display', 'Arial Narrow', sans-serif;
  /* шрифт заголовков комнаты */
  --d-font: var(--unb);
  --d-w: 900;
  --d-style: normal;
  --d-tt: none;
  --d-ls: -0.02em;
  --wrap: 1320px;
  --gut: 24px;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--bg);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--onest);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
img { max-width: 100%; height: auto; }
[hidden] { display: none !important; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus { outline: none; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.vh {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* корень страницы: обрезает декор, который вылезает за край (звезда, знак), без горизонтальной прокрутки */
.page {
  position: relative;
  overflow: hidden;
  overflow: clip;
  min-height: 100vh;
  min-height: 100svh;
}
.grain {
  position: absolute; inset: 0; z-index: 5; pointer-events: none;
  background: url(../img/grain.png) repeat;
  background-size: 128px 128px;
  opacity: 0.14;
  mix-blend-mode: overlay;
}
.room .grain { opacity: 0.16; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gut); padding-right: var(--gut); }
.mono { font-family: var(--mono); }
.chrome {
  background: linear-gradient(180deg, #FFFFFF 0%, #D9D7E4 38%, #5D5B6B 52%, #C9C7D6 64%, #FFFFFF 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.chrome-plum {
  background: linear-gradient(180deg, #FFFFFF 0%, #E9DDF0 36%, #6A4C70 52%, #D9CCE0 64%, #FFFFFF 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.glow { text-shadow: 0 0 24px currentColor, 0 0 2px currentColor; }
.ph { opacity: 0.75; }

/* заголовок, который не вылезает за колонку: --fit = длина самого длинного слова × ширина буквы шрифта */
.fitbox { container-type: inline-size; min-width: 0; }
.fit { font-size: min(var(--fs-max), calc(100cqi / var(--fit, 1))); }

/* ───── шапка ───── */
.hdr { position: relative; z-index: 3; }
.hdr .wrap {
  padding-top: 22px; padding-bottom: 22px;
  display: flex; flex-wrap: wrap; gap: 4px 32px; align-items: center; justify-content: space-between;
}
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; min-height: 44px; }
.logo svg { width: 22px; height: 22px; flex-shrink: 0; }
.logo span { font-family: var(--unb); font-weight: 900; font-size: 18px; letter-spacing: 0.02em; }
.nav { display: flex; flex-wrap: wrap; gap: 0 26px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.nav a { text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.nav a[aria-current] { text-decoration: underline; text-underline-offset: 6px; }
.shell a:hover { color: var(--acc); }
.room a:hover { opacity: 0.75; }
.shell .hdr .logo:hover, .shell .hdr .logo:hover svg path { color: var(--ink); }

/* ───── общие куски ───── */
.sec { position: relative; z-index: 1; padding-top: 72px; padding-bottom: 72px; }
.sec-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 36px; }
.h2 { margin: 0; font-family: var(--unb); font-weight: 900; font-size: 56px; letter-spacing: -0.03em; line-height: 1; }
.more { font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; min-height: 44px; display: inline-flex; align-items: center; }
.kicker { position: relative; margin: 0; font-family: var(--mono); font-size: 13px; letter-spacing: 0.14em; opacity: 0.8; }
.btn {
  text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; padding: 0 18px;
  border: 1px solid var(--line); font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  background: none; cursor: pointer;
}
.btn-fill { background: var(--ink); color: var(--bg); border-color: var(--ink); padding: 0 20px; }
.btns { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  min-height: 44px; padding: 0 16px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  cursor: pointer; border: 1px solid var(--pill-line, var(--line2)); background: transparent; color: var(--ink);
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.pill[aria-pressed="true"] { background: var(--pill-on, var(--ink)); border-color: var(--pill-on, var(--ink)); color: var(--pill-on-ink, var(--bg)); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  position: absolute; left: 12px; top: 12px; padding: 5px 10px;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; background: var(--tag-bg); color: var(--tag-ink);
}
.dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; background: var(--c); }
.star-path { fill: currentColor; }

/* ───── главная ───── */
.hero { position: relative; z-index: 1; padding-top: 40px; padding-bottom: 80px; display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.hero-star { position: absolute; right: -260px; top: -160px; width: 900px; height: 900px; opacity: 0.06; pointer-events: none; }
.hero-star path { fill: none; stroke: var(--ink); stroke-width: 0.2; }
.wordmark { flex: 999 1 520px; min-width: 0; margin: 0; font-family: var(--unb); font-weight: 900; font-size: clamp(64px, 11.5vw, 168px); line-height: 0.84; letter-spacing: -0.04em; }
.new { flex: 1 1 320px; max-width: 420px; text-decoration: none; display: flex; flex-direction: column; gap: 18px; }
.new-cover { position: relative; transform: rotate(-2.5deg); }
.new-cover img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; box-shadow: 0 30px 80px rgba(201, 183, 154, 0.25); }
.new-tag {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%) rotate(3deg); white-space: nowrap;
  background: #D8C9AC; color: #1E1912; font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; padding: 6px 18px;
}
.new-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.new-title { font-family: var(--dms); font-style: italic; font-size: 44px; line-height: 1; }
.new-kind { font-family: var(--mono); font-size: 12px; color: var(--mute); white-space: nowrap; }
.new:hover .new-title { color: var(--acc); }

.ticker { position: relative; z-index: 1; background: var(--acc); color: var(--bg); overflow: hidden; border-top: 1px solid var(--acc); border-bottom: 1px solid var(--acc); }
.ticker-run { display: flex; width: max-content; padding: 14px 0; font-family: var(--unb); font-weight: 700; font-size: 22px; letter-spacing: 0.02em; white-space: nowrap; animation: run 38s linear infinite; }
.ticker-run span { padding-right: 28px; }
.ticker-run.js-run { animation: none; will-change: transform; }
@keyframes run { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); grid-auto-flow: dense; gap: 16px; }
.tile { text-decoration: none; display: flex; flex-direction: column; min-width: 0; }
.tile.big { grid-column: span 2; grid-row: span 2; }
.tile-img { overflow: hidden; aspect-ratio: 1 / 1; background: #15141A; }
.tile-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.tile:hover .tile-img img { transform: scale(1.03); }
.tile-cap { display: flex; align-items: baseline; gap: 4px 8px; padding-top: 10px; flex-wrap: wrap; }
.tile-cap .dot { align-self: center; }
.tile-title { flex: 1 1 60px; min-width: 0; font-weight: 600; font-size: 15px; line-height: 1.25; overflow-wrap: anywhere; }
.tile-meta { font-family: var(--mono); font-size: 11px; color: var(--mute); white-space: nowrap; }
.tile:not(.big) .tile-meta { flex-basis: 100%; padding-left: 12px; }
@media (min-width: 900px) { .tile:not(.big) .tile-meta { flex-basis: auto; padding-left: 0; } }
.wall-wrap { padding-top: 88px; padding-bottom: 40px; }

.lede { margin: 0 0 36px; font-size: 17px; color: var(--mute); max-width: 560px; }
.rooms { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.room-card {
  text-decoration: none; display: flex; flex-direction: column; gap: 16px; padding: 24px; min-height: 260px; justify-content: flex-end;
  background: var(--c-bg); color: var(--c-ink); transition: transform .3s ease;
}
.room-card img { width: 96px; height: 96px; object-fit: cover; display: block; box-shadow: 0 12px 30px rgba(0,0,0,0.35); }
.room-card .mood { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; opacity: 0.75; }
.shell a.room-card:hover { color: var(--c-ink); transform: translateY(-4px); }

.posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 40px 24px; }
.post-card { text-decoration: none; display: flex; flex-direction: column; gap: 14px; }
.post-card[hidden] { display: none; }
.post-img { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #15141A; }
.post-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.post-img img.bw { filter: grayscale(1) contrast(1.1); opacity: 0.85; }
.post-card:hover .post-img img { transform: scale(1.03); }
.post-no { font-family: var(--mono); font-size: 12px; color: var(--mute); }
.post-title { font-size: 22px; font-weight: 600; line-height: 1.25; }
.post-lead { font-size: 15px; line-height: 1.5; color: var(--mute); }

.gigs { display: flex; flex-wrap: wrap; gap: 32px 64px; align-items: flex-end; }
.gigs-text { flex: 999 1 520px; min-width: 0; }
.gigs-h { margin: 0; font-family: var(--unb); font-weight: 900; font-size: clamp(52px, 6.6vw, 96px); line-height: 0.9; letter-spacing: -0.04em; }
.note { margin: 16px 0 0; font-size: 14px; color: var(--mute); }
.sub { flex: 1 1 340px; display: flex; flex-direction: column; gap: 12px; }
.sub label, .label { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; color: var(--mute); }
.sub-row { display: flex; flex-wrap: wrap; gap: 8px; }
.sub input {
  flex: 1 1 200px; min-width: 0; height: 52px; padding: 0 16px; border: 1px solid var(--line2); border-radius: 0;
  background: transparent; color: var(--ink); font: inherit; font-size: 16px; -webkit-appearance: none; appearance: none;
}
.sub input:focus-visible { outline: 2px solid var(--acc); outline-offset: 0; border-color: var(--acc); }
.sub button { height: 52px; padding: 0 24px; border: 0; background: var(--acc); color: var(--bg); font-family: var(--unb); font-weight: 700; font-size: 14px; cursor: pointer; }
.sub-msg { margin: 0; min-height: 1.4em; font-size: 14px; color: var(--mute); }

.ftr { position: relative; z-index: 1; border-top: 1px solid var(--line); margin-top: 40px; }
.ftr .wrap { padding-top: 32px; display: flex; flex-wrap: wrap; gap: 8px 32px; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--mute); }
.ftr-links { display: flex; flex-wrap: wrap; gap: 0 20px; align-items: center; }
.ftr-links a, .ftr-links span { min-height: 44px; display: inline-flex; align-items: center; }
.outline {
  margin: 24px 0 -0.12em; font-family: var(--unb); font-weight: 900; font-size: 13.4vw; line-height: 1;
  letter-spacing: -0.04em; text-align: center; white-space: nowrap; color: transparent; -webkit-text-stroke: 1.5px #3A3946;
}
.room .ftr { border-top-color: var(--line); }
.room .ftr .wrap { color: inherit; opacity: 0.75; }
.room .outline { -webkit-text-stroke-color: var(--line); }

/* ───── дискография ───── */
.disc { transition: background-color .45s ease, color .45s ease; background: var(--bg); color: var(--ink); }
.disc-main { position: relative; z-index: 1; padding-top: 24px; padding-bottom: 96px; }
.sel { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-end; padding-bottom: 48px; scroll-margin-top: 16px; }
.sel-cover { flex: 0 1 380px; width: 380px; max-width: 100%; aspect-ratio: 1 / 1; position: relative; }
.sel-cover img { width: 100%; height: 100%; object-fit: cover; display: block; box-shadow: 0 30px 100px rgba(0,0,0,0.45); }
.sel-cover .noimg, .card-noimg {
  width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  border: 1px dashed currentColor; font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; opacity: 0.7; text-align: center; padding: 8px;
}
.card-noimg { border-color: var(--line); font-size: 10px; opacity: 1; }
.card-noimg svg { width: 40px; height: 40px; }
.card-noimg path { fill: none; stroke: currentColor; stroke-width: 0.8; }
.sel-text { flex: 999 1 400px; display: flex; flex-direction: column; gap: 18px; }
.sel-title { margin: 0; line-height: 0.88; letter-spacing: -0.03em; overflow-wrap: break-word; }
.sel-meta { margin: 0; font-family: var(--mono); font-size: 13px; letter-spacing: 0.06em; opacity: 0.85; }
.filter { display: flex; flex-wrap: wrap; gap: 8px; padding: 20px 0; border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; margin-bottom: 32px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 28px 18px; }
.card { padding: 0; border: 0; background: none; color: inherit; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.card[hidden] { display: none; }
.card-img { width: 100%; aspect-ratio: 1 / 1; display: block; outline: 0 solid var(--ink); outline-offset: 4px; transition: outline-width .15s ease; }
.card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card[aria-pressed="true"] .card-img { outline-width: 3px; }
.card-title { font-weight: 600; font-size: 15px; line-height: 1.25; }
.card-meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; opacity: 0.75; }
.disc .pill { --pill-line: var(--line); }

/* ───── комната релиза ───── */
.room { --line: color-mix(in srgb, var(--ink) 22%, transparent); }
.dtype { font-family: var(--d-font); font-weight: var(--d-w); font-style: var(--d-style); text-transform: var(--d-tt); }
.room-hero { position: relative; z-index: 1; }
.poster { padding: 24px var(--gut) 64px; text-align: center; }
.deco { position: absolute; inset: 0; pointer-events: none; }
.deco-rays {
  background: repeating-conic-gradient(from 0deg at 50% 55%, rgba(255,255,255,0.13) 0deg 1.4deg, transparent 1.4deg 9deg);
  -webkit-mask-image: radial-gradient(circle at 50% 55%, #000 0%, transparent 62%); mask-image: radial-gradient(circle at 50% 55%, #000 0%, transparent 62%);
}
.deco-glow { background: radial-gradient(circle at 50% 58%, color-mix(in srgb, var(--acc) 38%, transparent) 0%, transparent 46%); }
.deco-flare { background: radial-gradient(circle at 72% 30%, rgba(255,122,46,0.55), transparent 36%), radial-gradient(circle at 26% 70%, rgba(255,60,140,0.35), transparent 40%); }
.poster-title { position: relative; z-index: 1; margin: 12px 0 0; line-height: 0.82; letter-spacing: -0.04em; }
.poster-title.short { margin-bottom: -0.28em; }
.poster-title.long { margin-bottom: 24px; line-height: 0.9; }
.poster-cover { position: relative; z-index: 2; width: min(480px, 100%); aspect-ratio: 1 / 1; object-fit: cover; display: block; margin: 0 auto; box-shadow: 0 40px 120px color-mix(in srgb, var(--acc) 35%, transparent); }
.meta-line { position: relative; margin: 32px 0 0; font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; }
.poster .btns { position: relative; justify-content: center; margin-top: 24px; }
.acc-title { color: var(--acc); }

.split { padding-top: 32px; padding-bottom: 80px; display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.split-star { position: absolute; right: -120px; top: -80px; width: 720px; height: 720px; opacity: 0.08; pointer-events: none; }
.split-cover { position: relative; flex: 1 1 320px; max-width: 560px; }
.split-cover img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; box-shadow: 0 30px 90px rgba(0,0,0,0.35); }
.tilt img { transform: rotate(-2deg); }
.tape { position: absolute; background: rgba(240, 230, 205, 0.85); }
.tape-1 { top: -12px; left: 18%; width: 120px; height: 30px; transform: rotate(-6deg); }
.tape-2 { bottom: -10px; right: 12%; width: 110px; height: 28px; transform: rotate(4deg); }
.bars { position: absolute; left: -12px; bottom: -40px; display: flex; flex-direction: column; gap: 8px; }
.bars span { display: block; width: 120px; height: 10px; background: currentColor; }
.split-text { position: relative; flex: 999 1 400px; display: flex; flex-direction: column; gap: 24px; }
.split-title { margin: 0; line-height: 0.86; letter-spacing: var(--d-ls); }
.split-text .meta-line { margin: 0; }

.archive { padding-top: 24px; padding-bottom: 80px; }
.archive-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding: 12px 0; border-top: 2px solid var(--ink); border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; }
.archive-body { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-start; padding-top: 40px; }
.archive-cover { position: relative; flex: 1 1 320px; max-width: 520px; padding: 18px; }
.archive-cover img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.crop { position: absolute; width: 22px; height: 22px; border-color: var(--ink); border-style: solid; border-width: 0; }
.crop-1 { left: 0; top: 0; border-left-width: 1.5px; border-top-width: 1.5px; }
.crop-2 { right: 0; top: 0; border-right-width: 1.5px; border-top-width: 1.5px; }
.crop-3 { left: 0; bottom: 0; border-left-width: 1.5px; border-bottom-width: 1.5px; }
.crop-4 { right: 0; bottom: 0; border-right-width: 1.5px; border-bottom-width: 1.5px; }
.sigil { position: absolute; right: -70px; top: 10%; width: 140px; height: 224px; opacity: 0.9; }
.sigil path { fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linejoin: miter; }
.archive-text { flex: 999 1 420px; display: flex; flex-direction: column; gap: 28px; }
.facts { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); font-family: var(--mono); }
.facts div { padding: 14px 14px 14px 0; border-top: 1px solid var(--line); }
.facts dt { font-size: 11px; letter-spacing: 0.1em; opacity: 0.7; margin-bottom: 6px; }
.facts dd { margin: 0; font-size: 15px; }

.room-main { position: relative; z-index: 1; }
.rsec { padding: 64px 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 28px 64px; }
.rsec-side { flex: 1 1 280px; display: flex; flex-direction: column; gap: 18px; min-width: 0; container-type: inline-size; }
.rsec-body { flex: 999 1 520px; min-width: 0; }
.rh2 { margin: 0; font-size: min(44px, calc(100cqi / (7.6 * var(--d-em, 1)))); line-height: 1; letter-spacing: var(--d-ls); }

.now { padding: 18px; display: flex; flex-direction: column; gap: 14px; background: color-mix(in srgb, var(--ink) 8%, transparent); }
.now-label { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; opacity: 0.75; }
.now-title { font-size: 22px; font-weight: 600; min-height: 1.2em; }
.now-row { display: flex; align-items: center; gap: 12px; }
.play {
  width: 44px; height: 44px; border-radius: 50%; border: 0; display: flex; align-items: center; justify-content: center;
  cursor: pointer; background: var(--acc); color: var(--bg); flex-shrink: 0;
}
.play svg { width: 14px; height: 16px; }
.play .i-pause, .is-playing .play .i-play, .play[aria-pressed="true"] .i-play { display: none; }
.is-playing .play .i-pause, .play[aria-pressed="true"] .i-pause { display: block; }
.time { font-family: var(--mono); font-size: 11px; opacity: 0.75; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* полоса прогресса: настоящий input range — работает с клавиатуры и пальцем */
.seek {
  flex-grow: 1; min-width: 0; height: 24px; margin: 0; background: transparent; cursor: pointer;
  -webkit-appearance: none; appearance: none; color: inherit;
  --p: 0%;
}
.seek::-webkit-slider-runnable-track { height: 3px; background: linear-gradient(currentColor, currentColor) 0 0 / var(--p) 100% no-repeat, color-mix(in srgb, currentColor 25%, transparent); }
.seek::-moz-range-track { height: 3px; background: color-mix(in srgb, currentColor 25%, transparent); }
.seek::-moz-range-progress { height: 3px; background: currentColor; }
.seek::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4.5px; border-radius: 50%; background: currentColor; border: 0; }
.seek::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: currentColor; border: 0; }
.seek:disabled { cursor: default; opacity: 0.5; }
.small { margin: 0; font-size: 13px; line-height: 1.5; opacity: 0.75; }

.tracks { list-style: none; margin: 0; padding: 0; }
.tracks li { border-bottom: 1px solid var(--line); }
.trk {
  width: 100%; min-height: 60px; display: flex; align-items: center; gap: 16px; padding: 12px 8px; border: 0;
  background: transparent; cursor: pointer; text-align: left; transition: background-color .2s ease;
}
.trk:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.trk[aria-current="true"] { background: color-mix(in srgb, var(--acc) 16%, transparent); }
.trk-n { width: 40px; flex-shrink: 0; font-family: var(--mono); font-size: 13px; opacity: 0.7; position: relative; }
.trk-body { flex-grow: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.trk-title { font-size: 18px; font-weight: 500; transition: font-size .2s ease; overflow-wrap: anywhere; }
.trk[aria-current="true"] .trk-title { font-size: 22px; font-weight: 600; }
.trk-feat { font-size: 13px; opacity: 0.7; }
.trk-dur { font-family: var(--mono); font-size: 13px; opacity: 0.7; font-variant-numeric: tabular-nums; }
/* играющий трек: вместо номера три полоски */
.eq { display: none; gap: 2px; align-items: flex-end; height: 12px; }
.eq i { width: 3px; background: currentColor; animation: eq 0.9s ease-in-out infinite alternate; }
.eq i:nth-child(2) { animation-delay: -0.3s; } .eq i:nth-child(3) { animation-delay: -0.6s; }
@keyframes eq { from { height: 3px; } to { height: 12px; } }
.is-playing .trk[aria-current="true"] .eq { display: inline-flex; }
.is-playing .trk[aria-current="true"] .trk-num { display: none; }
.trk.err .trk-dur::after { content: ' · нет превью'; }

.story { display: flex; flex-direction: column; gap: 18px; }
.quote { margin: 0; text-transform: none; font-size: clamp(22px, 2.6vw, 34px); line-height: 1.25; letter-spacing: -0.01em; }
.p-note { margin: 0; font-size: 15px; line-height: 1.6; opacity: 0.75; }
.credits { margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 24px; }
.credits div { padding-top: 12px; border-top: 1px solid var(--line); }
.credits dt { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; opacity: 0.7; margin-bottom: 6px; }
.credits dd { margin: 0; font-size: 17px; line-height: 1.4; }
.mood-line { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; opacity: 0.75; }
.others { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 10px; }
.other { text-decoration: none; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.other img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.other span { font-size: 11px; font-family: var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn { padding: 48px 0 88px; display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; }
.pn a { text-decoration: none; display: flex; flex-direction: column; gap: 6px; max-width: 48%; }
.pn a:last-child { text-align: right; align-items: flex-end; margin-left: auto; }
.pn small { font-family: var(--mono); font-size: 12px; opacity: 0.7; }
.pn-title { font-size: 32px; line-height: 1; overflow-wrap: break-word; }

/* ───── блог и пост ───── */
.blog-main { position: relative; z-index: 1; padding-top: 24px; padding-bottom: 96px; }
.blog-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 40px; padding-bottom: 28px; border-bottom: 2px solid var(--ink); }
.blog-h1 { margin: 0; font-family: var(--unb); font-weight: 900; font-size: clamp(56px, 11vw, 160px); line-height: 0.85; letter-spacing: -0.04em; }
.blog-desc { margin: 0; max-width: 340px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; line-height: 1.6; color: var(--mute); }
.blog .pills { padding: 20px 0 40px; }
.lead { text-decoration: none; display: flex; flex-wrap: wrap; gap: 32px; align-items: stretch; margin-bottom: 56px; background: var(--c-bg); color: var(--c-ink); }
.lead[hidden] { display: none; }
.lead img { flex: 1 1 360px; max-width: 560px; min-width: 0; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.lead-text { flex: 999 1 360px; min-width: 0; padding: 32px; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; }
.lead-k { font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; }
.lead-t { font-family: var(--unb); font-weight: 900; font-size: clamp(30px, 4vw, 60px); line-height: 0.95; letter-spacing: -0.03em; text-transform: uppercase; overflow-wrap: break-word; }
.lead-l { font-size: 17px; line-height: 1.5; color: var(--c-soft); max-width: 520px; }
.shell a.lead:hover { color: var(--c-ink); }
.shell a.lead:hover .lead-t { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; }

.post-top { position: relative; background: var(--c-bg); color: var(--c-ink); }
.post-top .deco { background: repeating-conic-gradient(from 0deg at 78% 60%, rgba(255,255,255,0.12) 0deg 1.4deg, transparent 1.4deg 9deg); -webkit-mask-image: radial-gradient(circle at 78% 60%, #000 0%, transparent 55%); mask-image: radial-gradient(circle at 78% 60%, #000 0%, transparent 55%); }
.shell .post-top a:hover { color: var(--c-ink); opacity: 0.75; }
.post-hero { position: relative; z-index: 1; padding-top: 32px; padding-bottom: 64px; display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-end; }
.post-hero-text { flex: 999 1 520px; display: flex; flex-direction: column; gap: 20px; }
.back { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; min-height: 44px; display: inline-flex; align-items: center; align-self: flex-start; text-decoration: none; }
.post-h1 { margin: 0; font-family: var(--unb); font-weight: 900; line-height: 0.92; letter-spacing: -0.04em; text-transform: uppercase; overflow-wrap: break-word; }
.post-hero img { flex: 0 1 320px; width: 320px; max-width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; transform: rotate(3deg); box-shadow: 0 30px 80px rgba(0,0,0,0.45); }
.article { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; padding: 64px var(--gut) 96px; display: flex; flex-direction: column; gap: 28px; }
.article-lead { margin: 0; font-family: var(--dms); font-style: italic; font-size: 30px; line-height: 1.3; color: var(--c-soft2); }
.article p.t { margin: 0; font-size: 19px; line-height: 1.75; }
.drop::first-letter { float: left; font-family: var(--unb); font-weight: 900; font-size: 4.2em; line-height: 0.8; padding: 6px 12px 0 0; color: var(--c-dot); }
.rcard { text-decoration: none; display: flex; gap: 18px; align-items: center; padding: 16px; background: var(--c-bg); color: var(--c-ink); }
.shell a.rcard:hover { color: var(--c-ink); }
.rcard img { width: 96px; height: 96px; object-fit: cover; display: block; flex-shrink: 0; }
.rcard-body { display: flex; flex-direction: column; gap: 6px; flex-grow: 1; min-width: 0; }
.rcard-k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; }
.rcard-t { font-size: 26px; line-height: 1; overflow-wrap: break-word; }
.rcard-go { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; white-space: nowrap; }
.fig { margin: 12px 0; display: flex; flex-direction: column; gap: 10px; }
.fig-ph { aspect-ratio: 16 / 10; background: #15141A; border: 1px dashed var(--line2); display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; color: var(--mute); }
.fig figcaption { font-family: var(--mono); font-size: 12px; color: var(--mute); }
.bq { margin: 8px 0; padding: 0; font-family: var(--unb); font-weight: 700; font-size: clamp(24px, 3vw, 36px); line-height: 1.15; letter-spacing: -0.02em; color: var(--c-quote); }
.mini { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--line2); --acc: var(--c-quote); }
.mini .play { background: var(--c-quote); color: #060608; }
.mini-body { flex-grow: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mini-t { font-size: 16px; font-weight: 500; }
.mini-s { font-size: 13px; color: var(--mute); }
.mini .seek { color: var(--c-quote); }
.post-nav { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; padding-top: 28px; margin-top: 16px; border-top: 2px solid var(--ink); }
.post-nav a { text-decoration: none; display: flex; flex-direction: column; gap: 4px; max-width: 48%; }
.post-nav a.r { text-align: right; margin-left: auto; }
.post-nav small { font-family: var(--mono); font-size: 12px; color: var(--mute); }
.post-nav span { font-size: 18px; font-weight: 600; }

.nf { position: relative; z-index: 1; padding-top: 80px; padding-bottom: 120px; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.nf h1 { margin: 0; font-family: var(--unb); font-weight: 900; font-size: clamp(80px, 20vw, 260px); line-height: 0.85; letter-spacing: -0.05em; }

/* ───── телефон ───── */
@media (max-width: 640px) {
  :root { --gut: 16px; }
  .h2 { font-size: 40px; }
  .sec { padding-top: 56px; padding-bottom: 56px; }
  .wall-wrap { padding-top: 64px; }
  .new-title { font-size: 36px; }
  .hero { gap: 40px; padding-bottom: 64px; }
  .rsec { padding: 48px 0; }
  .pn-title { font-size: 24px; }
  .bars span { width: 80px; }
  .sigil { right: -40px; width: 90px; height: 144px; }
  .article-lead { font-size: 24px; }
  .article p.t { font-size: 17px; }
  .lead-text { padding: 24px 20px; }
  .rcard img { width: 72px; height: 72px; }
  .rcard-t { font-size: 20px; }
  .rcard-go { display: none; }
}
@media (max-width: 359px) {
  .tile.big { grid-column: span 1; grid-row: span 1; }
}

@media (prefers-reduced-motion: reduce) {
  .ticker-run { animation: none; }
  .eq i { animation: none; height: 8px; }
  *, *::before, *::after { transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* ═════════ движение и интерактив ═════════ */

/* появление при прокрутке — только когда JS есть, иначе всё видно сразу */
.js [data-reveal] { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); transition-delay: calc(var(--i, 0) * 60ms); }
.js [data-reveal].in { opacity: 1; transform: none; }

/* вордмарк: буквы поднимаются по одной, хром ловит блик за курсором */
.wm-line { display: block; white-space: nowrap; }
.wm-ch { display: inline-block; }
.js .wm-ch { opacity: 0; transform: translate3d(0, 0.35em, 0) rotate(4deg); }
.js.ready .wm-ch { opacity: 1; transform: none; transition: opacity .9s ease, transform 1.1s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--i) * 55ms + 80ms); }
.chrome, .chrome-plum { --sx: 50%; }
[data-sheen] .chrome, .chrome[data-sheen] {
  background:
    linear-gradient(105deg, transparent 42%, rgba(255,255,255,.95) 50%, transparent 58%) calc(var(--sx, 50%) * 1.6 - 30%) 0 / 260% 100% no-repeat,
    linear-gradient(180deg, #FFFFFF 0%, #D9D7E4 38%, #5D5B6B 52%, #C9C7D6 64%, #FFFFFF 100%);
  -webkit-background-clip: text; background-clip: text;
}
[data-sheen] .chrome { --sx: inherit; }

/* обложка наклоняется за курсором, по ней скользит свет */
.tiltable { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s cubic-bezier(.2,.8,.2,1); transform-style: preserve-3d; }
.tiltable.tilting { transition: transform .12s linear; }
.new-cover { transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.new.tiltable { transform: none; }
.new.tiltable .new-cover { transform: perspective(900px) rotate(-2.5deg) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.new.tilting .new-cover { transition: transform .12s linear; }
.new-shine { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s ease; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.28), transparent 45%); mix-blend-mode: soft-light; }
.new.tilting .new-shine { opacity: 1; }
.new-tag { animation: tag-in 1s cubic-bezier(.16,1,.3,1) .7s both; }
@keyframes tag-in { from { opacity: 0; transform: translateX(-50%) translateY(-12px) rotate(-6deg); } }
.hero-star { transform-origin: 50% 55%; }

/* стена: под плиткой вспыхивает её цвет */
.tile-img { position: relative; }
.tile-img::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 0 var(--c); transition: box-shadow .35s ease; }
.tile:hover .tile-img::after, .tile:focus-visible .tile-img::after { box-shadow: inset 0 0 0 3px var(--c); }
.tile .dot { transition: transform .35s ease, box-shadow .35s ease; }
.tile:hover .dot { transform: scale(1.6); box-shadow: 0 0 14px var(--c); }

/* комнаты: обложка выезжает и поворачивается */
.room-card { position: relative; overflow: hidden; }
.room-card img { transition: transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .6s ease; transform-origin: 0 100%; }
.room-card:hover img { transform: scale(1.35) rotate(-4deg); box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.room-title { display: block; line-height: 1; letter-spacing: var(--d-ls); }
.room-card .fitbox { display: block; width: 100%; }

/* лента концертов */
.gig-list { list-style: none; margin: 28px 0 0; padding: 0; border-top: 1px solid var(--line2); }
.gig { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; padding: 16px 0; border-bottom: 1px solid var(--line2); }
.gig-date { font-family: var(--mono); font-size: 14px; letter-spacing: .08em; min-width: 110px; }
.gig-place { flex: 1 1 220px; display: flex; flex-direction: column; gap: 2px; font-size: 18px; }
.gig-place small { font-size: 13px; color: var(--mute); }
.gig-soon { font-family: var(--mono); font-size: 12px; color: var(--mute); letter-spacing: .1em; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sub.done input { border-color: var(--acc); }
.sub button:disabled { opacity: .6; cursor: progress; }
.sub button { transition: transform .2s ease, box-shadow .2s ease; }
.sub button:hover { box-shadow: 0 0 0 4px color-mix(in srgb, var(--acc) 30%, transparent); }
.about-text { max-width: 720px; font-size: 19px; line-height: 1.7; margin-top: 28px; }
.about-text p { margin: 0 0 1em; }

/* комната: лучи медленно вращаются, свечение и обложка «дышат», пока играет трек */
.deco-rays { inset: -20%; animation: rays 120s linear infinite; }
@keyframes rays { to { transform: rotate(360deg); } }
.deco-glow, .deco-flare { transition: opacity .8s ease, transform 1.2s ease; }
.is-playing .deco-glow, .is-playing .deco-flare { animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .65; transform: scale(1.06); } }
.cover-wrap { position: relative; z-index: 2; width: min(480px, 100%); margin: 0 auto; }
.poster-cover { transition: transform .8s ease, box-shadow .8s ease; }
.is-playing .poster-cover, .is-playing .split-cover img, .is-playing .archive-cover img { animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 40px 140px color-mix(in srgb, var(--acc) 55%, transparent); } }
.split-star, .sigil { transform-origin: 50% 50%; }
.trk { position: relative; overflow: hidden; }
.trk::before { content: ''; position: absolute; inset: 0; background: color-mix(in srgb, var(--acc) 10%, transparent); transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.trk:hover::before { transform: scaleX(1); }
.trk > * { position: relative; }
.other img { transition: transform .45s cubic-bezier(.2,.8,.2,1), filter .45s ease; }
.other:hover img { transform: translateY(-4px) rotate(-2deg); }
.pn a { transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.pn a:first-child:hover { transform: translateX(-6px); }
.pn a:last-child:hover { transform: translateX(6px); }
.btn { transition: background-color .25s ease, color .25s ease, border-color .25s ease; }
.room .btn:hover, .disc .btn:not(.btn-fill):hover { background: var(--ink); color: var(--bg); border-color: var(--ink); opacity: 1; }

/* дискография: смена релиза */
.sel.swap .sel-cover, .sel.swap .sel-title { animation: swap .55s cubic-bezier(.2,.8,.2,1); }
@keyframes swap { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.card-img { transition: outline-width .15s ease, transform .4s cubic-bezier(.2,.8,.2,1); }
.card:hover .card-img { transform: translateY(-4px); }
.card[aria-pressed="true"] .card-img { transform: none; }
.filter { flex-direction: column; gap: 12px; }
.filter .pills { padding: 0; }

/* пост */
.prose { display: flex; flex-direction: column; gap: 28px; }
.prose > p { margin: 0; font-size: 19px; line-height: 1.75; }
.prose > p:first-child::first-letter { float: left; font-family: var(--unb); font-weight: 900; font-size: 4.2em; line-height: .8; padding: 6px 12px 0 0; color: var(--c-dot); }
.prose h2 { margin: 16px 0 0; font-family: var(--unb); font-weight: 700; font-size: 28px; letter-spacing: -.02em; }
.prose h3 { margin: 8px 0 0; font-size: 22px; }
.prose ul, .prose ol { margin: 0; padding-left: 1.2em; font-size: 19px; line-height: 1.7; }
.prose a { text-decoration-thickness: 1px; text-underline-offset: 4px; }
.prose > p img { display: block; width: 100%; height: auto; }
.prose .bq p { margin: 0; }
.fig img { width: 100%; height: auto; display: block; }
.draft-note { margin: 0; padding: 12px 16px; border: 1px dashed var(--acc); font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--acc); }
.mini .time { min-width: 4.5em; text-align: right; }
.post-hero img { transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.post-hero img:hover { transform: rotate(0deg) scale(1.02); }

/* нижний плеер */
.dock {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 50; max-width: 720px; margin: 0 auto;
  background: rgba(14, 13, 18, .82); color: #EDEBF2; border: 1px solid rgba(255,255,255,.08);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  transform: translateY(140%); transition: transform .5s cubic-bezier(.16,1,.3,1);
  padding-bottom: env(safe-area-inset-bottom, 0);
  --acc: #EDEBF2; --bg: #060608;
}
.dock.on { transform: none; }
.dock[hidden] { display: none; }
.dock-bar { position: absolute; left: 0; right: 0; top: -11px; padding: 0 8px; }
.dock-seek { width: 100%; height: 22px; display: block; color: var(--dock-acc, #46E3F2); }
.dock-in { display: flex; align-items: center; gap: 10px; padding: 10px 12px; }
.dock-cover { flex-shrink: 0; width: 48px; height: 48px; display: block; }
.dock-cover img { width: 48px; height: 48px; object-fit: cover; display: block; }
.is-playing ~ .dock .dock-cover img, html.audio-on .dock-cover img { animation: spinslow 8s linear infinite; border-radius: 50%; }
@keyframes spinslow { to { transform: rotate(360deg); } }
.dock-cover img { transition: border-radius .5s ease; }
.dock-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.dock-title { font-weight: 600; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock-sub { font-size: 12px; color: #9B99A8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dock-btn { width: 40px; height: 44px; border: 0; background: none; color: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; opacity: .85; }
.dock-btn:hover { opacity: 1; }
.dock-btn svg { width: 14px; height: 14px; }
.dock-play { background: #EDEBF2; color: #060608; }
.dock-note { margin: 0; padding: 0 12px 8px 70px; font-family: var(--mono); font-size: 9px; letter-spacing: .12em; color: #6E6C7A; }
html.audio-on body { padding-bottom: 96px; }

.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 60; transform: translate(-50%, 30px); opacity: 0; pointer-events: none;
  background: #EDEBF2; color: #060608; padding: 10px 16px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em;
  transition: opacity .3s ease, transform .3s cubic-bezier(.16,1,.3,1);
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }
html.audio-on .toast { bottom: 120px; }

/* переходы между страницами: обложка «перелетает» со стены в комнату (Chrome, Safari 18+) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }
::view-transition-group(*) { animation-duration: .5s; animation-timing-function: cubic-bezier(.2,.8,.2,1); }

@media (max-width: 640px) {
  .dock { left: 8px; right: 8px; bottom: 8px; }
  .dock-time, .dock-btn[data-prev] { display: none; }
  .dock-note { padding-left: 12px; }
  .gig-date { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js .wm-ch { opacity: 1 !important; transform: none !important; }
  .deco-rays, .is-playing .deco-glow, .is-playing .deco-flare, .is-playing .poster-cover, .is-playing .split-cover img, .is-playing .archive-cover img, html.audio-on .dock-cover img, .new-tag { animation: none !important; }
  @view-transition { navigation: none; }
}

/* ═════════ главная: хайтек-слой ═════════ */

/* свет за курсором */
.glow-cursor {
  position: fixed; left: 0; top: 0; width: 600px; height: 600px; z-index: 4; pointer-events: none; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--acc) 14%, transparent) 0%, transparent 62%);
  opacity: 0; transition: opacity .6s ease; mix-blend-mode: screen;
}
.glow-cursor.on { opacity: 1; }
.room .glow-cursor { background: radial-gradient(circle, color-mix(in srgb, var(--ink) 9%, transparent) 0%, transparent 60%); }

/* 3D-звезда за вордмарком */
.hero-star3d { position: absolute; right: -6%; top: -18%; width: min(900px, 80vw); height: min(900px, 80vw); pointer-events: none; z-index: 0; }
.hero > :not(canvas) { position: relative; z-index: 1; }
.wordmark.live .wm-ch { transition: transform .35s cubic-bezier(.2,.8,.2,1) !important; transition-delay: 0s !important; }

/* кольцо обложек */
.ring-sec { position: relative; z-index: 1; padding-top: 88px; padding-bottom: 24px; }
.ring-stage { position: relative; height: clamp(360px, 42vw, 560px); overflow: hidden; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.ring-stage.grabbing { cursor: grabbing; }
.ring { list-style: none; margin: 0; padding: 0; position: absolute; left: 50%; top: 46%; width: 0; height: 0; }
.ring-item { position: absolute; left: 0; top: 0; width: var(--ring-w); --ring-w: clamp(160px, 17vw, 240px); }
.ring-item a { display: block; text-decoration: none; -webkit-user-drag: none; }
.ring-item img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; box-shadow: 0 20px 60px rgba(0,0,0,.55); pointer-events: none; -webkit-user-drag: none; transition: box-shadow .4s ease; }
.ring-item.front img { box-shadow: 0 0 0 2px var(--c), 0 30px 90px color-mix(in srgb, var(--c) 45%, transparent); }
.ring-cap { display: flex; align-items: center; gap: 8px; padding-top: 12px; font-weight: 600; font-size: 15px; opacity: 0; transform: translateY(6px); transition: opacity .3s ease, transform .3s ease; white-space: nowrap; }
.ring-cap small { margin-left: auto; font-family: var(--mono); font-size: 10px; font-weight: 400; color: var(--mute); letter-spacing: .06em; }
.ring-item.front .ring-cap, .ring-item a:focus-visible .ring-cap { opacity: 1; transform: none; }
.ring-stage::before, .ring-stage::after { content: ''; position: absolute; top: 0; bottom: 0; width: 18%; z-index: 2; pointer-events: none; }
.ring-stage::before { left: 0; background: linear-gradient(90deg, var(--bg), transparent); }
.ring-stage::after { right: 0; background: linear-gradient(-90deg, var(--bg), transparent); }
/* без движения и без JS — обычная сетка */
.ring-flat, .no-js .ring-stage { height: auto; perspective: none; overflow: visible; cursor: auto; padding: 0 var(--gut); max-width: var(--wrap); margin: 0 auto; }
.ring-flat .ring, .no-js .ring { position: static; width: auto; height: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; transform: none !important; }
.ring-flat .ring-item, .no-js .ring-item { position: static; width: auto; transform: none !important; opacity: 1 !important; }
.ring-flat .ring-cap, .no-js .ring-cap { opacity: 1; transform: none; white-space: normal; }
.ring-flat::before, .ring-flat::after, .no-js .ring-stage::before, .no-js .ring-stage::after { display: none; }

/* список комнат: строки в цвете релиза, обложка плывёт за курсором */
.index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line2); }
.index li { border-bottom: 1px solid var(--line2); }
.index-row {
  position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto auto; align-items: baseline; gap: 4px 24px;
  padding: 22px 12px; text-decoration: none; overflow: hidden; isolation: isolate;
}
.index-row::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--c-bg); transform: scaleY(0); transform-origin: 50% 100%; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.index-row:hover::before, .index-row:focus-visible::before { transform: scaleY(1); }
.shell a.index-row:hover { color: var(--c-ink); }
.index-n { font-family: var(--mono); font-size: 12px; color: var(--mute); transition: color .3s; }
.index-t { font-size: clamp(28px, 4.4vw, 64px); line-height: 1; letter-spacing: var(--d-ls); transition: transform .45s cubic-bezier(.2,.8,.2,1); overflow-wrap: anywhere; }
.index-row:hover .index-t { transform: translateX(14px); }
.index-m, .index-y { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--mute); white-space: nowrap; transition: color .3s; }
.index-row:hover .index-n, .index-row:hover .index-m, .index-row:hover .index-y { color: color-mix(in srgb, var(--c-ink) 70%, transparent); }
.index-float { position: fixed; left: 0; top: 0; width: 240px; height: 240px; z-index: 30; pointer-events: none; opacity: 0; transition: opacity .25s ease; }
.index-float.on { opacity: 1; }
.index-float img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; box-shadow: 0 30px 80px rgba(0,0,0,.6); transition: opacity .2s ease; }
.index-float img.on { opacity: 1; }
.sec-head .lede { margin: 0; max-width: 420px; }

/* подписка */
.subsec { display: flex; flex-wrap: wrap; gap: 32px 64px; align-items: flex-end; border-top: 1px solid var(--line); }
.sub-text { flex: 999 1 420px; min-width: 0; }
.sub-h { margin: 0; font-family: var(--unb); font-weight: 900; font-size: clamp(40px, 6vw, 88px); line-height: .9; letter-spacing: -.04em; }
.sub label { color: var(--mute); font-family: var(--onest); font-size: 15px; letter-spacing: 0; }
.sub-tg { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--mute); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; align-self: flex-start; }
.shell .sub-tg:hover { color: var(--acc); }

/* дискография: превью и ссылки */
.sel-play { gap: 10px; }
.sel-play .play-ico { width: 12px; height: 14px; display: inline-flex; }
.sel-play svg { width: 12px; height: 14px; }
.sel-play .i-pause, .sel-play[aria-pressed="true"] .i-play { display: none; }
.sel-play[aria-pressed="true"] .i-pause { display: block; }
.sel-links { display: contents; }
.card-img { position: relative; overflow: hidden; }
.card-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%); transform: translateX(-120%); transition: transform .7s ease; pointer-events: none; }
.card:hover .card-img::after { transform: translateX(120%); }

/* блоки поста */
.prose cite { display: block; margin-top: 10px; font-family: var(--mono); font-size: 12px; font-style: normal; letter-spacing: .08em; color: var(--mute); font-weight: 400; }
.video-box { position: relative; aspect-ratio: 16 / 9; background: #000; }
.video-box iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.post-btn { margin: 0; }
.other img { box-shadow: 0 0 0 0 var(--c); }
.other:hover img { box-shadow: 0 0 0 2px var(--c); }

/* ═════════ комнаты: изюминки ═════════ */
.room-hero { isolation: isolate; }
.room-hero > canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.has-canvas > img { opacity: 0; }
div[data-cover] > canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.archive-cover > canvas, .archive-cover.has-canvas > canvas { inset: 18px; width: calc(100% - 36px); height: calc(100% - 36px); }
.split-cover, .archive-cover, .cover-wrap { position: relative; }

/* буквы названия */
[data-title] .w { display: inline-block; white-space: nowrap; }
[data-title] .ch { display: inline-block; will-change: transform; }
.rise .ch { animation: rise .9s cubic-bezier(.16,1,.3,1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(.45em) rotate(6deg); filter: blur(6px); } }

/* Sky Limit — коллаж */
.has-collage > img { opacity: 0; }
.collage { position: absolute; inset: 0; z-index: 1; }
.collage span { position: absolute; display: block; box-shadow: 0 6px 18px rgba(30,25,18,.35); outline: 1px solid rgba(255,255,255,.25); outline-offset: -1px; will-change: transform; }
.fx-sky .tape { z-index: 3; }

/* Say It Right — подчёркивание, когда всё сказано правильно */
.fx-say [data-title] { position: relative; }
.fx-say [data-title]::after { content: ''; position: absolute; left: 0; bottom: -.08em; height: .06em; width: 100%; background: var(--acc); transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.fx-say [data-title].said::after { transform: scaleX(1); }

/* Luvsome — лампа и сердцебиение */
.lamp { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(circle at var(--lx, 40%) var(--ly, 40%), color-mix(in srgb, var(--acc) calc(30% + var(--b, 0) * 25%), transparent) 0%, transparent calc(38% + var(--b, 0) * 6%)); mix-blend-mode: screen; }
.fx-luv .split-cover img { transform: scale(var(--beat, 1)); }

/* Get Hiiiiiii — вспышка и засвет */
.fx-gethi .room-hero { cursor: crosshair; }
.flash { position: fixed; inset: 0; z-index: 80; pointer-events: none; background: #FFF6E8; opacity: 0; }
.flash.go { animation: flash .7s ease-out; }
@keyframes flash { 0% { opacity: 1; } 100% { opacity: 0; } }
.afterimage { position: absolute; z-index: 79; pointer-events: none; object-fit: cover; mix-blend-mode: screen; filter: invert(1) hue-rotate(160deg) saturate(2) blur(2px); animation: afterimage 1.8s ease-out forwards; }
@keyframes afterimage { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.12); } }

/* Foreigner — лучи под курсором */
.fx-foreigner .deco-rays { animation: none; }

/* Всему своё место — прожектор */
.spot { position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(ellipse 22% 36% at var(--sx, 50%) var(--sy, 60%), transparent 0%, transparent 35%, rgba(2,7,13, calc(.78 * var(--flick, 1))) 100%); }
.fx-vsemu .room-hero::after { content: ''; position: absolute; left: 10%; right: 10%; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--acc), transparent); opacity: .6; }

/* G0 — крен на скорости */
.fx-g0 .split-cover img { transform: skewX(var(--skew, 0deg)); transition: transform .1s linear; }

/* Made 4 Songs — сканер и ксерокс */
.scan-in img:not(.xerox) { animation: scan 1.6s cubic-bezier(.6,0,.3,1) .2s both; }
@keyframes scan { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.scan-in::after { content: ''; position: absolute; left: 18px; right: 18px; height: 3px; top: 18px; background: #fff; box-shadow: 0 0 24px 6px rgba(255,255,255,.8); z-index: 3; animation: scanline 1.6s cubic-bezier(.6,0,.3,1) .2s both; pointer-events: none; }
@keyframes scanline { 0% { transform: translateY(0); opacity: 1; } 95% { opacity: 1; } 100% { transform: translateY(calc(var(--h, 480px) - 6px)); opacity: 0; } }
.archive-cover.scan-in { --h: calc(100% - 36px); }
.xerox { position: absolute; left: 18px; top: 18px; width: calc(100% - 36px); height: calc(100% - 36px); object-fit: cover; z-index: 2; pointer-events: none; filter: grayscale(1) contrast(4.5) brightness(1.15); clip-path: inset(calc(var(--y, 50%) - 7%) 0 calc(100% - var(--y, 50%) - 7%) 0); opacity: 0; transition: opacity .25s ease; }
.xerox.on { opacity: 1; }
.fx-made4 .sigil path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 2.4s ease .6s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* Nomad — призраки */
.ghost { position: absolute; left: 0; top: 0; z-index: 0; mix-blend-mode: screen; filter: saturate(1.6) hue-rotate(10deg) blur(1px); pointer-events: none; }
.poster .ghost { width: 100%; aspect-ratio: 1; object-fit: cover; }
.fx-nomad .poster-cover { z-index: 1; }

/* Enemy Run — дрожь обложки */
.fx-enemy .poster-cover { transform: translate(var(--shake-x, 0), var(--shake-y, 0)); }

/* Time Files 2 — фокус */
.fx-tf2 .archive-cover img, .fx-tf2 [data-title] { filter: blur(var(--focus, 0px)); }
.fx-tf2 [data-timecode] { font-variant-numeric: tabular-nums; }

/* Mind on Froze — шум, дрожь и заморозка */
.fx-mind .archive-cover img { transform: translate(var(--jx, 0), var(--jy, 0)); filter: blur(calc((1 - var(--frozen, 0)) * .6px)) brightness(calc(1 + var(--frozen, 0) * .08)); }
.fx-mind .archive-cover::after { content: ''; position: absolute; inset: 18px; z-index: 3; pointer-events: none; opacity: var(--frozen, 0); box-shadow: inset 0 0 70px rgba(197,254,254,.75), inset 0 0 6px rgba(255,255,255,.9); }
.fx-mind .archive-cover { cursor: crosshair; }

/* The Prelude — смаз от скорости */
.fx-prelude .poster-cover { filter: blur(var(--smear, 0px)); transform: translateX(var(--shift, 0)) scaleX(var(--stretch, 1)); transition: none; }

@media (max-width: 640px) {
  .index-row { grid-template-columns: 32px minmax(0, 1fr); padding: 18px 4px; }
  .index-m { display: none; }
  .index-y { grid-column: 2; }
  .ring-stage { height: 360px; }
  .ring-item { --ring-w: 150px; }
  .hero-star3d { right: -30%; top: -8%; width: 120vw; height: 120vw; opacity: .7; }
}
.fx-vsemu .poster > .kicker, .fx-vsemu .poster .fitbox, .fx-vsemu .poster .meta-line, .fx-vsemu .poster .btns { position: relative; z-index: 4; }
.fx-tf2 [data-title] { filter: blur(calc(var(--focus, 0px) * .25)); }
.fx-say [data-title] { display: inline-block; }

/* ═════════ компоновка плотнее ═════════ */
.sec { padding-top: 48px; padding-bottom: 48px; }
.sec-head { margin-bottom: 24px; }
.rsec { padding: 44px 0; gap: 24px 56px; }

/* главная: первый экран ровно в окно (шапка + герой + бегущая строка) */
.hero { min-height: calc(100svh - 88px - 54px); padding-top: 8px; padding-bottom: 32px; align-items: center; }
.new-col { flex: 1 1 360px; max-width: 460px; display: flex; flex-direction: column; gap: 14px; }
.new-col .new { max-width: none; flex: none; }
.new-play { display: flex; align-items: center; gap: 12px; }
.new-play .play { background: var(--acc); color: var(--bg); }
.new-play .seek { color: var(--ink); }
.new-play .time { min-width: 4.6em; text-align: right; }
.ring-sec { padding-top: 40px; padding-bottom: 8px; }
.ring-head { position: relative; z-index: 3; margin-bottom: 0; }
.ring-stage { height: clamp(320px, 34vw, 460px); margin-top: -24px; }
.index-row { padding: 14px 10px; gap: 2px 20px; }
.index-t { font-size: clamp(24px, 3vw, 44px); }
@media (min-width: 1100px) {
  .index { display: grid; grid-template-rows: repeat(var(--rows), auto); grid-auto-flow: column; column-gap: 48px; }
  .index-m { display: none; }
  .index-row { grid-template-columns: 36px minmax(0, 1fr) auto; }
}
.subsec { padding-top: 48px; }
.about-text { margin-top: 16px; }

/* подвал компактнее */
.ftr { margin-top: 24px; }
.ftr .wrap { padding-top: 20px; }
.outline { font-size: 9.5vw; margin-top: 8px; }

/* дискография: шапка закреплена слева, сетка справа */
.disc-main { padding-top: 8px; padding-bottom: 64px; }
.card-meta { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.filter { margin-bottom: 24px; padding: 14px 0; }
@media (min-width: 1000px) {
  .disc-layout { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 48px; align-items: start; }
  .sel { position: sticky; top: 16px; flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 20px; padding-bottom: 0; }
  .sel-cover { flex: none; width: 100%; max-width: 380px; }
  .sel-cover img { box-shadow: 0 24px 70px rgba(0,0,0,.45); }
  .sel-text { flex: none; gap: 12px; width: 100%; }
  .sel .fit { --fs-max: 72px !important; }
  .disc .filter { border-top: 0; padding-top: 0; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 24px 16px; }
}

/* комната: факты в шапке вместо блока «Кредиты» */
.hfacts { margin: 0; display: flex; flex-wrap: wrap; gap: 10px 28px; font-family: var(--mono); }
.hfacts div { min-width: 0; }
.hfacts dt { font-size: 10px; letter-spacing: .12em; opacity: .65; margin-bottom: 3px; }
.hfacts dd { margin: 0; font-size: 13px; letter-spacing: .02em; }
.hfacts .wide { flex-basis: 100%; }
.split-text, .archive-text { gap: 20px; }
.split { padding-bottom: 48px; gap: 40px; }
.archive { padding-bottom: 48px; }
.archive-body { gap: 40px; padding-top: 28px; }
.poster { padding-bottom: 40px; }
.poster-info { position: relative; z-index: 4; max-width: 760px; margin: 28px auto 0; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.poster-info .hfacts { justify-content: center; text-align: center; }
.poster-info .btns { justify-content: center; margin: 0; }

/* плеер сингла в шапке */
.hplayer { display: flex; align-items: center; gap: 14px; padding: 12px 16px 12px 12px; background: color-mix(in srgb, var(--ink) 8%, transparent); max-width: 520px; width: 100%; }
.hp-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hp-t { font-weight: 600; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-t small { font-weight: 400; font-size: 12px; opacity: .7; margin-left: 6px; }
.hplayer .time { min-width: 4.6em; text-align: right; }
.hp-note { margin: -10px 0 0; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; opacity: .55; text-transform: uppercase; }
.poster-info .hplayer { text-align: left; }
.poster-info .hp-note { margin-top: -10px; }

/* треки альбома: «сейчас играет» закреплено, длинный список — две колонки */
.side-stick { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 16px; }
.rsec-tracks .rsec-side { align-self: stretch; }
@media (min-width: 1100px) {
  .tracks.cols { display: grid; grid-template-rows: repeat(var(--rows), auto); grid-auto-flow: column; column-gap: 32px; }
  .tracks.cols .trk { min-height: 52px; padding: 8px 6px; }
  .tracks.cols .trk-title { font-size: 16px; }
  .tracks.cols .trk[aria-current="true"] .trk-title { font-size: 18px; }
}
.rsec-flat { display: block; }
.rsec-flat > .rh2 { margin-bottom: 24px; }

/* «Дальше»: соседние комнаты крупно + лента всех */
.nextsec { padding-bottom: 56px; }
.next-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.next-card { display: flex; align-items: center; gap: 20px; padding: 16px; background: var(--c-bg); color: var(--c-ink); text-decoration: none; min-width: 0; outline: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.room a.next-card:hover { opacity: 1; transform: translateY(-4px); }
.next-card img { width: clamp(84px, 9vw, 132px); aspect-ratio: 1; object-fit: cover; flex-shrink: 0; box-shadow: 0 14px 40px rgba(0,0,0,.35); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.next-card:hover img { transform: rotate(-3deg) scale(1.05); }
.next-card.next { flex-direction: row-reverse; text-align: right; }
.next-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.next-text small { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; opacity: .7; }
.next-t { font-size: clamp(22px, 2.6vw, 36px); line-height: 1; letter-spacing: var(--d-ls); overflow-wrap: anywhere; }
.strip-head { display: flex; justify-content: space-between; align-items: center; margin-top: 28px; }
.strip { display: flex; gap: 12px; overflow-x: auto; padding: 8px 0 12px; scroll-snap-type: x proximity; scrollbar-width: thin; }
.strip .other { flex: 0 0 112px; scroll-snap-align: start; }
.strip:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

@media (max-width: 640px) {
  .hero { min-height: 0; padding-top: 0; }
  .new-col { max-width: none; }
  .ring-stage { margin-top: 0; }
  .next-pair { grid-template-columns: 1fr; }
  .next-card.next { flex-direction: row; text-align: left; }
  .hfacts { gap: 8px 20px; }
  .rsec { padding: 36px 0; }
  .sec { padding-top: 40px; padding-bottom: 40px; }
}

/* ═════════ этап 2: вся комната в идее обложки ═════════ */
.page-fx { position: fixed; inset: 0; z-index: 6; pointer-events: none; }
.page-fx > canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.trk-tc { display: none; }
@keyframes in-fade { from { opacity: 0; } }

/* Sky Limit — скрапбук: плеер-вырезка на скотче, выпрямляется, когда играет; разделители — скотч */
.fx-sky .hplayer { position: relative; background: #EFE4CB; box-shadow: 0 10px 28px rgba(30,25,18,.22); rotate: -1.6deg; transition: rotate .6s cubic-bezier(.2,.8,.2,1); }
.fx-sky .hplayer::before, .fx-sky .hplayer::after { content: ''; position: absolute; width: 84px; height: 22px; background: rgba(240,230,205,.88); top: -11px; }
.fx-sky .hplayer::before { left: 14%; rotate: -5deg; }
.fx-sky .hplayer::after { right: 10%; rotate: 4deg; }
.is-playing.fx-sky .hplayer { rotate: 0deg; }
.is-playing.fx-sky .collage span { animation: piece 2.6s ease-in-out infinite; }
.fx-sky .collage span:nth-child(odd) { animation-delay: -1.3s; }
@keyframes piece { 50% { scale: 1.035; } }
.fx-sky .rsec, .fx-sky .nextsec { border-top: 0; position: relative; }
.fx-sky .nextsec::before { content: ''; position: absolute; top: 0; left: 8%; width: 140px; height: 26px; background: rgba(240,230,205,.88); rotate: -3deg; box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.fx-sky .next-card { rotate: -1deg; box-shadow: 0 14px 30px rgba(30,25,18,.2); outline: 0; }
.fx-sky .next-card.next { rotate: 1.2deg; }

/* Say It Right — субтитры: плеер как строка субтитра, красная линия растёт по ходу трека */
.fx-say .hplayer { background: rgba(20,20,20,.88); color: #F4F2EC; --ink: #F4F2EC; }
.fx-say .hp-t { font-family: var(--dms); font-weight: 400; font-size: 22px; position: relative; }
.fx-say .hplayer .seek { opacity: .35; }
.fx-say .hp-body { position: relative; }
.fx-say .hp-body::after { content: ''; position: absolute; left: 0; bottom: -4px; height: 3px; width: calc(var(--prog, 0) * 100%); background: var(--acc); transition: width .25s linear; }

/* Luvsome — лампа на всю комнату; плеер светится красным неоном в ритме сердца */
.fx-luv .lamp { position: fixed; z-index: 0; }
.fx-luv .hplayer { background: rgba(28,23,23,.6); border: 1px solid var(--acc); box-shadow: 0 0 calc(10px + var(--b, 0) * 26px) color-mix(in srgb, var(--acc) 60%, transparent), inset 0 0 18px color-mix(in srgb, var(--acc) 22%, transparent); }
.fx-luv .hp-t { text-shadow: 0 0 calc(var(--b, 0) * 14px) var(--acc); }
.fx-luv div[data-cover] { animation: lights-on 2.2s ease both; }
@keyframes lights-on { 0% { opacity: 0; filter: brightness(0); } 40% { opacity: 1; filter: brightness(.3); } 46% { filter: brightness(.05); } 55% { filter: brightness(.8); } 100% { filter: none; } }

/* Get Hiiiiiii — плёнка: плеер-кадр с перфорацией; засветы по краям, пока играет трек */
.fx-gethi .hplayer, .fx-gethi .poster-info .hplayer { position: relative; background: #121212; padding-top: 20px; padding-bottom: 20px; }
.fx-gethi .hplayer::before, .fx-gethi .hplayer::after { content: ''; position: absolute; left: 0; right: 0; height: 8px; background: repeating-linear-gradient(90deg, transparent 0 6px, rgba(255,231,168,.85) 6px 14px, transparent 14px 22px); }
.fx-gethi .hplayer::before { top: 5px; } .fx-gethi .hplayer::after { bottom: 5px; }
.page-fx.leaks { opacity: 0; transition: opacity 1.2s ease; background: radial-gradient(60% 50% at 100% 0%, rgba(255,122,46,.35), transparent 70%), radial-gradient(50% 60% at 0% 100%, rgba(255,60,140,.28), transparent 70%); mix-blend-mode: screen; }
html.audio-on .page-fx.leaks { opacity: 1; animation: leak 3.2s ease-in-out infinite; }
@keyframes leak { 0%, 100% { filter: hue-rotate(0deg); opacity: .7; } 30% { opacity: 1; } 55% { opacity: .45; filter: hue-rotate(25deg); } 70% { opacity: .95; } }

/* Foreigner — 18 треков раскрыты крылом: строки идут по дуге, играющая раскрывается */
.fx-foreigner .page-fx { z-index: 2; }
@media (min-width: 1100px) {
  .fx-foreigner .tracks.cols li { transform: translateX(calc(sin(var(--u) * 180deg) * (var(--col) * 2 - 1) * 26px)) rotate(calc((var(--u) - .5) * (var(--col) * 2 - 1) * -4deg)); transform-origin: 50% 50%; }
}
.fx-foreigner .trk[aria-current="true"] { background: linear-gradient(90deg, color-mix(in srgb, var(--acc) 26%, transparent), transparent); box-shadow: inset 2px 0 0 var(--acc); }
.fx-foreigner .room-hero div[data-cover] { animation: descend 1.6s cubic-bezier(.16,1,.3,1) both; }
@keyframes descend { from { translate: 0 -80px; opacity: 0; filter: blur(8px) brightness(1.6); } }

/* Всему своё место — сцена: плеер — табличка на полу, сверху на неё падает луч, пока играет трек */
.fx-vsemu .poster-info .hplayer { position: relative; background: linear-gradient(180deg, rgba(70,227,242,.05), rgba(70,227,242,.12)); border-bottom: 1px solid var(--acc); }
.fx-vsemu .hplayer::before { content: ''; position: absolute; left: 50%; bottom: 100%; width: 140%; height: 260px; translate: -50% 0; pointer-events: none; background: conic-gradient(from 160deg at 50% 0%, transparent 0deg, rgba(70,227,242,.16) 12deg, rgba(214,249,252,.22) 20deg, rgba(70,227,242,.16) 28deg, transparent 40deg); transform-origin: 50% 0; opacity: 0; transition: opacity .8s ease; -webkit-mask-image: linear-gradient(transparent, #000); mask-image: linear-gradient(transparent, #000); }
html.audio-on .fx-vsemu .hplayer::before { opacity: 1; }

/* CAPITAL — 19 треков как звёзды флага; играющая горит; разделители — две белые черты */
.fx-capital .tracks.cols, .fx-capital .tracks { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); grid-template-rows: none; grid-auto-flow: row; gap: 18px 12px; }
.fx-capital .tracks li { border: 0; }
.fx-capital .trk { flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 10px 4px; min-height: 0; background: none !important; }
.fx-capital .trk::before { display: none; }
.fx-capital .trk-n { width: 64px; height: 62px; display: flex; align-items: center; justify-content: center; font-size: 13px; opacity: 1; color: var(--bg);
  background: color-mix(in srgb, var(--ink) 55%, transparent); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); transition: background-color .3s ease, transform .4s cubic-bezier(.2,.8,.2,1); }
.fx-capital .trk:hover .trk-n { background: var(--ink); transform: rotate(20deg) scale(1.08); }
.fx-capital .trk[aria-current="true"] .trk-n { background: var(--ink); filter: drop-shadow(0 0 10px #fff); }
.is-playing.fx-capital .trk[aria-current="true"] .trk-n { animation: twinkle 1.2s ease-in-out infinite; }
@keyframes twinkle { 50% { transform: rotate(36deg) scale(1.12); } }
.fx-capital .trk-title { font-size: 14px !important; font-weight: 600; }
.fx-capital .trk-feat { font-size: 11px; }
.fx-capital .trk-dur { font-size: 11px; }
.fx-capital .eq { color: var(--bg); }
.fx-capital .rsec, .fx-capital .nextsec { border-top: 0; position: relative; }
.fx-capital .rsec::before { content: ''; position: absolute; left: 0; top: 0; width: 120px; height: 24px; background: linear-gradient(currentColor 0 8px, transparent 8px 16px, currentColor 16px 24px); }
.fx-capital .room-hero div[data-cover] { animation: raise 1.4s cubic-bezier(.16,1,.3,1) both; }
@keyframes raise { from { translate: 0 90px; opacity: 0; } }

/* Сумка — под водой: плеер покачивается, края экрана в бирюзовой дымке, при входе всё всплывает */
.fx-sumka .hplayer { animation: bob 4s ease-in-out infinite; background: rgba(63,210,220,.1); border: 1px solid rgba(63,210,220,.3); }
@keyframes bob { 50% { translate: 0 -5px; rotate: .4deg; } }
.page.fx-sumka::after { content: ''; position: fixed; inset: 0; z-index: 5; pointer-events: none; box-shadow: inset 0 0 120px 40px rgba(6,41,47,.8); }
.fx-sumka .room-hero div[data-cover], .fx-sumka [data-title] { animation: surface 1.8s ease both; }
@keyframes surface { from { translate: 0 40px; filter: blur(14px); opacity: 0; } }

/* G0 — отсчёт на входе, прогресс трека на спидометре */
.page-fx.countdown { display: flex; align-items: center; justify-content: center; z-index: 90; font-family: var(--bsd); font-weight: 900; font-size: 34vmin; color: var(--ink); background: color-mix(in srgb, var(--bg) 70%, transparent); }
.page-fx.countdown.tick { animation: tick .26s ease-out; }
@keyframes tick { from { transform: scale(1.4); opacity: 0; } }
.gauge { width: 64px; height: 36px; flex-shrink: 0; overflow: visible; }
.gauge .g-track, .gauge .g-fill { fill: none; stroke-width: 6; stroke-linecap: round; }
.gauge .g-track { stroke: color-mix(in srgb, var(--ink) 25%, transparent); }
.gauge .g-fill { stroke: var(--acc); stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--prog, 0)); transition: stroke-dashoffset .25s linear; }
.gauge .g-needle { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; transform-origin: 50px 50px; transform: rotate(calc(-90deg + var(--prog, 0) * 180deg)); transition: transform .25s linear; }
.fx-g0 .hplayer { transform: skewX(calc(var(--skew, 0deg) * -.5)); }

/* Made 4 Songs — 4 трека как 4 документа в папке; открытый сканируется, играющий «печатается» */
.fx-made4 .tracks { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.fx-made4 .tracks li { border: 1.5px solid var(--ink); position: relative; overflow: hidden; background: color-mix(in srgb, var(--ink) 4%, var(--bg)); }
.fx-made4 .tracks li::before { content: attr(data-doc); display: block; padding: 10px 14px 0; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; opacity: .6; }
.fx-made4 .trk { flex-wrap: wrap; align-items: flex-start; min-height: 150px; padding: 14px; }
.fx-made4 .trk-body { flex-basis: 100%; order: 3; margin-top: auto; }
.fx-made4 .trk-title { font-family: var(--bsd); font-weight: 900; font-size: 26px; text-transform: uppercase; }
.fx-made4 .trk[aria-current="true"] { background: var(--ink); color: var(--bg); }
.fx-made4 .trk[aria-current="true"] .trk-title { font-size: 26px; }
.fx-made4 li.scanning::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: #fff; box-shadow: 0 0 18px 5px rgba(255,255,255,.85); animation: scandoc .9s ease-in both; pointer-events: none; }
@keyframes scandoc { to { transform: translateY(160px); opacity: 0; } }
.is-playing.fx-made4 .trk[aria-current="true"] { background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.08) 0 2px, transparent 2px 7px); background-size: 100% 14px; animation: print 0.6s linear infinite; }
@keyframes print { to { background-position: 0 14px; } }

/* Nomad — треки проступают следами; играющий оставляет призрачный след */
.fx-nomad .tracks [data-reveal] { transform: translate3d(-24px, 0, 0); filter: blur(6px); transition: opacity 1.2s ease, transform 1.2s ease, filter 1.2s ease; transition-delay: calc(var(--i, 0) * 120ms); }
.fx-nomad .tracks [data-reveal].in { filter: none; transform: none; }
.fx-nomad .trk[aria-current="true"] .trk-title { text-shadow: -8px 0 6px color-mix(in srgb, var(--acc) 70%, transparent), -18px 0 10px color-mix(in srgb, var(--acc) 35%, transparent); }
.fx-nomad .room-hero div[data-cover] { animation: emerge 2.6s ease both; }
@keyframes emerge { from { opacity: 0; filter: blur(16px) brightness(.4); } }

/* ON ! ME — строка трека глючит при наведении; вход — срыв кадра */
.fx-onme .hplayer:hover .hp-t, .fx-onme .trk:hover .trk-title { animation: glitch .35s steps(2) infinite; }
@keyframes glitch { 0% { text-shadow: 3px 0 #709AB9, -3px 0 #CEF9FB; translate: 1px 0; } 50% { text-shadow: -4px 0 #709AB9, 2px 0 #CEF9FB; translate: -2px 0; } 100% { text-shadow: 0 0 transparent; translate: 0 0; } }
.fx-onme .room-hero div[data-cover] { animation: glitch-in .9s steps(6) both; }
@keyframes glitch-in { 0% { clip-path: inset(40% 0 52% 0); translate: -30px 0; } 20% { clip-path: inset(10% 0 70% 0); translate: 20px 0; } 40% { clip-path: inset(60% 0 10% 0); translate: -10px 0; } 60% { clip-path: inset(0 0 40% 0); } 80% { clip-path: inset(30% 0 0 0); translate: 6px 0; } 100% { clip-path: inset(0); translate: 0 0; } }

/* Enemy Run — вбегает слева */
.fx-enemy .room-hero div[data-cover] { animation: run-in 1s cubic-bezier(.2,.9,.2,1) both; }
@keyframes run-in { from { translate: -110vw 0; filter: blur(10px); } 70% { filter: blur(2px); } }
.fx-enemy .hplayer { transition: none; }

/* Time Files 2 — картотека: у карточки трека таймкод; пока играет трек, остальные в расфокусе */
.fx-tf2 .trk-tc { display: inline; font-family: var(--mono); font-size: 10px; letter-spacing: .1em; opacity: .55; margin-left: 10px; white-space: nowrap; }
.fx-tf2 .tracks li { border-bottom-style: dashed; }
.fx-tf2 .trk { transition: filter .5s ease, opacity .5s ease; }
.is-playing.fx-tf2 .trk[aria-current="false"]:not(:hover) { filter: blur(1.6px); opacity: .55; }

/* Mind on Froze — пока играет трек, по краям страницы нарастает иней; на паузе тает */
.page.fx-mind::after { content: ''; position: fixed; inset: 0; z-index: 5; pointer-events: none; opacity: 0; transition: opacity 6s ease;
  box-shadow: inset 0 0 140px 30px rgba(197,254,254,.35), inset 0 0 30px rgba(255,255,255,.4);
  background: radial-gradient(120% 90% at 50% 50%, transparent 62%, rgba(197,254,254,.18) 85%, rgba(255,255,255,.3) 100%); }
.is-playing.fx-mind::after, html.audio-on .fx-mind::after { opacity: 1; transition-duration: 8s; }
.fx-mind .room-hero div[data-cover] { animation: thaw 2.4s ease both; }
@keyframes thaw { from { filter: brightness(3) saturate(0) blur(4px); } }

/* The Prelude — хронология «что было дальше»; вход — смаз */
.fx-prelude .room-hero div[data-cover] { animation: smear-in 1.4s cubic-bezier(.16,1,.3,1) both; }
@keyframes smear-in { from { scale: 2.4 1; filter: blur(18px); opacity: 0; } }
.timeline { list-style: none; margin: 0; padding: 18px 0 8px; display: flex; gap: 0; overflow-x: auto; position: relative; scroll-snap-type: x proximity; }
.timeline li { flex: 0 0 132px; position: relative; scroll-snap-align: start; padding-top: 22px; }
.timeline li::before { content: ''; position: absolute; top: 6px; left: 0; right: 0; height: 1px; background: color-mix(in srgb, var(--ink) 30%, transparent); }
.timeline li::after { content: ''; position: absolute; top: 2px; left: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--c); }
.timeline li.here::after { width: 13px; height: 13px; top: 0; left: 6px; box-shadow: 0 0 0 4px color-mix(in srgb, var(--c) 30%, transparent); }
.timeline a { display: flex; flex-direction: column; gap: 6px; padding-right: 14px; text-decoration: none; }
.timeline img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; transition: transform .4s cubic-bezier(.2,.8,.2,1); }
.timeline a:hover img { transform: translateY(-4px); }
.timeline li.here img { outline: 2px solid var(--acc); outline-offset: 3px; }
.tl-y { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; opacity: .65; }
.tl-t { font-size: 13px; font-weight: 600; line-height: 1.2; }

@media (prefers-reduced-motion: reduce) {
  .page-fx { display: none !important; }
  .fx-sky .hplayer, .fx-sumka .hplayer { animation: none; rotate: 0deg; }
}
@media (max-width: 640px) {
  .fx-made4 .tracks { grid-template-columns: 1fr 1fr; gap: 10px; }
  .fx-made4 .trk { min-height: 120px; padding: 10px; }
  .fx-made4 .trk-title, .fx-made4 .trk[aria-current="true"] .trk-title { font-size: 20px; }
  .fx-capital .tracks { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 6px; }
  .fx-capital .trk-n { width: 52px; height: 50px; }
}

/* ═════════ этап 3: комнаты фитов ═════════ */
div[data-cover] > svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; overflow: visible; }

/* hunnidracks */
.racks { margin: -6px 0 0; font-family: var(--mono); font-size: 13px; letter-spacing: .3em; color: var(--acc); text-shadow: 0 0 12px color-mix(in srgb, var(--acc) 60%, transparent); font-variant-numeric: tabular-nums; position: relative; z-index: 2; }

/* Я не знаю какого быть мужчиной: туман и огонёк */
.fog { position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(120% 80% at 50% 40%, rgba(222,220,212,.55), rgba(189,187,178,.85));
  -webkit-mask-image: radial-gradient(circle var(--fr, 190px) at var(--fx, 50%) var(--fy, 50%), transparent 0%, transparent 35%, #000 100%);
          mask-image: radial-gradient(circle var(--fr, 190px) at var(--fx, 50%) var(--fy, 50%), transparent 0%, transparent 35%, #000 100%); }
.orb { position: absolute; left: 0; top: 0; z-index: 4; width: 28px; height: 28px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #FFF8D8 0%, #F5D45A 35%, rgba(233,185,44,0) 70%); box-shadow: 0 0 40px 16px rgba(245,212,90,.45); }
.room-feat-ya-ne-znayu .split-text { position: relative; z-index: 5; }

/* j lo: рамы окна и отражение */
.mullions { position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(90deg, transparent 32.8%, rgba(10,8,4,.85) 32.8% 34%, transparent 34% 66%, rgba(10,8,4,.85) 66% 67.2%, transparent 67.2%),
              linear-gradient(0deg, transparent 72%, rgba(10,8,4,.7) 72% 73.2%, transparent 73.2%); box-shadow: inset 0 0 0 10px rgba(10,8,4,.9); }
.reflect { position: absolute; inset: 0; z-index: 4; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(105deg, transparent calc(var(--rx, 50%) - 18%), rgba(255,250,220,.18) var(--rx, 50%), transparent calc(var(--rx, 50%) + 12%)); }

/* Антагонист: автограф */
.autograph path { fill: none; stroke: #E8352B; stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 2.2s ease .5s forwards; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px rgba(232,53,43,.6)); }

/* Т.И.Т и «Выбора не было»: уголки фотоальбома, выбор */
.pc { position: absolute; width: 26px; height: 26px; z-index: 3; background: #1A1A1A; }
.pc-1 { left: -6px; top: -6px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.pc-2 { right: -6px; top: -6px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.pc-3 { left: -6px; bottom: -6px; clip-path: polygon(0 0, 0 100%, 100% 100%); }
.pc-4 { right: -6px; bottom: -6px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.room-feat-tit .split-cover img, .room-feat-ne-bylo-vybora .split-cover img { padding: 14px; background: #fff; box-shadow: 0 16px 40px rgba(0,0,0,.18); }
.choice { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.choice-q { font-family: var(--mono); font-size: 13px; letter-spacing: .08em; margin-right: 6px; }
.choice .btn { min-width: 72px; justify-content: center; }
.choice.made .btn { background: var(--acc); color: #fff; border-color: var(--acc); }

/* Mantra: кольцо из слов */
.mantra-ring { inset: -14% !important; width: 128% !important; height: 128% !important; animation: mantra 30s linear infinite, breath 4s ease-in-out infinite; }
.mantra-ring text { font-family: var(--unb); font-weight: 700; font-size: 9px; letter-spacing: 3px; fill: var(--ink); opacity: .8; }
@keyframes mantra { to { rotate: 360deg; } }
@keyframes breath { 50% { scale: 1.04; } }
.page-fx.strobe { background: #fff; opacity: 0; z-index: 7; }

/* Лёд: неон с двух сторон */
.room-feat-lyod .split-cover img { box-shadow: calc(-14px - var(--nx, 0) * 20px) 0 50px -6px rgba(224,35,58,.75), calc(14px - var(--nx, 0) * 20px) 0 50px -6px rgba(42,91,255,.75); }
.room-feat-lyod .split-cover { cursor: crosshair; }

/* Тупо Мир: маркер */
.marker path { fill: none; stroke: #D7262E; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; vector-effect: non-scaling-stroke; }
.marker.draw path { animation: draw 1.4s ease forwards; }
.marker.draw path:nth-child(2) { animation-delay: .5s; }
.marker.draw path:nth-child(3) { animation-delay: 1s; }

/* Most Wanted: рваный плакат, штамп, прицел */
.has-torn > img { opacity: 0; }
.torn { position: absolute; left: 18px; top: 18px; right: 18px; bottom: 18px; z-index: 1; }
.torn span { position: absolute; left: 0; width: 100%; display: block; transition: transform .6s cubic-bezier(.2,.8,.2,1); transition-delay: calc(var(--i) * 40ms);
  clip-path: polygon(0 4%, 6% 0, 12% 5%, 20% 1%, 28% 6%, 36% 0, 44% 4%, 52% 1%, 60% 6%, 68% 2%, 76% 5%, 84% 0, 92% 4%, 100% 1%, 100% 96%, 94% 100%, 86% 95%, 78% 99%, 70% 94%, 62% 100%, 54% 96%, 46% 99%, 38% 94%, 30% 100%, 22% 95%, 14% 99%, 6% 95%, 0 100%); }
.archive-cover:hover .torn span { transform: translateX(calc(var(--d) * 14px)) rotate(calc(var(--d) * .6deg)); }
.stamp { position: absolute; z-index: 4; right: 6%; top: 10%; padding: 6px 12px; border: 3px solid #B3261E; color: #B3261E; font-family: var(--bsd); font-weight: 900; font-size: clamp(16px, 2vw, 26px); letter-spacing: .06em; rotate: -12deg; mix-blend-mode: multiply; animation: stamp .5s cubic-bezier(.3,1.6,.5,1) 1s both; pointer-events: none; }
@keyframes stamp { from { scale: 2.4; opacity: 0; } }
.reticle { position: fixed; left: 0; top: 0; width: 44px; height: 44px; z-index: 40; pointer-events: none; opacity: 0; transition: opacity .2s; border: 1.5px solid #B3261E; border-radius: 50%;
  background: linear-gradient(#B3261E, #B3261E) 50% 0 / 1.5px 30% no-repeat, linear-gradient(#B3261E, #B3261E) 50% 100% / 1.5px 30% no-repeat, linear-gradient(#B3261E, #B3261E) 0 50% / 30% 1.5px no-repeat, linear-gradient(#B3261E, #B3261E) 100% 50% / 30% 1.5px no-repeat; }
.reticle.on { opacity: 1; }
.room-feat-most-wanted .room-hero { cursor: none; }

/* Hangover: двоится и покачивается */
.dbl { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 1; object-fit: cover; mix-blend-mode: screen; opacity: .5; pointer-events: none; z-index: 1; }
.dbl-red { filter: sepia(1) saturate(6) hue-rotate(-40deg); }
.dbl-blue { filter: sepia(1) saturate(6) hue-rotate(180deg); }
.room-feat-hangover .poster-cover { position: relative; z-index: 2; mix-blend-mode: normal; }
.room-feat-hangover .cover-wrap { rotate: var(--sway, 0deg); }
.room-feat-hangover [data-title] { text-shadow: var(--dbl, 3px) 0 rgba(232,48,74,.7), calc(var(--dbl, 3px) * -1) 0 rgba(60,120,255,.6); }

/* Secured: неоновое мерцание названия */
.room-feat-secured [data-title] { color: var(--acc); text-shadow: 0 0 22px rgba(227,20,43,.7); animation: neon 4s steps(1) infinite; }
@keyframes neon { 0%, 100% { opacity: 1; } 42% { opacity: .35; } 44% { opacity: 1; } 46% { opacity: .5; } 48% { opacity: 1; } }

/* Когда тебя нет: выцветание без тебя */
.room-feat-kogda-tebya-net .split-cover img { filter: grayscale(var(--gone, 0)) brightness(calc(1 - var(--gone, 0) * .25)) blur(calc(var(--gone, 0) * 1.5px)); }
.room-feat-kogda-tebya-net [data-title] { opacity: calc(1 - var(--gone, 0) * .45); }

/* No Problems: наклейки */
.stk { position: absolute; z-index: 4; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; transition: transform .5s cubic-bezier(.3,1.5,.5,1), box-shadow .3s; box-shadow: 0 4px 10px rgba(0,0,0,.25); }
.stk.peel { cursor: grabbing; transition: box-shadow .3s; box-shadow: 0 18px 30px rgba(0,0,0,.35); }
.stk-np { padding: 8px 12px; background: #fff; color: #111; font-family: var(--bsd); font-weight: 900; font-size: clamp(18px, 2.4vw, 32px); line-height: .9; rotate: -6deg; }
.stk-r { width: 52px; height: 52px; border-radius: 50%; background: #D9242B; color: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--bsd); font-weight: 900; font-size: 30px; rotate: 10deg; }
.stk-a { padding: 6px 10px; background: #111; color: #fff; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; rotate: 3deg; }

@media (prefers-reduced-motion: reduce) {
  .mantra-ring { animation: none; }
  .room-feat-secured [data-title] { animation: none; }
}
.room-feat-j-lo .poster-title.short { margin-bottom: 16px; }
/* Foreigner: робот с крыльями — живой фон всей шапки, название и кнопки поверх */
.room-foreigner .poster { min-height: calc(100svh - 88px); display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding-top: 16px; padding-bottom: 36px; cursor: pointer; }
.room-foreigner .poster > *:not(canvas) { position: relative; z-index: 2; }
.room-foreigner .poster .fitbox { width: 100%; }
.room-foreigner .poster-title.short { margin-bottom: 0; }
.room-foreigner .cover-wrap { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.room-foreigner .deco-rays { display: none; }
.wings-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .9s ease; }
.has-wings-bg .wings-bg { opacity: 1; }
.room-foreigner .poster-info { text-shadow: 0 0 12px rgba(40,6,44,.9); }
.room-foreigner .poster-info .btn { background: rgba(40,6,44,.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@media (max-width: 640px) { .room-foreigner .poster { min-height: 92svh; } }

/* ═════════ живые обложки ═════════ */
div[data-cover] > canvas.live { z-index: 3; }
.archive-cover > canvas.live { inset: 18px; width: calc(100% - 36px); height: calc(100% - 36px); }
.collage span.lifted { z-index: 5; box-shadow: 0 18px 36px rgba(30,25,18,.4); cursor: grabbing !important; scale: 1.04; }

/* Say It Right: субтитр поверх обложки */
.say-sub { position: absolute; left: 6%; right: 6%; bottom: 7%; z-index: 4; text-align: center; padding: 6px 10px; background: rgba(10,10,10,.82); color: #F4F2EC; font-family: var(--dms); font-size: clamp(16px, 2vw, 24px); min-height: 1.6em; pointer-events: none; }
.say-caret { display: inline-block; width: 2px; height: 1em; margin-left: 3px; background: currentColor; vertical-align: -0.12em; animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.say-sub.right .say-t { color: #fff; box-shadow: inset 0 -3px 0 var(--acc); }
.fx-say [data-cover] { cursor: text; }

/* Всему своё место: пазл */
.has-puzzle > img { opacity: 0; }
.puzzle { position: absolute; inset: 0; z-index: 3; }
.puzzle span { position: absolute; display: block; transition: left .45s cubic-bezier(.2,.8,.2,1), top .45s cubic-bezier(.2,.8,.2,1), box-shadow .3s, filter .3s; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(70,227,242,.35); }
.puzzle span.home { box-shadow: none; }
.puzzle span.sel { box-shadow: inset 0 0 0 2px var(--acc), 0 0 22px rgba(70,227,242,.6); z-index: 2; filter: brightness(1.25); }
.puzzle.solved { animation: solved 1s ease; }
@keyframes solved { 30% { filter: brightness(1.8) drop-shadow(0 0 30px rgba(70,227,242,.8)); } }

/* CAPITAL: звезда за курсором и штампы */
.cap-star, .cap-stamp { position: fixed; left: 0; top: 0; width: 36px; height: 36px; z-index: 40; pointer-events: none; background: #fff;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); opacity: 0; transition: opacity .2s; }
.cap-star.on { opacity: 1; }
.room-capital .room-hero { cursor: none; }
.cap-stamp { position: absolute; width: 60px; height: 60px; opacity: .9; animation: stampfade 3.5s ease forwards; }
@keyframes stampfade { 0% { transform: scale(1.8); opacity: 0; } 10% { transform: scale(1); opacity: .95; } 80% { opacity: .9; } 100% { opacity: 0; } }

/* Made 4 Songs: ксерокс — каждая копия контрастнее и грязнее */
.xerox-light { position: absolute; left: 18px; right: 18px; top: 18px; height: 22px; z-index: 5; pointer-events: none; opacity: 0;
  background: linear-gradient(transparent, rgba(190,255,190,.9), transparent); box-shadow: 0 0 40px 10px rgba(190,255,190,.5); }
.xerox-light.run { animation: xlight 1.1s linear; }
@keyframes xlight { 0% { opacity: 1; transform: translateY(0); } 95% { opacity: 1; } 100% { opacity: 0; transform: translateY(calc(var(--h, 480px) - 40px)); } }
.fx-made4 .archive-cover > img:not(.xerox) { filter: grayscale(calc(var(--gen, 0) * .25)) contrast(calc(1 + var(--gen, 0) * .7)) brightness(calc(1 + var(--gen, 0) * .06)); transition: filter .4s; }
.fx-made4 .archive-cover.copied::before { content: ''; position: absolute; inset: 18px; z-index: 2; pointer-events: none; opacity: calc(var(--gen, 0) * .12);
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.6) 0 1px, transparent 1px 3px), radial-gradient(circle at 20% 30%, rgba(0,0,0,.5), transparent 20%); mix-blend-mode: multiply; }
.fx-made4 .archive-cover { cursor: copy; user-select: none; -webkit-user-select: none; }

/* Enemy Run: обложку поймали */
.runner { cursor: crosshair; }
.runner.caught { animation: scream 1.2s cubic-bezier(.2,.9,.2,1); }
@keyframes scream { 0% { scale: 1; } 8% { scale: 1.22; filter: brightness(1.6) contrast(1.3); } 12%, 20%, 28% { rotate: -2deg; } 16%, 24%, 32% { rotate: 2deg; } 40% { scale: 1.12; rotate: 0deg; filter: none; } 100% { scale: 1; } }

/* Time Files 2: 15 «файлов» */
.has-files > img { opacity: 0; }
.files { position: absolute; left: 18px; top: 18px; right: 18px; bottom: 18px; z-index: 3; }
.file { position: absolute; top: 0; bottom: 0; padding: 0; border: 0; cursor: pointer; background-repeat: no-repeat; transition: transform .35s cubic-bezier(.2,.8,.2,1), filter .35s; filter: grayscale(.4) brightness(.85); }
.file:hover, .file:focus-visible { transform: translateY(-14px); filter: none; z-index: 2; box-shadow: 0 10px 20px rgba(0,0,0,.5); }
.file.now { filter: none; box-shadow: inset 0 -3px 0 var(--ink); }
.file-tip { position: absolute; left: 18px; right: 18px; bottom: -6px; z-index: 4; font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-align: center; opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .2s; pointer-events: none; }
.file-tip.on { opacity: 1; transform: none; }

/* Most Wanted: дырки от выстрелов и отдача */
.hole { position: absolute; z-index: 4; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #0b0b0b 0 32%, #3a3a3a 36%, transparent 40%), conic-gradient(from 0deg, transparent 0 10%, rgba(0,0,0,.5) 11% 12%, transparent 13% 35%, rgba(0,0,0,.5) 36% 37%, transparent 38% 60%, rgba(0,0,0,.5) 61% 62%, transparent 63% 85%, rgba(0,0,0,.5) 86% 87%, transparent 88%);
  transform: scale(1.8); animation: hole .25s ease-out both; }
@keyframes hole { from { transform: scale(3); opacity: 0; } }
.room-hero.recoil { animation: recoil .25s ease-out; }
@keyframes recoil { 30% { translate: 0 -5px; } }

/* Secured: сон */
.room-feat-secured .poster-cover { filter: brightness(calc(1 - var(--sleep, 0) * .55)); transition: filter .3s; }
.room-feat-secured [data-title] { opacity: calc(1 - var(--sleep, 0) * .6); }

/* Т.И.Т / Тупо Мир: по обложке можно рисовать */
.drawable { cursor: crosshair; touch-action: none; }

/* No Problems: новые наклейки */
.stk-star { width: 46px; height: 46px; background: #FFD84A; color: #111; display: flex; align-items: center; justify-content: center; font-size: 26px; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.stk-vd { padding: 6px 10px; background: #0E1E3A; color: #9CC2F2; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; rotate: -4deg; }
.stk-y { padding: 4px 8px; background: #fff; color: #D9242B; font-family: var(--bsd); font-weight: 900; font-size: 20px; rotate: 8deg; border: 2px solid #D9242B; }
.room-capital .room-hero a, .room-capital .room-hero button, .room-capital .room-hero input,
.room-feat-most-wanted .room-hero a, .room-feat-most-wanted .room-hero button, .room-feat-most-wanted .room-hero input { cursor: pointer; }
@media (max-width: 640px) {
  .room-feat-mantra .cover-wrap { width: min(480px, 74vw); }
  .room-feat-mantra .mantra-ring { inset: -12% !important; width: 124% !important; height: 124% !important; }
}