/* «Тринадцать ночей» — одна тёмная тема (намеренно): готический Новый Орлеан.
   Раскладка: игра на весь экран телефона, слои фона, силуэт героя, внизу окно реплик. */
:root {
  --night: #0c070a;
  --wine: #1a0b12;
  --glass: rgba(20, 9, 14, .82);
  --hair: rgba(241, 230, 216, .14);
  --ivory: #f1e6d8;
  --ivory-2: #cdbfb4;
  --muted: #9a8a90;
  --gold: #d4a86a;
  --gold-hi: #f1d9a8;
  --crimson: #b3263a;
  --parchment: #e9dcc3;
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --ui: 'Onest', system-ui, -apple-system, sans-serif;
  --top: env(safe-area-inset-top, 0px);
  --bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}
/* В Telegram во весь экран: сверху системная строка телефона и маленькие кнопки Telegram (закрыть, ⋯) — отступаем под них */
html.in-tg {
  --top: max(env(safe-area-inset-top, 0px), calc(var(--tg-safe-area-inset-top, 0px) + var(--tg-content-safe-area-inset-top, 0px)));
  --bottom: max(env(safe-area-inset-bottom, 0px), calc(var(--tg-safe-area-inset-bottom, 0px) + var(--tg-content-safe-area-inset-bottom, 0px)));
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; margin: 0; }
body { background: var(--night); color: var(--ivory); font: 400 16px/1.5 var(--ui); overflow: hidden; -webkit-font-smoothing: antialiased; user-select: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:focus-visible { outline: 1px solid var(--gold); outline-offset: 3px; }

#phone { position: relative; width: 100%; height: 100%; overflow: hidden; background: var(--night); }
.layer { position: absolute; inset: 0; pointer-events: none; }
#rain { width: 100%; height: 100%; }
/* Арт на весь экран: плавно проявляется поверх фона, снизу затемнён под окно реплик */
/* Значок «арт» у платного варианта, за которым открывается картинка */
.opt .cg-tag { flex: none; margin-left: 0; margin-right: 6px; padding: 3px 8px; border-radius: 999px; font: 600 10px var(--ui); letter-spacing: .12em; text-transform: uppercase; color: #f1d9a8; border: 1px solid rgba(241, 217, 168, .5); white-space: nowrap; }
.opt .cg-tag + .cost { margin-left: -6px; }
#cg { opacity: 0; transition: opacity .9s; }
#cg.on { opacity: 1; }
#cg .cg-frame { position: absolute; inset: 0; }
#cg .cg-frame.xfade { opacity: 0; transition: opacity .7s ease; } /* смена арта внутри сцены — плавное перетекание */
#cg .cg-frame.xfade.in { opacity: 1; }
#cg video, .art-pic > img:not(.fig) { width: 100%; height: 100%; object-fit: cover; display: block; }
#cg canvas, #cg .flicker { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* Камера медленно наплывает и чуть смещается */
#cg .live { animation: cgDrift 30s ease-in-out infinite alternate; transform-origin: 50% 35%; }
@keyframes cgDrift { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.03) translate(-.6%, .4%); } }
/* Тёплое мерцание, как от свечей */
#cg .flicker { background: radial-gradient(ellipse at 30% 70%, rgba(255, 170, 80, .14), transparent 60%); mix-blend-mode: screen; animation: cgFlicker 3.2s infinite; }
@keyframes cgFlicker { 0%, 100% { opacity: .6; } 20% { opacity: 1; } 35% { opacity: .7; } 60% { opacity: .95; } 80% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { #cg .live, .viewer .live, #cg .flicker { animation: none; } }
#cg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0,0,0,.35), transparent 18%, transparent 62%, rgba(8,4,8,.85)); }
#bg svg, #bg img { width: 100%; height: 100%; display: block; object-fit: cover; }
#bg { transition: opacity .8s ease; }
#bg.fade { opacity: 0; }
#vignette { background: radial-gradient(ellipse at 50% 40%, transparent 40%, rgba(5, 2, 4, .75) 100%), linear-gradient(to bottom, rgba(5, 2, 4, .5), transparent 18%, transparent 55%, rgba(5, 2, 4, .85)); }
#fx.flash { animation: flash .9s ease-out; }
@keyframes flash { 0% { background: rgba(255, 250, 235, .95); } 100% { background: rgba(255, 250, 235, 0); } }
#phone.shake { animation: shake .5s; }
@keyframes shake { 20% { transform: translate(-6px, 3px); } 40% { transform: translate(5px, -4px); } 60% { transform: translate(-4px, 2px); } 80% { transform: translate(3px, -1px); } }

/* Силуэт героя */
#portrait { position: absolute; left: 0; right: 0; bottom: 170px; height: 58%; display: flex; justify-content: center; align-items: flex-end; pointer-events: none; opacity: 0; transform: translateY(8px); transition: opacity .22s, transform .22s; }
#portrait.on { opacity: 1; transform: none; }
#portrait.on.dim { opacity: .4; filter: brightness(.75); }
#portrait { transition: opacity .3s, transform .3s, filter .3s; }
#portrait svg, #portrait img { height: 100%; max-width: 110%; }
#portrait.sprite img { max-width: 160%; } /* широкие платья не уменьшаем — лишнее по бокам уходит за край экрана */
#portrait.sprite { bottom: 150px; height: 66%; }
/* Аделина в зеркале: холодное свечение, полупрозрачность, лёгкое колыхание */
#portrait.on.ghost { opacity: .72; }
#portrait.on.ghost.dim { opacity: .3; }
#portrait.ghost img { filter: saturate(.35) brightness(1.1) sepia(.2) hue-rotate(170deg) drop-shadow(0 0 18px rgba(170, 200, 255, .55)) !important; animation: ghostWave 5s ease-in-out infinite; }
@keyframes ghostWave { 50% { transform: translateY(-6px) skewX(.6deg); } }
#portrait.sprite img { object-fit: contain; object-position: bottom; filter: drop-shadow(0 0 30px rgba(0, 0, 0, .6)); }
/* Каэль — демон: огненное свечение вокруг фигуры */
#portrait.sprite img[src*="kael_"] { filter: drop-shadow(0 0 14px rgba(255, 120, 40, .55)) drop-shadow(0 0 34px rgba(255, 80, 20, .3)); }

/* Верхняя панель */
#hud { position: absolute; z-index: 7; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: space-between; padding: calc(10px + var(--top)) max(16px, env(safe-area-inset-right, 0px)) 10px max(16px, env(safe-area-inset-left, 0px)); }
#hud[hidden] { display: none; }
#hud button { width: 38px; height: 38px; border-radius: 50%; background: rgba(12, 7, 10, .5); border: 1px solid var(--hair); display: grid; place-items: center; backdrop-filter: blur(8px); }
#hud svg { width: 18px; stroke: var(--ivory); stroke-width: 1.6; }
#night { font: 600 11px var(--ui); letter-spacing: .28em; text-transform: uppercase; color: var(--gold); }
.gems { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px 0 10px; border-radius: 999px; background: rgba(12, 7, 10, .55); border: 1px solid rgba(212, 168, 106, .4); backdrop-filter: blur(8px); font: 500 14px var(--ui); font-variant-numeric: tabular-nums; }
.gem { width: 1.05em; height: 1em; flex: none; vertical-align: -.12em; filter: drop-shadow(0 0 5px rgba(224, 35, 62, .65)); }
.gems .gem { width: 20px; height: 18px; }
#hud.in-menu { justify-content: flex-end; }
#hud .gem { stroke: none; width: 20px; height: 18px; }
#hud.in-menu #menuBtn, #hud.in-menu #night, #hud.in-menu #autoBtn { display: none; }
#hud .hud-left { display: flex; gap: 8px; flex-shrink: 0; }
#hud.in-menu .hud-left { margin-right: auto; }
#hud #soundBtn svg, #hud #vibBtn svg, #hud #autoBtn svg { fill: none; stroke-linecap: round; stroke-linejoin: round; }
#hud .gems { width: auto; height: 28px; border-radius: 999px; display: inline-flex; gap: 5px; padding: 0 4px 0 8px; font-size: 12.5px; }
.gems .plus { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(120deg, #f1d9a8, #c9965a); color: #2a1208; font-weight: 600; font-size: 15px; line-height: 1; }
.modal.shop { align-items: center; }
.modal.shop .panel { max-height: 100%; overflow-y: auto; text-align: left; gap: 12px; }
.modal.shop .panel > *, .modal .panel > * { flex-shrink: 0; } /* строки не сжимаются и не наезжают друг на друга — окно прокручивается */
.shop-head { display: flex; justify-content: space-between; align-items: center; }
.shop-head .x { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--hair); color: var(--ivory); }
.offer { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px 16px 14px; border-radius: 22px; text-align: center; border: 1px solid transparent; background: radial-gradient(120% 90% at 50% 0%, rgba(224, 35, 62, .28), transparent 70%) padding-box, linear-gradient(#1a0910, #1a0910) padding-box, linear-gradient(130deg, #f6dca0, #b3263a 45%, #e3ad5c 80%, #f6dca0) border-box; box-shadow: 0 0 34px rgba(224, 35, 62, .25); animation: offerGlow 2.6s ease-in-out infinite; }
.offer .eyebrow { font-size: 9.5px; letter-spacing: .24em; }
.offer-tag { position: absolute; top: -12px; right: 14px; padding: 4px 11px; border-radius: 999px; background: #e0233e; color: #fff; font: 700 13px var(--ui); box-shadow: 0 4px 14px rgba(224, 35, 62, .5); transform: rotate(4deg); }
.offer-main { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.offer-main .gem { width: 36px; height: 33px; filter: drop-shadow(0 0 12px rgba(224, 35, 62, .8)); }
.offer-main b { font: 500 44px/1 var(--serif); color: var(--gold-hi); }
.offer-main span:last-child { font: italic 500 18px var(--serif); color: var(--ivory-2); }
.offer-why { margin: 0; font-size: 13px; line-height: 1.4; color: var(--ivory-2); }
.offer-buy { margin-top: 6px; width: 100%; height: 50px; border-radius: 999px; background: linear-gradient(120deg, #f6dca0, #c9965a); color: #2a1208; font: 700 19px var(--ui); box-shadow: 0 6px 22px rgba(227, 173, 92, .35); }
.offer-buy s { margin-right: 8px; font-weight: 500; font-size: 15px; color: rgba(42, 18, 8, .5); }
.offer-buy:disabled { opacity: .7; }
.offer-time { font-size: 12px; color: var(--muted); } .offer-time b { color: var(--gold-hi); font-variant-numeric: tabular-nums; font-weight: 600; }
.offer-msg { margin: 0; min-height: 0; font-size: 13px; } .offer-msg.ok { color: #9fd3a4; } .offer-msg.err { color: #e48a8a; }
@keyframes offerGlow { 50% { box-shadow: 0 0 46px rgba(224, 35, 62, .42); } }
.packs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pack { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 16px 8px 12px; border-radius: 18px; border: 1px solid var(--hair); background: rgba(12, 7, 10, .55); transition: transform .15s; }
.pack:active { transform: scale(.97); }
.pack.hot { border-color: transparent; background: linear-gradient(var(--wine), var(--wine)) padding-box, linear-gradient(120deg, #f1d9a8, #b3263a 50%, #d4a86a) border-box; }
.pack .gem-big .gem { width: 34px; height: 31px; filter: drop-shadow(0 0 10px rgba(224, 35, 62, .7)); }
.pack b { font: 300 24px var(--ui); color: var(--ivory); font-variant-numeric: tabular-nums; }
.pack .price { margin-top: 6px; width: 100%; padding: 7px 0; border-radius: 999px; background: linear-gradient(120deg, #f1d9a8, #c9965a); color: #2a1208; font: 600 14px var(--ui); }
.pack .tag { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 2px 10px; border-radius: 999px; background: #b3263a; color: #fff; font: 600 10.5px var(--ui); letter-spacing: .04em; }
.promo-box { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--hair); }
.eyebrow.dim { color: var(--muted); }
.promo-row { display: flex; gap: 8px; }
.promo-row .promo-input { flex: 1; min-width: 0; height: 50px; font-size: 16px; letter-spacing: .06em; text-transform: none; }
.btn.small { width: auto; height: 50px; padding: 0 18px; font-size: 14px; }
.promo-input { width: 100%; height: 54px; border-radius: 16px; border: 1px solid rgba(212, 168, 106, .45); background: rgba(12, 7, 10, .6); color: var(--ivory); font: 500 20px var(--ui); letter-spacing: .12em; text-align: center; text-transform: uppercase; outline: none; user-select: text; }
.promo-input:focus { border-color: var(--gold); }
.promo-msg { min-height: 20px; margin: 0; font-size: 14px; color: var(--muted); }
.promo-msg.ok { color: #f08aa6; }
.promo-msg.err { color: #e0927f; }
.gems.bump { animation: bump .5s; }
@keyframes bump { 40% { transform: scale(1.18); } }

/* Сцена */
#stage { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; justify-content: flex-end; padding: calc(64px + var(--top)) max(14px, env(safe-area-inset-right, 0px)) calc(18px + var(--bottom)) max(14px, env(safe-area-inset-left, 0px)); }
.tap { position: absolute; inset: 0; }

/* Окно реплики */
.box { position: relative; background: var(--glass); border: 1px solid var(--hair); border-radius: 22px; padding: 26px 20px 18px; min-height: 132px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 20px 60px rgba(0, 0, 0, .5); animation: up .35s ease both; }
@keyframes textIn { from { opacity: 0; } }
.text .w { display: inline; animation: wordIn .32s ease-out backwards; }
@media (prefers-reduced-motion: reduce) { .text .w, #portrait > * { animation: none !important; } }
.text.shown .w { animation: none; opacity: 1; }
@keyframes wordIn { from { opacity: 0; filter: blur(3px); } }
#portrait > .p-in { animation: pIn .3s ease-out; }
#portrait > .p-out { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); animation: pOut .3s ease-in forwards; }
@keyframes pIn { from { opacity: 0; } }
@keyframes pOut { to { opacity: 0; } }
@keyframes up { from { transform: translateY(12px); } }
.name { position: absolute; top: -15px; left: 18px; height: 30px; padding: 0 16px; border-radius: 999px; display: flex; align-items: center; font: 700 17px var(--serif); letter-spacing: .04em; color: #12080c; background: var(--c, var(--gold)); box-shadow: 0 0 24px color-mix(in srgb, var(--c, var(--gold)) 55%, transparent); }
.text { font-size: 16.5px; line-height: 1.55; color: var(--ivory); min-height: 3em; text-wrap: pretty; }
.box.narr { text-align: center; background: rgba(8, 4, 6, .72); }
.box.narr .text { font: italic 500 21px/1.42 var(--serif); color: var(--ivory-2); }
.box.think { background: rgba(30, 18, 26, .7); border-style: dashed; border-color: rgba(212, 168, 106, .35); }
.box.think .text { font-style: italic; color: var(--ivory-2); }
.box.think .name { background: transparent; color: var(--gold); box-shadow: none; border: 1px solid rgba(212, 168, 106, .5); font-style: italic; }
.box.letter { background: var(--parchment); border: 0; color: #2a1a12; box-shadow: 0 20px 60px rgba(0, 0, 0, .6), inset 0 0 40px rgba(120, 80, 40, .25); }
.box.letter .text { font: italic 600 21px/1.4 var(--serif); color: #3a2416; }
.box.letter .name { background: #8a1c2b; color: var(--parchment); box-shadow: none; }
.more { position: absolute; right: 18px; bottom: 12px; width: 10px; height: 10px; border-right: 1.5px solid var(--gold); border-bottom: 1.5px solid var(--gold); transform: rotate(45deg); animation: nudge 1.2s infinite; }
.box.letter .more { border-color: #8a1c2b; }
@keyframes nudge { 50% { transform: translateY(3px) rotate(45deg); } }

/* Плашка с переводом иностранного слова */
.gloss { position: absolute; z-index: 6; top: calc(62px + var(--top)); left: max(14px, env(safe-area-inset-left, 0px)); right: max(14px, env(safe-area-inset-right, 0px)); display: flex; flex-direction: column; gap: 6px; padding: 10px 14px; border-radius: 16px; background: rgba(12, 7, 10, .82); border: 1px solid rgba(212, 168, 106, .4); backdrop-filter: blur(10px); font-size: 13.5px; line-height: 1.45; color: var(--ivory-2); animation: up .35s ease both; pointer-events: none; }
.gloss p { margin: 0; }
.gloss b { font: italic 600 17px var(--serif); color: var(--gold-hi); }
.gloss span { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }

/* Выборы */
.choices { display: flex; flex-direction: column; gap: 10px; animation: up .4s ease both; max-height: 100%; overflow-y: auto; scrollbar-width: none; }
.choices::-webkit-scrollbar { display: none; }
.q { text-align: center; font: italic 600 22px var(--serif); color: var(--ivory); margin-bottom: 4px; text-shadow: 0 2px 20px rgba(0, 0, 0, .9); }
.keynote { align-self: center; display: inline-flex; gap: 8px; align-items: center; padding: 6px 14px; border-radius: 999px; background: rgba(179, 38, 58, .25); border: 1px solid rgba(179, 38, 58, .6); font: 500 12px var(--ui); color: var(--gold-hi); }
.opt { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 58px; padding: 14px 18px; text-align: left; border-radius: 18px; background: var(--glass); border: 1px solid var(--hair); backdrop-filter: blur(12px); font-size: 15.5px; line-height: 1.35; transition: transform .15s, border-color .2s; }
.opt:active { transform: scale(.98); }
.opt span { flex: 1; }
.opt.premium { border: 1px solid transparent; background: linear-gradient(var(--wine), var(--wine)) padding-box, linear-gradient(120deg, #f1d9a8, #b3263a 50%, #d4a86a) border-box; box-shadow: 0 0 30px rgba(212, 168, 106, .18); }
.opt small { display: block; margin-top: 4px; font-size: 12px; color: var(--gold); letter-spacing: .02em; }
.opt.special { border-color: rgba(212, 168, 106, .55); }
.opt.locked { opacity: .5; cursor: default; }
.opt.locked small { color: var(--muted); }
.opt .cost { flex: none; display: inline-flex; gap: 5px; align-items: center; height: 28px; padding: 0 11px; border-radius: 999px; background: linear-gradient(120deg, #f1d9a8, #c9965a); color: #2a1208; font: 600 13px var(--ui); }
.opt .cost .gem { width: 15px; height: 14px; filter: none; }

/* Карточка главы */
.card { position: absolute; inset: 0; z-index: 8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: rgba(8, 4, 6, .9); animation: cardin 2.6s ease both; pointer-events: none; text-align: center; padding: 24px; }
.card small { font: 600 11px var(--ui); letter-spacing: .4em; text-transform: uppercase; color: var(--gold); }
.card b { font: 600 46px/1 var(--serif); color: var(--ivory); }
.card i { width: 60px; height: 1px; background: var(--gold); }
@keyframes cardin { 0% { opacity: 0; } 15%, 75% { opacity: 1; } 100% { opacity: 0; } }

/* Уведомление о выборе */
#toast { position: absolute; z-index: 9; top: calc(64px + var(--top)); left: 50%; transform: translateX(-50%); display: flex; gap: 10px; align-items: center; padding: 10px 18px; border-radius: 999px; background: rgba(12, 7, 10, .85); border: 1px solid var(--hair); backdrop-filter: blur(10px); font: 500 13.5px var(--ui); white-space: nowrap; animation: up .3s ease both; }
#toast[hidden] { display: none; }
#toast i { width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--gold)); box-shadow: 0 0 10px var(--c, var(--gold)); }

/* Меню и экраны */
.screen { position: absolute; inset: 0; z-index: 6; overflow-y: auto; padding: calc(70px + var(--top)) max(20px, env(safe-area-inset-right, 0px)) calc(28px + var(--bottom)) max(20px, env(safe-area-inset-left, 0px)); display: flex; flex-direction: column; gap: 22px; }
.title { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.eyebrow { font: 600 10.5px var(--ui); letter-spacing: .34em; text-transform: uppercase; color: var(--gold); }
.title h1 { margin: 0; font: 600 62px/.92 var(--serif); letter-spacing: -.01em; text-shadow: 0 4px 40px rgba(0, 0, 0, .8); }
.title h1 em { font-weight: 500; color: var(--gold); }
.title p { margin: 0; font: italic 500 19px/1.4 var(--serif); color: var(--ivory-2); text-shadow: 0 2px 16px rgba(0, 0, 0, .9); }
.btn { display: flex; align-items: center; justify-content: center; height: 58px; border-radius: 999px; width: 100%; font: 600 16px var(--ui); letter-spacing: .02em; color: #1a0a0e; background: linear-gradient(120deg, #f1d9a8, #d4a86a 50%, #a8783e); box-shadow: 0 12px 40px rgba(212, 168, 106, .35), inset 0 1px 0 rgba(255, 255, 255, .5); }
.btn.ghost { background: rgba(12, 7, 10, .55); color: var(--ivory); border: 1px solid var(--hair); box-shadow: none; backdrop-filter: blur(8px); }
.eps { display: flex; flex-direction: column; background: var(--glass); border: 1px solid var(--hair); border-radius: 22px; overflow: hidden; backdrop-filter: blur(12px); }
.ep { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-top: 1px solid var(--hair); text-align: left; }
.ep:first-child { border-top: 0; }
.ep .n { width: 34px; flex: none; font: 300 22px var(--ui); color: var(--gold); }
.ep b { display: block; font: 600 19px var(--serif); }
.ep small { color: var(--muted); font-size: 12.5px; }
.ep { width: 100%; }
.ep.locked { opacity: .45; cursor: default; }
.lock.gold { color: var(--gold); }
.reward { align-self: center; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(232, 106, 138, .4); background: rgba(232, 106, 138, .1); font-size: 14px; color: var(--ivory-2); }
.reward b { color: #ff8a9a; font-weight: 600; }
.lock { margin-left: auto; font-size: 12px; color: var(--muted); }

/* Меню */
.screen.menu { gap: 16px; background: linear-gradient(rgba(8, 4, 6, .6), rgba(8, 4, 6, .2) 55%, transparent); }
.screen > * { flex-shrink: 0; }
.title.compact { margin-top: 0; gap: 6px; }
.title.compact h1 { font-size: 46px; line-height: 1; }
.title.compact p { font-size: 17px; }
.ep.now { background: rgba(212, 168, 106, .1); }

/* Главный экран приложения */
.screen.home { gap: 22px; background: linear-gradient(rgba(8, 4, 6, .78), rgba(8, 4, 6, .55) 40%, rgba(8, 4, 6, .85)); }
.brand h1 { margin: 0; font: italic 500 44px/.95 var(--serif); letter-spacing: -.01em; color: var(--ivory); }
.brand h1 em { color: var(--gold); }
.brand p { margin: 8px 0 0; font-size: 13px; letter-spacing: .06em; color: var(--muted); }
.resume { display: flex; align-items: center; gap: 14px; width: 100%; padding: 10px; text-align: left; border-radius: 20px; background: var(--glass); border: 1px solid rgba(212, 168, 106, .35); backdrop-filter: blur(12px); }
.resume-cover { width: 64px; height: 64px; flex: none; border-radius: 14px; overflow: hidden; position: relative; }
.resume-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.resume-text small { font: 600 10.5px var(--ui); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.resume-text b { font: 600 19px var(--serif); }
.resume-text > span { font-size: 13px; color: var(--muted); }
.progress-mini { height: 3px; border-radius: 3px; background: rgba(241, 230, 216, .12); margin-top: 6px; overflow: hidden; }
.progress-mini i { display: block; height: 100%; background: var(--gold); }
.play { width: 40px; height: 40px; flex: none; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(120deg, #f1d9a8, #c9965a); color: #1a0a0e; font-size: 14px; }
.shelf h2 { margin: 0 0 12px; font: 600 11px var(--ui); letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.covers { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; }
.cov { display: flex; flex-direction: column; gap: 8px; text-align: left; min-width: 0; }
.cov-img { position: relative; display: block; width: 100%; aspect-ratio: 1; border-radius: 18px; overflow: hidden; border: 1px solid var(--hair); box-shadow: 0 14px 34px rgba(0, 0, 0, .5); }
.cover-art, .cover-art svg, .cover-art img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.cov-hero { position: absolute; left: 50%; bottom: -38%; height: 150%; transform: translateX(-50%); filter: drop-shadow(0 0 18px rgba(0, 0, 0, .7)); }
.resume-cover .cov-hero { bottom: -60%; height: 190%; }
.cov-key { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } /* обложка новеллы */
.cov-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 35%, rgba(8, 4, 6, .9)); }
.cov-title { position: absolute; z-index: 1; left: 12px; right: 12px; bottom: 10px; font: italic 600 21px/1 var(--serif); color: var(--ivory); text-shadow: 0 2px 12px rgba(0, 0, 0, .8); }
.tag-new, .tag-soon { position: absolute; z-index: 1; top: 10px; left: 10px; padding: 3px 9px; border-radius: 999px; font: 600 10.5px var(--ui); letter-spacing: .06em; }
.tag-new { background: #b3263a; color: #fff; }
.tag-soon { background: rgba(12, 7, 10, .7); color: var(--gold-hi); border: 1px solid rgba(212, 168, 106, .4); text-transform: uppercase; letter-spacing: .14em; }
.cov-meta { display: flex; flex-direction: column; gap: 1px; }
.cov-meta b { font: 600 16px var(--serif); }
.cov-meta small { font-size: 12px; color: var(--muted); }
.cov.soon .cov-img { filter: saturate(.85) brightness(.82); } /* обложки «Скоро» видны, но чуть приглушены */
.cov.soon { cursor: default; }
.hero-line { align-self: center; font-size: 13.5px; color: var(--muted); padding: 4px 0; }
.hero-line b { color: var(--gold-hi); font-weight: 600; }
.name-input { text-transform: none; letter-spacing: .02em; font: 600 22px var(--serif); }
.name-input.small { font-size: 17px; height: 46px; }
.back { align-self: flex-start; color: var(--gold); font-size: 14px; padding: 4px 0; }

/* Итог эпизода */
.screen.end { background: rgba(10, 5, 8, .78); }
.end h2 { margin: 0; font: 600 40px/1 var(--serif); }
.panel { background: var(--glass); border: 1px solid var(--hair); border-radius: 22px; padding: 18px; display: flex; flex-direction: column; gap: 14px; backdrop-filter: blur(12px); }
.rel { display: grid; grid-template-columns: 74px 1fr 26px; gap: 10px; align-items: center; font-size: 14px; }
.rel .bar { height: 4px; border-radius: 4px; background: rgba(241, 230, 216, .1); overflow: hidden; }
.rel .bar i { display: block; height: 100%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.rel b { font: 300 15px var(--ui); text-align: right; color: var(--ivory-2); }
.traits { display: flex; gap: 8px; }
.traits div { flex: 1; text-align: center; padding: 10px 6px; border-radius: 14px; border: 1px solid var(--hair); }
.traits b { display: block; font: 300 24px var(--ui); color: var(--gold-hi); }
.traits small { font-size: 11.5px; color: var(--muted); }
.flags { display: flex; flex-wrap: wrap; gap: 6px; }
.flags span { font-size: 12px; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(212, 168, 106, .35); color: var(--gold-hi); }
.teaser { font: italic 500 19px/1.4 var(--serif); color: var(--ivory-2); }

/* Окно «мало алмазов» */
.modal { position: absolute; inset: 0; z-index: 10; background: rgba(5, 2, 4, .7); display: flex; align-items: flex-end; padding: 16px; padding-bottom: calc(16px + var(--bottom)); backdrop-filter: blur(6px); animation: up .3s ease both; }
.modal .panel { width: 100%; text-align: center; background: var(--wine); }
.modal h3 { margin: 0; font: 600 26px var(--serif); }

/* Статус-бар и рамка телефона на компьютере */
.statusbar, .home-bar { display: none; }
@media (min-width: 640px) and (min-height: 640px) {
  body { display: grid; place-items: center; background: radial-gradient(ellipse at 50% 40%, #2a0f1a 0%, #070305 60%); }
  /* Как iPhone 15 Pro Max: экран 430×932, скругление 55px, Dynamic Island 126×37, тонкая титановая рамка.
     Если окно ноутбука ниже — телефон уменьшается целиком, пропорции сохраняются */
  #phone {
    --top: 54px; --bottom: 20px;
    height: min(932px, calc(100vh - 40px)); width: auto; aspect-ratio: 430 / 932; border-radius: 55px; transform: translateZ(0);
    box-shadow: 0 0 0 9px #0d0b0e, 0 0 0 11px #4a4448, 0 0 0 12px #1c191c, 0 40px 120px rgba(0, 0, 0, .75), 0 0 160px rgba(179, 38, 58, .2);
  }
  .statusbar { display: flex; position: absolute; z-index: 20; top: 0; left: 0; right: 0; height: 54px; padding: 0 34px 0 40px; align-items: center; justify-content: space-between; font: 600 15px var(--ui); color: var(--ivory); pointer-events: none; }
  .statusbar .island { position: absolute; left: 50%; top: 11px; transform: translateX(-50%); width: 126px; height: 37px; border-radius: 20px; background: #000; }
  .sb-icons { display: flex; gap: 6px; align-items: center; }
  .sb-icons svg { height: 11px; fill: currentColor; }
  .home-bar { display: block; position: absolute; z-index: 20; bottom: 8px; left: 50%; transform: translateX(-50%); width: 140px; height: 5px; border-radius: 3px; background: rgba(241, 230, 216, .6); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Галерея артов на странице истории */
.g-head { display: flex; align-items: baseline; justify-content: space-between; margin-top: 8px; }
.g-head small { color: var(--muted); font: 500 12px var(--ui); }
.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.g-tile { position: relative; aspect-ratio: 2 / 3; border-radius: 12px; overflow: hidden; border: 1px solid var(--hair); padding: 0; background: #120a0e; }
.g-tile .art-pic > img:not(.fig) { width: 100%; height: 100%; object-fit: cover; display: block; }
.g-tile:not(.open) .art-pic { filter: blur(14px) brightness(.35) saturate(.6); transform: scale(1.15); }
.g-lock { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; font-size: 18px; }
.g-lock small { font: 500 11px var(--ui); color: var(--muted); letter-spacing: .04em; }
.viewer { position: absolute; inset: 0; z-index: 50; background: #000; opacity: 0; transition: opacity .4s; overflow: hidden; }
.viewer.on { opacity: 1; }
.viewer .live { animation: cgDrift 30s ease-in-out infinite alternate; transform-origin: 50% 35%; }
.v-hint { position: absolute; left: 0; right: 0; bottom: 28px; text-align: center; font: 500 12px var(--ui); color: rgba(255, 255, 255, .55); }

/* Слои арта: комната на весь экран, фигура героини поверх, стоит на полу */
.art-pic { position: absolute; inset: 0; display: block; overflow: hidden; }
.art-pic .fig { position: absolute; left: 50%; bottom: calc(204px + var(--bottom)); height: calc(100% - 204px - var(--bottom) - 76px - var(--top)); transform: translateX(-50%); filter: drop-shadow(0 0 24px rgba(0, 0, 0, .55)); }

/* Выбор листанием (гардеробная) */
.picker { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: calc(70px + var(--top)) 16px calc(20px + var(--bottom)); touch-action: pan-y; }
.picker .q { align-self: center; padding: 8px 16px; border-radius: 999px; background: rgba(12, 7, 10, .55); backdrop-filter: blur(8px); font: italic 600 19px var(--serif, 'Cormorant Garamond', serif); color: var(--ivory); }
.pk-arrow { position: absolute; top: 46%; width: 44px; height: 44px; border-radius: 50%; background: rgba(12, 7, 10, .55); border: 1px solid var(--hair); color: var(--ivory); font-size: 28px; line-height: 1; backdrop-filter: blur(8px); }
.pk-arrow.l { left: 10px; } .pk-arrow.r { right: 10px; }
.pk-bottom { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px; border-radius: 20px; background: rgba(12, 7, 10, .7); backdrop-filter: blur(12px); border: 1px solid var(--hair); }
.pk-dots { display: flex; gap: 6px; } .pk-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, .25); } .pk-dots i.on { background: var(--gold, #d4a86a); }
.pk-q { font: italic 600 18px 'Cormorant Garamond', serif; color: var(--gold, #d4a86a); text-align: center; margin-bottom: -2px; }
.pk-name { font: 600 17px var(--ui); color: var(--ivory); text-align: center; }
.pk-go { width: 100%; display: inline-flex; justify-content: center; align-items: center; gap: 6px; }
.pk-go .gem { width: 16px; height: 15px; }

/* Листание: все варианты наложены друг на друга, виден только текущий */
.pk-slide { position: absolute; inset: 0; opacity: 0; }
.pk-slide.on { opacity: 1; }

/* ───────── Стиль «Редакция журнала» (№39 из каталога): чёрные строгие окна, крупное золотое имя курсивом,
   хвостик от окна к говорящему. Всё оформление реплик и выбора — здесь, поверх базовых правил выше ───────── */
#phone { --mag-bg: rgba(12, 10, 10, .9); --mag-gold: #e3ad5c; --mag-font: 'Manrope', var(--ui); }
.box { background: var(--mag-bg); border: 0; border-radius: 0; box-shadow: 0 18px 50px rgba(0, 0, 0, .55); padding: 24px 22px 20px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.text { font-family: var(--mag-font); font-size: 16.5px; }
/* Имя — крупный курсив над окном */
.name { top: auto; bottom: calc(100% + 2px); right: 4px; line-height: 1.08; left: 4px; height: auto; padding: 0; border-radius: 0; background: none; box-shadow: none; font: italic 700 36px 'Playfair Display', var(--serif); letter-spacing: 0; color: var(--mag-gold); text-shadow: 0 1px 2px #000, 0 0 10px rgba(0, 0, 0, .95), 0 0 24px rgba(0, 0, 0, .8); }
.box.think .name { border: 0; font-size: 24px; top: auto; bottom: calc(100% + 6px); color: var(--mag-gold); }
.box.letter .name { background: none; color: var(--mag-gold); }
.name.long { font-size: 28px; } /* длинное имя («Женщина в серой маске») — мельче и растёт вверх, не залезая на текст */
/* Хвостик реплики: треугольник от окна вверх, к персонажу */
.box.say::before { content: ''; position: absolute; top: -20px; right: 34px; border-left: 16px solid transparent; border-right: 16px solid transparent; border-bottom: 20px solid var(--mag-bg); }
/* Мысли: два кружочка, как у облачка мысли */
.box.think { background: rgba(20, 16, 18, .86); border: 0; }
.box.think::before, .box.think::after { content: ''; position: absolute; border-radius: 50%; background: rgba(20, 16, 18, .86); }
.box.think::before { width: 18px; height: 18px; top: -26px; right: 40px; }
.box.think::after { width: 10px; height: 10px; top: -44px; right: 28px; }
.box.narr { background: rgba(8, 6, 6, .8); }
/* Выбор */
.q { font: italic 700 25px 'Playfair Display', var(--serif); color: var(--mag-gold); margin-bottom: 8px; }
.opt, .opt.premium, .opt.special { border: 0; border-radius: 0; background: var(--mag-bg); box-shadow: none; font-family: var(--mag-font); font-size: 16px; min-height: 62px; padding: 16px 20px; }
.opt.premium { box-shadow: inset 3px 0 0 var(--mag-gold); }
.opt .cost { background: #fff; color: #140a0c; border-radius: 999px; }
.opt small { color: var(--mag-gold); }

/* Ремарки в скобках: приглушённый мелкий курсив */
.dir-lead { margin: -4px 0 6px; font: italic 500 13.5px var(--mag-font, var(--ui)); color: rgba(243, 233, 220, .48); letter-spacing: .01em; }
.text .dir { font-style: italic; font-size: .9em; color: rgba(243, 233, 220, .5); }
.box.letter .dir-lead, .box.letter .text .dir { color: rgba(58, 36, 22, .6); }

.gloss { transition: opacity .6s, transform .6s; }
.gloss.out { opacity: 0; transform: translateY(-8px); }
/* Заголовок эпизода в одну строку */
#night { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; letter-spacing: .16em; }

/* Длинный текст — прямым шрифтом: в курсиве кириллическая «т» пишется как «m», и её не узнают */
.box.narr .text, .box.letter .text { font-style: normal; }
.box.think .text { font-style: normal; }
.dir-lead, .text .dir { font-style: normal; }

/* Перевод слова — прямо над окном реплики, над именем героя */
#stage .gloss { position: relative; top: auto; left: auto; right: auto; margin: 0 0 62px; }
#stage .gloss:has(+ .box.narr) { margin-bottom: 14px; }
#stage .gloss:has(+ .box.think) { margin-bottom: 50px; }
.box .more { display: none !important; } /* стрелка «дальше» не нужна: нажать можно на любое место */


/* Верхняя панель: одна кнопка слева (по нажатию — меню, звук, автопрокрутка), справа всегда алмазы */
#hud #night { display: none; }
#hud .gem { width: 15px; height: 14px; }
#hud .gems .plus { width: 19px; height: 19px; font-size: 13px; }
#hud.in-menu #hudToggle { display: grid; }
#hud .hud-left { position: relative; }
#hud #hudToggle { width: 34px; height: 34px; }
#hud #hudToggle svg { width: 16px; fill: none; stroke-linecap: round; }
#hud #hudToggle.on { background: rgba(212, 168, 106, .25); border-color: rgba(212, 168, 106, .6); }
#hud .hud-drop { position: absolute; top: 42px; left: 0; display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 16px; background: rgba(12, 7, 10, .82); border: 1px solid var(--hair); backdrop-filter: blur(12px); box-shadow: 0 12px 30px rgba(0, 0, 0, .5); animation: up .18s ease-out; }
#hud .hud-drop[hidden] { display: none; }
#hud .hd-item { width: auto; height: 40px; border-radius: 12px; display: flex; align-items: center; gap: 10px; padding: 0 14px 0 10px; background: transparent; border: 0; backdrop-filter: none; color: var(--ivory); font: 500 13.5px var(--ui); white-space: nowrap; }
#hud .hd-item:active { background: rgba(255, 255, 255, .06); }
#hud .hd-item svg { width: 18px; fill: none; stroke-linecap: round; stroke-linejoin: round; }
#hud .hd-item#autoBtn.on { background: rgba(212, 168, 106, .18); color: var(--gold); }
#hud .hd-item#autoBtn.on svg { stroke: var(--gold); }
#hud.in-menu .hd-item#menuBtn, #hud.in-menu .hd-item#autoBtn, #hud.in-menu .hd-item#restartBtn, #hud.in-menu .hd-item#homeBtn, #hud.in-menu .hd-item#soundBtn, #hud.in-menu .hd-item#vibBtn { display: none; }

/* Пояснение, которое держится всю сцену: не мигает на каждой реплике; на экране выбора — сверху */
#stage .gloss.sticky { animation: none; }
#stage .gloss.at-top { position: absolute; top: calc(62px + var(--top)); left: max(14px, env(safe-area-inset-left, 0px)); right: max(14px, env(safe-area-inset-right, 0px)); margin: 0; }

/* Главный экран: заставка «книга, из которой выходят миры» */
.screen.home { gap: 26px; padding-top: 0; padding-bottom: calc(28px + var(--bottom)); background: linear-gradient(rgba(6, 4, 14, .55), transparent 22%, transparent 55%, rgba(6, 4, 12, .55) 80%, rgba(6, 4, 12, .9)); scroll-snap-type: y proximity; }
.home-hero { min-height: 100%; flex: none; display: flex; flex-direction: column; gap: 14px; padding-top: calc(70px + var(--top)); scroll-snap-align: start; }
.home .brand { text-align: center; margin-bottom: auto; }
.home .brand { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.home .brand-star { font-style: normal; font-size: 13px; color: var(--gold-hi); text-shadow: 0 0 12px rgba(227, 173, 92, .9); letter-spacing: 0; }
/* Название: золотой градиент по буквам, мягкое свечение, классическая антиква без курсива */
.home .brand h1 { margin: 0; font: 600 38px/1 'Cormorant Garamond', var(--serif); letter-spacing: .04em; background: linear-gradient(180deg, #fbecc6 0%, #e9c27f 55%, #b9884a 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 14px rgba(0, 0, 0, .85)) drop-shadow(0 0 18px rgba(227, 173, 92, .25)); }
.home .brand p { margin: 0; font: 500 10px var(--ui); letter-spacing: .18em; white-space: nowrap; text-transform: uppercase; color: rgba(241, 230, 216, .72); text-shadow: 0 1px 8px rgba(0, 0, 0, .95); }
.home.first .home-hero { gap: 18px; }
.first-pitch { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 0 12px; }
.first-pitch b { font: italic 600 26px/1 var(--serif); color: var(--ivory); text-shadow: 0 2px 12px rgba(0, 0, 0, .9); }
.first-pitch span { font-size: 14px; line-height: 1.45; color: rgba(241, 230, 216, .82); text-shadow: 0 1px 8px rgba(0, 0, 0, .95); }
.home.first .feature-go { font-size: 17px; padding: 17px; box-shadow: 0 0 34px rgba(227, 173, 92, .35); }
.feature { display: flex; gap: 14px; align-items: center; padding: 12px; border-radius: 22px; background: rgba(10, 7, 20, .62); border: 1px solid rgba(227, 173, 92, .35); backdrop-filter: blur(14px); box-shadow: 0 18px 40px rgba(0, 0, 0, .55); cursor: pointer; }
.feature-cover { position: relative; width: 92px; height: 92px; flex: none; border-radius: 16px; overflow: hidden; box-shadow: 0 6px 18px rgba(0, 0, 0, .6); }
.feature-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.feature-text small { font: 600 10.5px var(--ui); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.feature-text b { font: italic 600 23px/1.05 var(--serif); color: var(--ivory); }
.feature-text > span { font-size: 13px; color: rgba(241, 230, 216, .78); }
.feature-text .feature-tags { font-size: 12px; color: var(--muted); }
.feature .progress-mini { margin-top: 4px; }
.feature-go { width: 100%; }
.more-hint { align-self: center; font-size: 12px; letter-spacing: .12em; color: rgba(241, 230, 216, .55); animation: nudge2 2.4s ease-in-out infinite; }
@keyframes nudge2 { 50% { transform: translateY(4px); opacity: .9; } }
.home .shelf { scroll-snap-align: start; }
.soon-row { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -20px; padding: 0 20px 4px; scrollbar-width: none; }
.soon-row::-webkit-scrollbar { display: none; }
.soon-row .cov { flex: 0 0 44%; scroll-snap-align: start; }
.soon-row .cov-img { aspect-ratio: 3 / 4; }
@media (max-width: 360px) { .home .brand p { font-size: 9px; letter-spacing: .12em; } .home .brand h1 { font-size: 34px; } }
#bg img[src$="home.webp"] { object-position: 18% 50%; } /* заставка главного экрана: часы 00:00 слева должны быть в кадре */

.first-card { cursor: default; }
.first-card .feature-cover { width: 104px; height: 104px; }
.first-card .feature-text > span { font-size: 13px; line-height: 1.4; }

/* Знаки героев на вариантах выбора и во всплывающих подсказках */
.opt .hero-ic { flex: none; width: 30px; height: 30px; object-fit: contain; margin-left: auto; filter: drop-shadow(0 0 6px rgba(0, 0, 0, .6)); }
.opt .hero-ic + .cg-tag, .opt .hero-ic + .cost { margin-left: 0; }
#toast .hero-ic { width: 20px; height: 20px; object-fit: contain; flex: none; }

.opt .cost.owned { background: transparent; color: var(--gold-hi); border: 1px solid rgba(227, 173, 92, .5); font-size: 11.5px; } /* уже купленный выбор */

/* Колесо удачи */
.wheel-modal { align-items: center; }
.wheel-panel { align-items: center; text-align: center; }
.wheel-box { position: relative; width: min(300px, 74vw); aspect-ratio: 1; margin: 6px auto 2px; filter: drop-shadow(0 0 26px rgba(227, 173, 92, .25)); }
.wheel { width: 100%; height: 100%; display: block; transition: transform 5s cubic-bezier(.12, .62, .08, 1); }
.wheel .w-num { font: 700 21px var(--ui); fill: #f6e7c8; }
.wheel .w-star { font-size: 22px; fill: #e3ad5c; }
.wheel-pin { position: absolute; z-index: 1; left: 50%; top: -8px; transform: translateX(-50%); width: 0; height: 0; border-left: 13px solid transparent; border-right: 13px solid transparent; border-top: 26px solid #f1d9a8; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .7)); }
.wheel-msg { margin: 4px 0 0; color: var(--ivory-2); font-size: 15px; min-height: 1.4em; }
.wheel-msg b { color: var(--gold-hi); }
.wheel-btn { width: 100%; }
.wheel-btn:not(.ready) { background: var(--glass); color: var(--muted); border: 1px solid var(--hair); }
.wheel-btn.ready { box-shadow: 0 0 26px rgba(227, 173, 92, .4); animation: wheelGlow 2.4s ease-in-out infinite; }
@keyframes wheelGlow { 50% { box-shadow: 0 0 40px rgba(227, 173, 92, .65); } }

/* Награда за эпизод — крупно, чтобы её заметили */
.reward.big { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-radius: 20px; background: linear-gradient(120deg, rgba(241, 217, 168, .18), rgba(201, 150, 90, .08)); border: 1px solid rgba(227, 173, 92, .6); box-shadow: 0 0 30px rgba(227, 173, 92, .25); animation: rewardIn .6s cubic-bezier(.2, 1.4, .4, 1) both; }
.reward.big .gift { font-size: 34px; line-height: 1; }
.reward.big small { display: block; font: 600 10.5px var(--ui); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.reward.big b { font: 700 26px var(--ui); color: var(--ivory); }
@keyframes rewardIn { from { transform: scale(.7); opacity: 0; } }
.rel .rel-ic { width: 18px; height: 18px; object-fit: contain; vertical-align: -4px; margin-right: 6px; }
.rel { grid-template-columns: 96px 1fr 26px; } .rel > span:first-child { white-space: nowrap; }

#hud .hd-item#wheelBtn.ready { color: var(--gold-hi); }
#hud .hd-item#wheelBtn.ready span::after { content: attr(data-ready); color: var(--gold); } /* « · крутить!» на языке игрока — из game.js */

/* Затемнение между сценами: смена места или времени */
#blackout { position: absolute; inset: 0; z-index: 6; background: #050304; opacity: 0; pointer-events: none; transition: opacity .55s ease; }
#blackout.on { opacity: 1; pointer-events: auto; }
#blackout .interlude { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 24px; text-align: center; font: italic 500 36px/1.2 var(--serif); letter-spacing: .03em; color: var(--gold-hi); text-shadow: 0 0 24px rgba(227, 173, 92, .35); animation: interlude 3.6s ease forwards; }
@keyframes interlude { 0% { opacity: 0; transform: translateY(8px); } 18% { opacity: 0; } 40% { opacity: 1; transform: none; } 82% { opacity: 1; } 100% { opacity: 0; } }

/* Подсказки первого запуска — по центру экрана */
.preface { position: absolute; inset: 0; z-index: 12; display: flex; align-items: center; justify-content: center; padding: 32px 28px calc(32px + var(--bottom)); background: linear-gradient(180deg, rgba(6, 2, 5, .55), rgba(6, 2, 5, .82) 45%, rgba(6, 2, 5, .95)), url(../art/bg/home.webp) 18% center / cover; animation: pfIn .7s ease both; transition: opacity .45s ease; }
.preface.out { opacity: 0; }
.pf-in { width: 100%; max-width: 330px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.pf-in > * { animation: pfUp .8s cubic-bezier(.2, .7, .2, 1) both; }
.pf-in > :nth-child(2) { animation-delay: .12s; } .pf-in > :nth-child(3) { animation-delay: .24s; } .pf-in > :nth-child(4) { animation-delay: .36s; }
.pf-in > :nth-child(5) { animation-delay: .48s; } .pf-in > :nth-child(6) { animation-delay: .6s; } .pf-in > :nth-child(7) { animation-delay: .72s; }
.preface h2 { margin: 18px 0 10px; font: 500 40px/1.05 var(--serif); color: var(--ivory); letter-spacing: .01em; }
.preface h2 em { font-style: italic; color: var(--gold-hi); }
.preface h2 { margin-bottom: 34px; }
.pf-field { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 26px; }
.pf-field input { width: 100%; padding: 6px 0 10px; background: none; border: 0; border-bottom: 1px solid rgba(212, 168, 106, .45); outline: none; text-align: center; font: italic 500 30px var(--serif); color: var(--gold-hi); user-select: text; transition: border-color .3s; }
.pf-field input:focus { border-color: var(--gold-hi); }
.pf-field input::placeholder { color: rgba(241, 230, 216, .25); }
.pf-field span { font: 500 10.5px var(--ui); letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
.pf-field.small input { font-size: 22px; }
.pf-field.small span { letter-spacing: .04em; text-transform: none; font-size: 12.5px; line-height: 1.45; max-width: 240px; }
.pf-err { min-height: 20px; margin: 0 0 10px; font-size: 13px; color: #e48a8a; }
.pf-note { margin: 22px 0 40px; font-size: 12.5px; color: var(--muted); }
.pf-sound { display: flex; align-items: center; gap: 18px; }
.pf-sound i { width: 1px; height: 16px; background: rgba(241, 230, 216, .25); }
.pf-sound button { padding: 6px 2px; font: 500 12px var(--ui); letter-spacing: .22em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid transparent; transition: color .3s, border-color .3s; }
.preface button:focus-visible { outline: none; }
.pf-sound button.on { color: var(--gold-hi); border-color: var(--gold); }
.pf-hints { display: flex; gap: 26px; justify-content: center; margin-bottom: 44px; }
.pf-hints div { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 120px; }
.pf-hints svg { width: 30px; fill: none; stroke: rgba(241, 230, 216, .55); stroke-width: 1.3; }
.pf-hints svg .f { fill: rgba(227, 173, 92, .55); stroke: none; }
.pf-hints span { font-size: 13px; line-height: 1.45; color: var(--ivory-2); }
.pf-go { width: 100%; }
@keyframes pfIn { from { opacity: 0; } }
@keyframes pfUp { from { opacity: 0; transform: translateY(10px); } }

/* Свет у Врат (эп. 9): столб света сверху, вспышка при ударах часов */
#light { pointer-events: none; overflow: hidden; }
#light::before, #light::after { content: ''; position: absolute; opacity: 0; mix-blend-mode: screen; pointer-events: none; }
#light::before { left: 50%; top: -5%; width: 38%; height: 80%; transform: translateX(-50%); background: linear-gradient(to bottom, rgba(236, 243, 255, .9), rgba(214, 228, 255, .45) 55%, transparent); filter: blur(22px); }
#light.beam::before { animation: beamIn 2.6s ease-out forwards, beamPulse 4s 2.6s ease-in-out infinite; }
@keyframes beamIn { from { opacity: 0; transform: translateX(-50%) scaleY(.2); transform-origin: top; } to { opacity: .85; transform: translateX(-50%) scaleY(1); } }
@keyframes beamPulse { 50% { opacity: .6; } }
#light::after { inset: 0; background: radial-gradient(ellipse 30% 45% at 50% 38%, rgba(240, 246, 255, .95), rgba(190, 210, 255, .35) 45%, transparent 75%); }
#light.lit::after { opacity: .35; }
#light.surge::after { animation: surge 1.6s ease-out forwards; }
@keyframes surge { 0% { opacity: .35; } 12% { opacity: 1; } 100% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { #light.beam::before { animation: none; opacity: .75; } }

/* Отзыв: звёзды и текст */
.modal.review { align-items: center; }
.review .stars { display: flex; justify-content: center; gap: 4px; margin: 6px 0 2px; }
.review .stars button { padding: 4px; line-height: 0; transition: transform .15s; }
.review .stars svg { width: 42px; height: 42px; fill: transparent; stroke: rgba(241, 217, 168, .55); stroke-width: 1.3; stroke-linejoin: round; transition: fill .15s, stroke .15s, filter .15s; }
.review .stars button.on svg { fill: #e8b25c; stroke: #f6d9a0; filter: drop-shadow(0 0 8px rgba(232, 178, 92, .6)); }
.review .stars button:active { transform: scale(1.18); }
.review .stars-label { margin: 0 0 4px; min-height: 20px; font: 600 13px var(--ui); color: var(--gold); letter-spacing: .02em; }
.review .stars-done { color: #e8b25c; letter-spacing: 4px; } .review .stars-done i { font-style: normal; color: rgba(241, 217, 168, .2); }
.review textarea { width: 100%; min-height: 96px; resize: none; padding: 12px 14px; border-radius: 14px; border: 1px solid rgba(212, 168, 106, .35); background: rgba(12, 7, 10, .6); color: var(--ivory); font: 15px/1.45 var(--ui); outline: none; user-select: text; }
.review textarea:focus { border-color: var(--gold); }
.review .btn:disabled { opacity: .45; }

/* Язык: круглая кнопка рядом с ☰ (как она), список — как меню ☰. Видна на главном экране и в меню эпизодов */
#hud .hud-lang { position: relative; display: none; }
#hud.in-menu .hud-lang { display: block; }
#hud #langToggle { width: 34px; height: 34px; font: 600 11px var(--ui); letter-spacing: .06em; color: var(--ivory); }
#hud #langToggle.on { background: rgba(212, 168, 106, .25); border-color: rgba(212, 168, 106, .6); }
#hud .lang-drop { gap: 2px; min-width: 170px; }
#hud .lang-drop .hd-item b { width: 22px; font: 600 11px var(--ui); letter-spacing: .06em; color: var(--muted); }
#hud .lang-drop .hd-item.on { background: rgba(212, 168, 106, .18); color: var(--gold-hi); }
#hud .lang-drop .hd-item.on b, #hud .lang-drop .hd-item i { color: var(--gold); font-style: normal; }
#hud .lang-drop .hd-item i { margin-left: auto; }
/* Длинные подписи других языков переносятся, а не вылезают за край */
html:not([lang="ru"]) .home .brand p { white-space: normal; text-align: center; line-height: 1.5; }

/* Магазин: компактнее и спокойнее — больше воздуха сверху, мельче карточки */
.modal.shop { padding-top: calc(56px + var(--top, 0px)); padding-bottom: calc(20px + var(--bottom)); }
.modal.shop .panel { padding: 20px 18px 18px; gap: 14px; }
.modal.shop .shop-head { margin-top: 2px; }
.modal.shop .shop-head .x { width: 30px; height: 30px; font-size: 13px; }
.modal.shop h3 { font-size: 22px; margin: -4px 0 4px; }
.modal.shop .offer { padding: 18px 14px 12px; gap: 4px; margin-top: 6px; }
.modal.shop .offer-main .gem { width: 28px; height: 26px; }
.modal.shop .offer-main b { font-size: 34px; }
.modal.shop .offer-main span:last-child { font-size: 15px; }
.modal.shop .offer-buy { height: 44px; font-size: 16px; }
.modal.shop .packs { gap: 14px 10px; margin-top: 6px; }
.modal.shop .pack { padding: 14px 8px 10px; gap: 0; border-radius: 16px; }
.modal.shop .pack .gem-big .gem { width: 24px; height: 22px; }
.modal.shop .pack b { font-size: 19px; margin: 2px 0; }
.modal.shop .pack .price { margin-top: 6px; padding: 6px 0; font-size: 13px; }
.modal.shop .pack .tag { font-size: 9.5px; padding: 2px 8px; top: -8px; }
.modal.shop .promo-msg { font-size: 13px; line-height: 1.45; }
.modal.shop .promo-box { padding-top: 14px; }
.modal.shop .promo-row .promo-input, .modal.shop .btn.small { height: 44px; font-size: 14px; }
/* Колесо удачи внутри магазина: значок, подпись и маленькая золотая кнопка */
.shop-wheel { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; border: 1px solid rgba(212, 168, 106, .3); background: rgba(212, 168, 106, .06); }
.shop-wheel .sw-ic { font-size: 24px; line-height: 1; }
.shop-wheel .sw-t { display: flex; flex-direction: column; flex: 1; min-width: 0; text-align: left; }
.shop-wheel .sw-t b { font: 600 17px var(--serif); color: var(--ivory); }
.shop-wheel .sw-t small { font-size: 11.5px; color: var(--muted); }
.shop-wheel .sw-go { flex: none; height: 34px; padding: 0 16px; border-radius: 999px; font: 600 13px var(--ui); color: #1a0a0e; background: linear-gradient(120deg, #f1d9a8, #d4a86a 50%, #a8783e); box-shadow: 0 0 18px rgba(227, 173, 92, .3); }
.shop-wheel .sw-go.off { background: transparent; color: var(--muted); border: 1px solid var(--hair); box-shadow: none; }

/* Переключатель способа оплаты в магазине */
.pay-switch { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(12, 7, 10, .6); border: 1px solid var(--hair); }
.pay-switch button { height: 34px; border-radius: 999px; font: 600 12.5px var(--ui); color: var(--muted); transition: background .2s, color .2s; }
.pay-switch button.on { background: linear-gradient(120deg, #f1d9a8, #c9965a); color: #2a1208; }

.terms-link { margin: 4px 0 0; font-size: 12px; color: var(--muted); text-align: center; }
.terms-link a { color: var(--gold); text-decoration: none; }

.pf-consent { margin: 14px 0 0; font-size: 11.5px; line-height: 1.4; color: var(--muted); text-align: center; }
.pf-consent a { color: var(--gold); }

/* Полосы прокрутки не показываем нигде — листать можно как обычно, пальцем или колесом */
* { scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { display: none; width: 0; height: 0; }

.pf-sound.pf-vib { margin-top: 16px; }

/* Ожидание следующей ночи и «Пригласи подругу» */
.night-modal .panel { text-align: center; align-items: center; }
.night-moon { font-size: 38px; line-height: 1; filter: drop-shadow(0 0 16px rgba(241, 217, 168, .55)); animation: moonGlow 3s ease-in-out infinite; }
@keyframes moonGlow { 50% { filter: drop-shadow(0 0 26px rgba(241, 217, 168, .85)); } }
.nw-text { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.nw-text b, .nw-clock { color: var(--gold-hi); font-weight: 600; white-space: nowrap; }
.night-modal .btn, .night-modal .invite { width: 100%; }
.night-modal .btn .gem, .ep-card .gem { width: 15px; height: 14px; vertical-align: -2px; }
.night-wait-btn { background: var(--glass); color: var(--ivory); border: 1px solid rgba(212, 168, 106, .45); }
.ep-card.waiting { border-color: rgba(212, 168, 106, .35); }
.ep-card.waiting small { color: var(--gold); }
.invite { display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 14px; border-radius: 18px; text-align: left; background: linear-gradient(135deg, rgba(224, 35, 62, .16), rgba(212, 168, 106, .1)); border: 1px solid rgba(212, 168, 106, .3); }
.invite > span { font-size: 26px; }
.invite div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.invite b { font: 600 15px var(--serif); color: var(--gold-hi); }
.invite small { color: var(--muted); font-size: 12px; line-height: 1.35; }
.invite small .gem { width: 12px; height: 11px; vertical-align: -1px; }
.invite .invite-go { width: auto !important; padding: 9px 16px; font-size: 13px; flex-shrink: 0; }
.invite.small { padding: 10px 10px 10px 12px; }
.invite-btn { width: 100%; }
.invite-btn .gem { width: 14px; height: 13px; vertical-align: -2px; }

/* Подсказки в первой сцене */
.coach { position: absolute; inset: 0; z-index: 30; pointer-events: none; animation: coachIn .6s ease both; }
.coach.out { opacity: 0; transition: opacity .4s; }
@keyframes coachIn { from { opacity: 0; } }
.coach-tap { position: absolute; left: 50%; top: 38%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.coach-tap i { width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid rgba(241, 217, 168, .8); box-shadow: 0 0 22px rgba(241, 217, 168, .45); animation: coachPulse 1.6s ease-out infinite; }
@keyframes coachPulse { 0% { transform: scale(.7); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
.coach span { padding: 7px 14px; border-radius: 999px; background: rgba(12, 7, 10, .72); backdrop-filter: blur(8px); color: var(--gold-hi); font: 500 13px var(--ui); letter-spacing: .02em; white-space: nowrap; }
.coach-snd { position: absolute; top: calc(var(--top) + 64px); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 5px 5px 5px 4px; border-radius: 999px; background: rgba(12, 7, 10, .78); border: 1px solid var(--hair); backdrop-filter: blur(10px); pointer-events: auto; white-space: nowrap; }
.coach-snd span { background: none; padding: 0 6px 0 10px; color: var(--ivory-2); font-size: 12px; backdrop-filter: none; }
.coach-snd button { padding: 7px 12px; border-radius: 999px; font: 500 12px var(--ui); color: var(--muted); border: 1px solid transparent; }
.coach-snd button.on { color: var(--gold-hi); border-color: rgba(212, 168, 106, .45); background: rgba(212, 168, 106, .1); }
.coach-back { position: absolute; left: 0; top: 0; bottom: 0; display: flex; align-items: center; }
.coach-back i { width: 14px; align-self: stretch; margin: 22% 0; border-radius: 0 10px 10px 0; background: linear-gradient(90deg, rgba(241, 217, 168, .55), transparent); animation: coachEdge 1.4s ease-in-out infinite; }
@keyframes coachEdge { 50% { opacity: .35; } }
.coach-back span { margin-left: 10px; }
.ep-card small .nw-clock { display: inline; font: 600 12px var(--ui); color: var(--gold-hi); margin: 0; }
.night-modal .btn .gem { margin: 0 3px 0 5px; }

/* Карточка знакомства с героем */
.meet { position: absolute; z-index: 31; left: 16px; right: 16px; bottom: 210px; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: rgba(12, 7, 10, .86); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 0 24px color-mix(in srgb, var(--c) 25%, transparent); backdrop-filter: blur(10px); pointer-events: none; animation: meetIn .7s cubic-bezier(.2, .8, .2, 1) both; }
.meet.out { opacity: 0; transform: translateY(-10px); transition: opacity .6s, transform .6s; }
@keyframes meetIn { from { opacity: 0; transform: translateY(-14px) scale(.97); } }
.meet img { width: 40px; height: 40px; object-fit: contain; flex-shrink: 0; }
.meet div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.meet small { font: 600 9.5px var(--ui); letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.meet b { font: 600 20px/1.15 var(--serif); color: var(--c); }
.meet span { font-size: 12.5px; line-height: 1.4; color: var(--ivory-2); }