:root {
  --ground: #B8AFA6;
  --bg: #EDE8E1;
  --surface: #E4DED6;
  --ink: #1B1B1D;
  --muted: #8C877F;
  --faint: #B5AFA6;
  --line: rgba(27, 27, 29, .09);
  --radius: 22px;
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--ground);
  color: var(--ink);
  font: 15px/1.45 var(--font);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
[hidden] { display: none !important; }

/* ───── каркас: светлый «лист» как на референсе ───── */
.sheet {
  min-height: 100dvh;
  background: var(--bg);
}
@media (min-width: 900px) {
  body { padding: 20px; }
  .sheet { min-height: calc(100dvh - 40px); border-radius: 28px; overflow: hidden; }
}
#app {
  max-width: 1120px;
  margin: 0 auto;
  padding: max(18px, env(safe-area-inset-top)) 20px max(32px, env(safe-area-inset-bottom));
}

.top { display: flex; align-items: center; justify-content: space-between; height: 44px; }
.close { width: 40px; height: 40px; margin-left: -8px; display: grid; place-items: center; border-radius: 50%; transition: background .2s; }
.close svg { width: 20px; height: 20px; }
.close:active { background: var(--line); }

/* ───── большой тонкий заголовок с курсором ───── */
.ask {
  margin: 8vh 0 7vh;
  text-align: center;
  font-weight: 300;
  font-size: clamp(40px, 9vw, 84px);
  letter-spacing: -.045em;
  line-height: 1;
  color: var(--faint);
}
/* место под две строки, чтобы длинные фразы не толкали всё, что ниже */
.ask.is-typing { min-height: 2em; display: flex; align-items: center; justify-content: center; text-wrap: balance; }
.ask.is-typing .ask-text::after {
  content: ""; display: inline-block; width: 2px; height: .85em; margin-left: .06em; vertical-align: -.06em;
  background: var(--ink); animation: caret 1s steps(1) infinite;
}
@keyframes caret { 50% { opacity: 0; } }

.label { margin: 0 0 14px; font-size: 13px; font-weight: 600; letter-spacing: -.01em; }
.muted { color: var(--muted); }

/* ───── блок «сегодня» ───── */
.today {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 12px;
  margin-bottom: 44px;
}
.hint { margin: 0; font-size: clamp(22px, 3.4vw, 30px); line-height: 1.18; letter-spacing: -.025em; font-weight: 400; text-wrap: pretty; }
.dist { font-size: clamp(48px, 9vw, 72px); font-weight: 300; letter-spacing: -.05em; line-height: .95; font-variant-numeric: tabular-nums; }
.small { font-size: 12px; color: var(--muted); }
.error { font-size: 14px; line-height: 1.35; color: #9A4B3C; max-width: 320px; text-wrap: balance; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 22px;
  border-radius: 999px;
  background: var(--ink); color: var(--bg);
  font-weight: 500; letter-spacing: -.01em;
  transition: transform .2s var(--ease), opacity .2s;
}
.btn:active { transform: scale(.97); }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }

/* ───── карточки мест: горизонтальная лента с разной высотой ───── */
.cards {
  display: flex; align-items: flex-start; gap: 20px;
  overflow-x: auto;
  margin: 0 -20px; padding: 4px 20px 18px;
  scrollbar-width: none;
}
.cards::-webkit-scrollbar { display: none; }
/* одинаковые круглые пластинки зигзагом: чётные ниже и заходят под соседей */
.cards { --size: min(62vw, 240px); }
.card { flex: 0 0 auto; width: var(--size); text-align: center; }
.card + .card { margin-left: calc(var(--size) * -.12 - 20px); }
.card:nth-child(even) { margin-top: calc(var(--size) * .7); }
/* виниловая пластинка: чёрный диск с дорожками, обложка на «яблоке» в центре */
.vinyl {
  position: relative; aspect-ratio: 1; border-radius: 50%; overflow: hidden;
  background:
    radial-gradient(circle, transparent 60%, rgba(255, 255, 255, .06) 60.5%, transparent 61.5%),
    repeating-radial-gradient(circle, #111 0 1.2px, #1d1d1d 1.6px 2.6px),
    #141414;
  box-shadow: 0 18px 36px -18px rgba(20, 15, 10, .55);
}
.vinyl::after { /* блик */
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from 20deg, transparent 0 12%, rgba(255, 255, 255, .13) 16%, transparent 22% 58%, rgba(255, 255, 255, .09) 63%, transparent 70%);
}
.vinyl-label { position: absolute; inset: 32%; border-radius: 50%; overflow: hidden; background: var(--surface); transition: transform .8s var(--ease); }
.vinyl-label::after { /* отверстие */
  content: ""; position: absolute; left: 50%; top: 50%; width: 9%; height: 9%; transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--bg); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35);
}
.vinyl-label img { width: 100%; height: 100%; object-fit: cover; transition: filter .6s var(--ease); }
.is-locked .vinyl-label img { filter: blur(8px) saturate(.7); transform: scale(1.3); }
.is-later .vinyl-label img { filter: blur(10px) grayscale(1); }
.is-locked .vinyl-label::after { display: none; }
.vinyl-lock { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255, 255, 255, .95); filter: drop-shadow(0 1px 6px rgba(0, 0, 0, .35)); }
.vinyl-lock svg { width: 22%; max-width: 22px; min-width: 14px; }
.card-name { margin: 12px 0 0; font-size: 12px; font-weight: 500; }
.card-meta { margin: 1px 0 0; font-size: 12px; color: var(--muted); }
@media (hover: hover) {
  .card:not(.is-locked):hover .vinyl-label { transform: rotate(40deg); }
}


/* ───── вход ───── */
.login { min-height: calc(100dvh - 90px); display: grid; align-content: center; justify-items: center; gap: 10px; }
.login form { width: min(520px, 100%); display: grid; gap: 4px; }
.field {
  width: 100%;
  border: 0; outline: 0; background: transparent;
  text-align: center;
  font: 300 clamp(34px, 8vw, 58px)/1.15 var(--font);
  letter-spacing: -.045em;
  color: var(--ink);
  caret-color: var(--ink);
  padding: 6px 0;
}
.field::placeholder { color: var(--faint); }
.login .btn { margin-top: 26px; justify-self: center; }
.login .error { min-height: 20px; text-align: center; justify-self: center; }
.shake { animation: shake .4s; }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }

/* ───── проигрыватель ───── */
.player { display: grid; gap: 32px; margin-top: 24px; }
@media (min-width: 860px) { .player { grid-template-columns: 1.05fr 1fr; align-items: center; gap: 56px; margin-top: 48px; } }

.deck {
  position: relative;
  width: 100%; max-width: 520px; justify-self: center;
  aspect-ratio: 1;
  border-radius: 28px;
  background: linear-gradient(145deg, #E9E3DB, #DAD3CA);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 30px 60px -30px rgba(40, 30, 20, .35);
}
.platter {
  position: absolute; left: 7%; top: 9%;
  width: 78%; aspect-ratio: 1;
  border-radius: 50%;
  background: #CFC7BD;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .12);
}
.disc {
  position: absolute; inset: 2.5%;
  border-radius: 50%;
  background:
    radial-gradient(circle, transparent 36%, rgba(255, 255, 255, .05) 36.5%, transparent 37%),
    repeating-radial-gradient(circle, #111 0 1.2px, #1c1c1c 1.6px 2.6px),
    #141414;
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .5);
  animation: spin 1.8s linear infinite;
  animation-play-state: paused;
}
.disc::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 20deg, transparent 0 12%, rgba(255, 255, 255, .12) 16%, transparent 22% 58%, rgba(255, 255, 255, .08) 63%, transparent 70%);
}
.disc-label {
  position: absolute; inset: 32%;
  border-radius: 50%; overflow: hidden;
  background: var(--surface);
}
.disc-label img { width: 100%; height: 100%; object-fit: cover; }
.disc-label::after { content: ""; position: absolute; left: 50%; top: 50%; width: 7%; height: 7%; transform: translate(-50%, -50%); border-radius: 50%; background: #CFC7BD; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4); }
.disc.is-empty { background: repeating-radial-gradient(circle, #d6cfc6 0 1.2px, #cdc5bb 1.6px 2.6px); box-shadow: none; }
.disc.is-empty .disc-label { background: #E4DED6; }
@keyframes spin { to { transform: rotate(360deg); } }
.deck.is-playing .disc { animation-play-state: running; }

.arm {
  position: absolute; right: 9%; top: 8%;
  width: 7%; height: 62%;
  transform-origin: 50% 7%;
  transform: rotate(-4deg);
  transition: transform .9s var(--ease);
  pointer-events: none;
}
.arm::before { /* ось */
  content: ""; position: absolute; left: 50%; top: 7%; width: 150%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fbfaf8, #b9b1a7); box-shadow: 0 4px 10px rgba(0, 0, 0, .18);
}
.arm-rod { position: absolute; left: 50%; top: 7%; bottom: 10%; width: 9%; transform: translateX(-50%); border-radius: 4px; background: linear-gradient(90deg, #bdb5ab, #f6f3ef, #b3aba1); }
.arm-head { position: absolute; left: 50%; bottom: 0; width: 70%; height: 13%; transform: translateX(-80%) rotate(18deg); border-radius: 4px; background: #1B1B1D; }
.deck.is-playing .arm { transform: rotate(22deg); }

.deck-btn {
  position: absolute; right: 6%; bottom: 5%;
  width: 17%; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ink); color: var(--bg);
  box-shadow: 0 10px 20px -8px rgba(0, 0, 0, .5);
  transition: transform .2s var(--ease);
}
.deck-btn:active { transform: scale(.94); }
.deck-btn svg { width: 34%; height: 34%; }

.track-kicker { margin: 0 0 8px; font-size: 12px; color: var(--muted); }
.track-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.letter-btn {
  flex: 0 0 auto; width: 58px; height: 58px; margin-top: -4px;
  display: grid; place-items: center;
  border-radius: 50%; background: var(--surface);
  box-shadow: 0 10px 22px -14px rgba(40, 30, 20, .5);
  transition: transform .25s var(--ease);
  animation: letterNudge 3.2s 1.2s ease-in-out infinite;
}
.letter-btn svg { width: 40px; height: 30px; }
.letter-btn:active { transform: scale(.92); }
@keyframes letterNudge { 0%, 86%, 100% { rotate: 0deg; } 90% { rotate: -9deg; } 94% { rotate: 8deg; } 97% { rotate: -4deg; } }
.pc-layer { position: fixed; top: 0; left: 0; right: 0; height: 100vh; height: 100lvh; z-index: 70; }
.track-title { margin: 0; font-size: clamp(34px, 5.4vw, 56px); font-weight: 600; letter-spacing: -.045em; line-height: 1; text-wrap: balance; }
.track-artist { margin: 8px 0 0; font-size: clamp(18px, 2.4vw, 22px); color: var(--muted); letter-spacing: -.02em; }
.progress { margin-top: 26px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.bar { position: relative; height: 18px; cursor: pointer; }
.bar::before, .bar i { content: ""; position: absolute; left: 0; top: 50%; height: 2px; transform: translateY(-50%); border-radius: 2px; }
.bar::before { right: 0; background: var(--line); }
.bar i { width: 0; background: var(--ink); }

.shelf { margin-top: 56px; }
.sleeves { display: flex; gap: 14px; overflow-x: auto; margin: 0 -20px; padding: 6px 20px 12px; scrollbar-width: none; }
.sleeves::-webkit-scrollbar { display: none; }
.sleeve { flex: 0 0 auto; width: 84px; text-align: center; }
.sleeve .vinyl { box-shadow: 0 10px 20px -12px rgba(20, 15, 10, .5); }
.sleeve.is-current .vinyl { box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--ink); }
.sleeve-name, .sleeve-meta { margin: 0; font-size: 11px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sleeve-name { margin-top: 8px; font-weight: 500; }
.sleeve-meta { color: var(--muted); }

.rules { min-height: calc(100dvh - 60px); display: grid; align-content: center; justify-items: center; gap: 36px; max-width: 480px; margin: 0 auto; text-align: center; }
.rules-head { display: grid; gap: 12px; }
.rules-title { margin: 0; font-weight: 300; font-size: clamp(40px, 10vw, 64px); letter-spacing: -.045em; line-height: 1; animation: rise .6s var(--ease) both; opacity: 0; transform: translateY(10px); }
.rules-lead { margin: 0; font-size: 19px; color: var(--muted); letter-spacing: -.015em; animation: rise .6s .12s var(--ease) both; opacity: 0; transform: translateY(10px); }
.rules-text { display: grid; gap: 16px; }
.rules-text p { margin: 0; font-size: 18px; line-height: 1.4; letter-spacing: -.015em; text-wrap: balance; animation: rise .6s var(--ease) both; opacity: 0; transform: translateY(10px); }
.rules-text p:nth-child(1) { animation-delay: .3s; }
.rules-text p:nth-child(2) { animation-delay: .42s; }
.rules-text p:nth-child(3) { animation-delay: .54s; }
.rules-text p:nth-child(4) { animation-delay: .66s; }
.rules .btn { animation: rise .6s .85s var(--ease) both; opacity: 0; transform: translateY(10px); }
.empty { text-align: center; margin: 12vh auto; max-width: 420px; }

/* Safari на iPhone рисует страницу под своими прозрачными панелями —
   поэтому экран открытия тянем на «большой» вьюпорт и блокируем прокрутку под ним */
html.is-locked, html.is-locked body { overflow: hidden; overscroll-behavior: none; }
@keyframes fade { from { opacity: 0; } }
@keyframes rise { to { opacity: 1; transform: none; } }

/* ───── открытие новой пластинки ───── */
.reveal {
  /* тема по умолчанию; у каждой пластинки своя — ниже */
  --rv-bg: var(--bg);
  --rv-ink: var(--ink);
  --rv-muted: var(--muted);
  --rv-btn: var(--ink);
  --rv-btn-ink: var(--bg);
  --rv-glow: .3;
  position: fixed; z-index: 60;
  top: 0; left: 0; right: 0; height: 100vh; height: 100lvh;
  display: grid; place-items: center; align-content: center; gap: 12px;
  padding: 24px;
  background: var(--rv-bg); color: var(--rv-ink);
  text-align: center;
  overflow: hidden; isolation: isolate;
  animation: fade .5s var(--ease);
}
/* мягкое свечение самой обложки + зерно, чтобы фон не был плоским */
.rv-bg { position: absolute; inset: -15%; z-index: -1; pointer-events: none; }
.rv-bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(70px) saturate(1.3); opacity: var(--rv-glow); animation: drift 16s ease-in-out infinite alternate; }
.rv-bg::after {
  content: ""; position: absolute; inset: 0; opacity: .22; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes drift { to { transform: scale(1.12) translate(3%, -2%); } }

.rv-stage { position: relative; width: min(62vw, 300px); aspect-ratio: 1; margin: 0 auto 30px; translate: -16% 0; animation: stageIn .9s var(--ease) both; }
.rv-sleeve, .rv-disc { position: absolute; inset: 0; }
.rv-sleeve { z-index: 2; border-radius: 10px; overflow: hidden; background: var(--surface); box-shadow: 0 30px 60px -24px rgba(30, 20, 10, .5); }
.rv-sleeve img { width: 100%; height: 100%; object-fit: cover; }
.rv-disc {
  z-index: 1; border-radius: 50%; inset: 3%;
  background: repeating-radial-gradient(circle, #0b0b0b 0 1.2px, #1c1c1c 1.6px 2.6px);
  box-shadow: 0 20px 40px -18px rgba(0, 0, 0, .5);
  animation: discOut 1.3s .7s var(--ease) both, spin 2.2s 1.9s linear infinite;
}
.rv-disc .disc-label { inset: 33%; }
@keyframes stageIn { from { opacity: 0; transform: translateY(30px) scale(.94); } }
@keyframes discOut { from { translate: 0 0; } to { translate: 42% 0; } }
.reveal h2 { margin: 0; font-size: clamp(38px, 8vw, 60px); font-weight: 600; letter-spacing: -.045em; line-height: 1; text-wrap: balance; animation: rise .6s 1.5s var(--ease) both; }
.rv-place { margin: 0 0 22px; font-size: 17px; color: var(--rv-muted); animation: rise .6s 1.6s var(--ease) both; }
.reveal .btn { background: var(--rv-btn); color: var(--rv-btn-ink); animation: rise .6s 1.8s var(--ease) both; }

/* ───── кнопки экрана открытия и открытка ───── */
@font-face { font-family: 'Caveat'; src: url('assets/fonts/caveat-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; font-display: block; }
@font-face { font-family: 'Caveat'; src: url('assets/fonts/caveat-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+20AC, U+2122; font-display: block; }
.rv-actions { display: grid; gap: 10px; justify-items: center; }
.env {
  position: absolute; z-index: 3; left: -10%; bottom: -12%; width: 46%;
  filter: drop-shadow(0 10px 14px rgba(30, 20, 10, .18));
  rotate: -7deg;
  animation: envIn .8s 1.7s var(--ease) both, envHop 3.4s 2.8s ease-in-out infinite;
}
.env svg { display: block; width: 100%; overflow: visible; }
.env-flap, .env-flap-open { transform-box: fill-box; }
.env-letter rect, .env-letter path, .env-flap-open { overflow: visible; }
.env-flap { transform-origin: 50% 0; transition: transform .28s ease-in; }
.env-flap-open { transform-origin: 50% 100%; transform: scaleY(0); transition: transform .3s .26s ease-out; }
.env-letter { opacity: 0; transition: transform .6s .5s var(--ease), opacity .01s .45s; }
.env.is-open { animation: none; }
.env.is-open .env-flap { transform: scaleY(0); }
.env.is-open .env-flap-open { transform: scaleY(1); }
.env.is-open .env-letter { opacity: 1; transform: translateY(-40px); }
@keyframes envIn { from { opacity: 0; transform: translateY(40px) scale(.7); } }
@keyframes envHop {
  0%, 64%, 100% { transform: translateY(0) rotate(0); }
  72% { transform: translateY(-10px) rotate(-2.5deg); }
  80% { transform: translateY(0) rotate(0); }
  86% { transform: translateY(-4px) rotate(1.5deg); }
  92% { transform: translateY(0) rotate(0); }
}

.pc {
  position: absolute; inset: 0; z-index: 5;
  display: grid; place-items: center; align-content: center; gap: 26px;
  padding: 24px;
  background: rgba(24, 18, 12, .5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  animation: fade .35s var(--ease) both;
}
.pc-card {
  width: min(88vw, 420px); max-height: 68vh; overflow: auto;
  padding: 22px 22px 30px;
  color: #2B241C; text-align: left;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .28 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"),
    #FBF5E8;
  border-radius: 3px;
  box-shadow: 0 40px 70px -28px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(90, 70, 40, .08);
  rotate: -2deg;
  transform-origin: 50% 0;
  animation: unfold .9s .05s var(--ease) both;
}
@keyframes unfold { from { opacity: 0; transform: perspective(900px) rotateX(-80deg) translateY(24px); } }
.pc-photo { width: 88%; margin: 0 auto 20px; padding: 8px 8px 28px; background: #fff; rotate: 3deg; box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .35); }
.pc-photo img { width: 100%; display: block; }
.pc-text { margin: 0; font-family: 'Caveat', 'Segoe Print', cursive; font-weight: 500; font-size: 29px; line-height: 1.15; white-space: pre-line; overflow-wrap: anywhere; }
.pc .btn { background: #FBF5E8; color: #1B1B1D; animation: rise .5s .5s var(--ease) both; }

/* ───── фоны экрана открытия: у каждой темы свой рисунок и своё движение ───── */
@font-face { font-family: 'Unifraktur'; src: url('assets/fonts/unifraktur-maguntia.woff2') format('woff2'); font-display: block; }
.rv-deco { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.rv-pattern { position: absolute; inset: 0; animation: fade 1.2s var(--ease) both; }

/* Sweater Weather — пасмурное небо и рисованные облака в духе гравюры, плывут с разной скоростью */
.reveal[data-theme="clouds"] {
  --rv-bg: #D3D7DC;
  --rv-ink: #14171A; --rv-muted: #4F5761;
  --rv-btn: #14171A; --rv-btn-ink: #EEF0F2;
  --rv-glow: 0;
}
.rv-cloud-defs { position: absolute; }
.rv-cloud {
  position: absolute; left: 0; top: var(--top); width: var(--size); overflow: visible;
  opacity: var(--op);
  animation: cloudMove var(--dur) linear infinite;
  animation-delay: var(--delay);
}
.c-fill { fill: #E8EAED; } /* стили рисунка облака: селектор без предка — он внутри <symbol> */
.c-line, .c-echo { fill: none; stroke: #23272C; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: url(#rough); }
.c-line { stroke-width: 2.2; }
.c-echo { stroke-width: 1.3; }
@keyframes cloudMove { from { transform: translateX(-75vw); } to { transform: translateX(110vw); } }

/* Don't Dream It's Over — ретро-солнце из красных лучей, медленно вращается */
.reveal[data-theme="single"] {
  --rv-bg:
    repeating-linear-gradient(0deg, transparent 0 25px, rgba(110, 80, 50, .05) 25px 26px),
    #F5EDE0;
  --rv-ink: #1B1B1D; --rv-muted: #9A2A33;
  --rv-btn: #C8102E; --rv-btn-ink: #FFF6EE;
  --rv-glow: .08;
}
.rv-rays {
  position: absolute; left: 50%; top: 37%; width: 240vmax; aspect-ratio: 1; translate: -50% -50%;
  background: repeating-conic-gradient(rgba(200, 16, 46, .12) 0 4.5deg, transparent 4.5deg 15deg);
  -webkit-mask: radial-gradient(circle, #000 0 9%, transparent 26%);
          mask: radial-gradient(circle, #000 0 9%, transparent 26%);
  animation: fade 1.4s var(--ease) both, raysSpin 120s linear infinite;
}
@keyframes raysSpin { to { rotate: 360deg; } }

/* Creep — кремовая бумага и растр, красные пятна краски медленно плавают */
.reveal[data-theme="print"] {
  --rv-bg:
    radial-gradient(circle at 1px 1px, rgba(20, 10, 5, .13) 1px, transparent 1.6px) 0 0 / 9px 9px,
    #EFE7D6;
  --rv-ink: #141110; --rv-muted: #7C2A20;
  --rv-btn: #141110; --rv-btn-ink: #EFE7D6;
  --rv-glow: .18;
}
.reveal[data-theme="print"] .rv-blob {
  position: absolute; border-radius: 50%; filter: blur(34px);
  background: rgba(198, 43, 30, .5);
}
.reveal[data-theme="print"] .rv-blob:nth-child(1) { width: 95vw; height: 70vw; right: -35vw; bottom: -10vh; animation: wander1 9s ease-in-out infinite alternate; }
.reveal[data-theme="print"] .rv-blob:nth-child(2) { width: 75vw; height: 60vw; left: -30vw; top: -8vh; opacity: .75; animation: wander2 11s ease-in-out infinite alternate; }
.reveal[data-theme="print"] .rv-blob:nth-child(3) { width: 55vw; height: 45vw; left: 60vw; top: 30vh; opacity: .45; animation: wander3 13s ease-in-out infinite alternate; }
@keyframes wander1 { 33% { transform: translate(-30vw, -18vh) scale(1.2); } 66% { transform: translate(-10vw, -35vh) scale(.9); } to { transform: translate(-45vw, -8vh) scale(1.1); } }
@keyframes wander2 { 33% { transform: translate(35vw, 20vh) scale(.85); } 66% { transform: translate(15vw, 42vh) scale(1.25); } to { transform: translate(50vw, 10vh) scale(1); } }
@keyframes wander3 { 50% { transform: translate(-70vw, 25vh) scale(1.3); } to { transform: translate(-30vw, -25vh) scale(.8); } }

/* Somewhere Only We Know — ровный тёплый цвет, деревья по краям покачиваются */
.reveal[data-theme="lantern"] {
  --rv-bg: #DFAE61;
  --rv-ink: #24170A; --rv-muted: #4E3318;
  --rv-btn: #24170A; --rv-btn-ink: #F3DDA8;
  --rv-glow: 0;
}
.rv-trees { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .5; animation: fade 1.2s var(--ease) both; }
.rv-trees g { transform-box: fill-box; animation: sway 6s ease-in-out infinite alternate; }
.rv-trees .t1 { transform-origin: 0% 100%; }
.rv-trees .t2 { transform-origin: 100% 100%; animation-duration: 7s; animation-delay: -3s; }
.rv-trees .t3 { transform-origin: 100% 0%; animation-duration: 5s; animation-delay: -1s; }
.rv-trees .t4 { transform-origin: 0% 0%; animation-duration: 6.5s; animation-delay: -4s; }
@keyframes sway { from { transform: rotate(-2.2deg); } to { transform: rotate(2.2deg); } }

/* I Love You — ровный жёлтый и бегущие строки названия по всему экрану */
.reveal[data-theme="yellow"] {
  --rv-bg: #F2C84B;
  --rv-ink: #D23A2C; --rv-muted: #6B2417;
  --rv-btn: #D23A2C; --rv-btn-ink: #FCEBC0;
  --rv-glow: 0;
}
.rv-marquee {
  position: absolute; inset: -2% 0;
  display: flex; flex-direction: column; justify-content: space-between;
  font-family: 'Unifraktur', Georgia, serif; font-size: 7.6vh; line-height: 1;
  color: #D23A2C; opacity: .16;
  animation: fade 1.2s var(--ease) both;
}
.rv-row { display: flex; width: max-content; white-space: nowrap; animation: marquee 36s linear infinite; }
.rv-row:nth-child(even) { animation-direction: reverse; animation-duration: 44s; }
.rv-row span { padding-right: .35em; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ───── режим проверки ───── */
.dev { margin: -26px 0 44px; padding: 14px 16px; border-radius: 16px; border: 1px dashed var(--faint); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 12px; }
.dev strong { margin-right: auto; }
.dev button, .dev a { padding: 6px 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); background: var(--bg); color: var(--ink); text-decoration: none; }
.dev .error { flex-basis: 100%; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}