/* Question screen and the three-reel spread. Loaded last. */
main{position:relative}

/* ===== Question ===== */
/* The question block sits in the middle of the screen, on any height. */
.topics-view{flex:1;display:flex;flex-direction:column;justify-content:center;padding-top:56px;padding-bottom:56px}
.topics-view .view-heading h2{font-size:clamp(34px,4vw,48px);margin:0 0 12px}
.topics-view .topic-grid{max-width:720px;width:100%}
.topics-view .question{width:100%}
.topic{position:relative;min-height:74px;font-size:15px}
.topic{align-items:center}
/* Glyph and line icons share one centred box, level with the question text. */
.topic .topic-icon{display:grid;place-items:center;flex:none;width:26px;height:26px;font-size:20px;line-height:1;color:#a797b5;transition:color .2s}
.topic .topic-icon svg{width:22px;height:22px}
.topic.selected{background:color-mix(in srgb,var(--accent) 9%,transparent);border-color:color-mix(in srgb,var(--accent) 70%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent),0 18px 40px -24px color-mix(in srgb,var(--accent) 60%,transparent)}
.topic.selected .topic-icon{color:var(--accent)}
.topic-custom{justify-content:center}
.topics-view .question{max-width:720px}
.topics-view .question label{display:block;margin-bottom:2px}
.begin-wrap{margin-top:14px}
.topics-view .begin{min-width:300px}
.topics-view .begin .start-label{font-size:inherit;line-height:1.2}
.funds-note:not([hidden]){display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:16px;font-size:14px;color:#ecc6d6;animation:enter .35s ease}
.funds-note .secondary{padding:12px 22px;font-size:13px}

/* ===== Spread ===== */
.spread-view{--cw:clamp(120px,12vw,175px);padding-top:32px;max-width:1240px}
/* The home fan must not show through behind the reels or the profile. */
#world{transition:opacity .35s}
body:has(.spread-view) #world,body:has(.profile) #world,body:has(.topics-view) #world{opacity:0}
.spread-view .view-heading h2{font-size:clamp(34px,4vw,48px);margin:0 0 10px}
.spread-question{font-size:16px;color:#d4cbdb;max-width:640px;margin:0 auto}
/* The drums and the text columns share one width that follows the screen:
   as wide as the page allows, but never so tall that the readings drop off-screen. */
.reels-wrap{width:min(100%,1100px,calc((100svh - 250px) * 1.28));margin:18px auto 0}
.reels-stage{position:relative;width:100%;aspect-ratio:1.5;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 17%,#000 83%,transparent);mask-image:linear-gradient(180deg,transparent,#000 17%,#000 83%,transparent)}
.reels-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.reel-infos{display:grid;grid-template-columns:repeat(3,1fr);column-gap:22px;margin-top:6px}
/* Space for the texts is reserved up front, so nothing moves when they appear. */
.reel-info{text-align:center;min-height:170px}
.reel-text,.reel-note{opacity:0;transform:translateY(8px);transition:opacity .6s ease,transform .6s ease}
.reel-info.shown .reel-text,.reel-note.shown{opacity:1;transform:none}
.reel-name{display:block;font:400 clamp(19px,1.8vw,24px)/1.25 Prata,Georgia,serif;margin-bottom:8px}
.reel-text p,.reel-note p{margin:0;font-size:13px;line-height:1.7;color:#c3bacb}
.reel-text p b,.reel-note p b{color:var(--text);font-weight:600}
.reel-notes{display:none}
.spread-view .result-block h3{margin-top:0}

/* Flat reels: only without WebGL. */
.reels{display:grid;grid-template-columns:repeat(3,1fr);justify-items:center}
.reel{width:var(--cw);height:calc(var(--cw) * 1.625 * 1.72);overflow:hidden;position:relative;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 20%,#000 80%,transparent);mask-image:linear-gradient(180deg,transparent,#000 20%,#000 80%,transparent)}
.reel-strip{display:grid;row-gap:14px;will-change:transform}
.reel-card{width:var(--cw);container-type:inline-size}
.reel-card .collect-card.large{width:100%;transition:box-shadow .6s,filter .6s}
.reel-card .collect-card.large .front-id{font-size:30cqw}
.reel-card .collect-card.large .collect-name{font-size:10.5cqw;margin-top:5cqw}
.reel-card .collect-card.large .card-number{font-size:5.5cqw;top:7cqw;left:7cqw}
.reel-card .collect-card.large .placeholder-label{font-size:3.4cqw;bottom:8cqw;letter-spacing:.35em}
.reel-card .collect-card.large .placeholder-mark{font-size:22cqw}
.reel-card.back .collect-card{filter:saturate(.5) brightness(.75)}
.reel.stopped .reel-card:nth-child(2) .collect-card{box-shadow:3px 3px 0 #34303a,5px 7px 0 #1a181e,0 0 42px -6px color-mix(in srgb,var(--accent) 65%,transparent)}

@media(max-width:700px){
  .topics-view{padding-top:64px;padding-bottom:40px}
  .topics-view .begin{min-width:0;width:100%}
  .topic{min-height:62px;font-size:14px}
  /* Three drums in one row across the full width; under each card only its name,
     the readings follow below as separate cards, in order. */
  .spread-view{--cw:calc((100vw - 40px) / 3);padding:24px 12px 40px}
  .spread-view.lifted{transition:padding-top .8s cubic-bezier(.2,.8,.2,1)}
  .reels-wrap{width:100%;margin-top:12px}
  .reel-infos{column-gap:6px;margin-top:2px}
  .reel-info{min-height:0}
  .reel-name{font-size:15px;margin:0}
  .reel-info .reel-desc{display:none}
  .reel-notes{display:grid;gap:12px;margin-top:22px}
  .reel-note{padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:#ffffff05}
  .reel-note:not(.ready){display:none}
  .reel-note{transform:translateY(18px)}
  .reel-note .reel-name{font-size:19px;margin-bottom:6px}
  .reel-strip{row-gap:8px}
  .spread-view .result-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .spread-view .result-actions button{min-width:0;width:100%}
  .spread-view .result-actions .share{grid-column:1/-1}
}
@media(prefers-reduced-motion:reduce){
  .reel-text,.reel-note{transition:opacity .35s ease;transform:none}
  .funds-note:not([hidden]){animation:none}
}

/* Detailed reading: paragraphs, a quiet waiting line while it is being written, a soft fade-in. */
.result-block .reading p+p{margin-top:14px}
.result-block .reading.detailed{animation:enter .6s ease both}
.reading-wait{margin:16px 0 0;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:10px}
.reading-wait::before{content:'✦';color:var(--accent);animation:readingPulse 1.4s ease-in-out infinite}
@keyframes readingPulse{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
@media(prefers-reduced-motion:reduce){.result-block .reading.detailed,.reading-wait::before{animation:none}}
/* Waiting lines: each one fades and drifts out, the next drifts in, with a soft shimmer across the text. */
.reading-wait .wait-text{display:inline-block;transition:opacity .45s ease,transform .45s ease,filter .45s ease;
  background:linear-gradient(100deg,var(--muted) 30%,#f4f1f5 50%,var(--muted) 70%) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:waitShimmer 2.8s linear infinite}
.reading-wait .wait-text.out{opacity:0;transform:translateY(-6px);filter:blur(3px)}
@keyframes waitShimmer{from{background-position:100% 0}to{background-position:-150% 0}}
@media(prefers-reduced-motion:reduce){.reading-wait .wait-text{animation:none;transition:none}}

/* Free spreads left today, under the start button. */
.free-note{margin:12px 0 0;font-size:13px;color:var(--muted);text-align:center}

/* Deep reading: a quiet offer under the regular reading, then the bought reading in sections. */
.deep-offer{margin:18px auto 0;max-width:720px;padding:18px 22px;border:1px dashed #ffffff22;border-radius:14px;text-align:center}
.deep-offer h4{margin:0 0 8px;font-family:Prata,Georgia,serif;font-weight:400;font-size:20px;color:var(--text)}
.deep-offer p{margin:0 0 16px;font-size:14px;line-height:1.7;color:#c9c0d0}
.deep-offer p b{color:var(--text);font-weight:600}
.deep-offer .reading-wait{justify-content:center;margin:14px 0 0}
.deep-btn{display:inline-flex;align-items:center;gap:10px}
.deep-btn .deep-price,.ask-btn .deep-price{display:inline-flex;align-items:center;gap:4px;color:var(--accent);font-weight:700}
.deep-btn .deep-price .shard-icon,.ask-btn .deep-price .shard-icon{width:14px;height:14px}
.deep-block{margin-top:18px}
.deep-block.fresh{animation:enter .6s ease both}
.result-block .reading h4{margin:22px 0 8px;font:400 20px/1.3 Prata,Georgia,serif;color:var(--text)}
.result-block .reading h4:first-child{margin-top:0}
@media(prefers-reduced-motion:reduce){.deep-block.fresh{animation:none}}

/* A soft light behind the centre of the drums. It is a separate layer outside the masked stage and fades
   to nothing well before its own edges, so it is never cut off at the sides. One soft violet for every
   deck — the same tone as the question screen, so the change of screen is seamless.
   It is centred on the middle of the drums: the stage (reels-3d.js layout) is about 1.39 times wider
   than tall on wide screens (centre at 36.1% of its width) and 1.25 on phones (centre at 40%). */
.reels-wrap{position:relative;container-type:inline-size}
.reels-stage{z-index:1}
.reels-glow{position:absolute;left:50%;top:36.1cqw;width:130%;aspect-ratio:1.9;translate:-50% -50%;z-index:0;pointer-events:none;
  animation:reelGlowIn 1.2s ease both}
.reels-glow-light{position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(closest-side,#c98bff3d,#c98bff17 45%,transparent 100%)}
/* While the drums spin the light dims and brightens again (opacity only, so the violet keeps its colour);
   once the last drum stops it settles to a steady glow. */
.reels-glow.spinning .reels-glow-light{animation:reelGlowPulse 1.15s ease-in-out .4s infinite}
@keyframes reelGlowIn{from{opacity:0}to{opacity:1}}
@keyframes reelGlowPulse{0%,100%{opacity:1}50%{opacity:.45}}
@media(max-width:700px){.reels-glow{top:40cqw;width:118%;aspect-ratio:1.5}}
@media(prefers-reduced-motion:reduce){.reels-glow,.reels-glow.spinning .reels-glow-light{animation:none}}

/* The page's ambient haze sits on the left on the home screen, where the fan is; on every other screen it
   is centred, so the light around the spread drums is even on both sides. */
body:not(:has(.home)) .ambient{background:radial-gradient(ellipse at 50% 49%,#4a36601c,transparent 48%)}

/* Living light behind the question screen and the spread (aurora-bg.js): a full-screen canvas under the page. */
.aurora-bg{position:fixed;inset:0;z-index:-1;width:100%;height:100%;display:block;pointer-events:none;opacity:0;transition:opacity .8s ease}
body.aurora-on .aurora-bg{opacity:1}

/* The detailed reading did not come: a plain note under the short reading and a way to ask again. */
.reading-wait.reading-failed{flex-wrap:wrap}
.reading-wait.reading-failed::before{animation:none;opacity:.6}
.retry-reading{background:none;padding:0;color:var(--accent);font-size:13px;text-decoration:underline;text-underline-offset:3px}

/* Follow-up questions: a short dialogue under the reading, then the field to ask one more. */
.ask-block .ask-intro{margin:0 0 16px}
.qa-list{display:flex;flex-direction:column;gap:18px;margin-bottom:20px}
.result-block .qa-q{margin:0 0 8px auto;max-width:85%;width:fit-content;padding:10px 14px;border:1px solid #ffffff1f;border-radius:12px 12px 2px 12px;background:#ffffff08;color:var(--text);font-size:14px;line-height:1.6}
.result-block .qa-a p{margin:0}
.result-block .qa-a p+p{margin-top:12px}
.qa.fresh .qa-a{animation:enter .6s ease both}
.qa .reading-wait{margin-top:6px}
.ask-hints{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
/* Hint chips look like the header's «Как это работает?» pill. */
.ask-hint{padding:8px 15px;border-radius:6px;border:1px solid #ffffff1c;background-color:#ffffff07;color:#d8d0de;font-size:13px;font-weight:550}
.ask-hint:hover{color:var(--text);border-color:var(--accent)}
.ask-row{display:flex;gap:10px;align-items:center}
.ask-input{margin:0;min-height:48px;resize:none;flex:1;transition:border-color .4s cubic-bezier(.22,1,.36,1),box-shadow .4s cubic-bezier(.22,1,.36,1)}
/* Focus: the field's own border lights up, with a thin soft ring right at its edge. */
.ask-input:focus,.ask-input:focus-visible{outline:none;border-color:color-mix(in srgb,var(--accent) 70%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 16%,transparent)}
.ask-input:disabled{opacity:.5}
.result-block .ask-note{margin:10px 0 0;font-size:12px;line-height:1.6;color:var(--muted)}
@media(max-width:700px){.ask-row{flex-direction:column;align-items:stretch}.ask-btn{justify-content:center}.result-block .qa-q{max-width:100%}}
@media(prefers-reduced-motion:reduce){.qa.fresh .qa-a{animation:none}}

/* Action buttons under the reading: square corners like the spread's other buttons; they fill with the accent on hover. */
.pill-button{display:inline-flex;align-items:center;justify-content:center;gap:10px;white-space:nowrap;padding:13px 22px;border-radius:6px;border:1px solid #ffffff26;background-color:#ffffff07;color:#ece6f0;font-size:13px;font-weight:600}
.pill-button:hover:not(:disabled){background-color:var(--accent);color:#22251c;border-color:var(--accent);transform:translateY(-1px)}
/* On the accent fill the price and the shard turn dark, so they stay visible. */
.pill-button:hover:not(:disabled) .deep-price,.pill-button:hover:not(:disabled) .shard-icon{color:#22251c;filter:none}
.pill-button:disabled{opacity:.5;cursor:default}

/* Every block on the site — spread results, profile panels and menus — has the dark ground of the
   «Как это работает?» window. The window keeps its coloured glows to itself. */
.result-block,.deep-offer,.panel,.menu,.profile-nav-list{background:#120e17;border:1px solid #ffffff17;backdrop-filter:none;-webkit-backdrop-filter:none}
.result-block,.deep-offer,.panel{box-shadow:0 30px 90px #00000066}
/* The same gap between every block under the spread. */
.deep-offer{max-width:800px;margin-top:28px;padding:26px 30px;border-radius:10px}
.panel.subscription{border-color:color-mix(in srgb,var(--accent) 30%,#ffffff14)}

/* Buttons across the site change smoothly: colour, fill, outline, glow and lift ease in and out over one soft curve. */
:root{--ease-soft:cubic-bezier(.22,1,.36,1)}
.primary,.secondary,.pill-button,.ask-hint,.retry-reading,.login-button,.help-button,.icon-button,.topic{
  transition:background-color .5s var(--ease-soft),color .5s var(--ease-soft),border-color .5s var(--ease-soft),
    box-shadow .5s var(--ease-soft),transform .5s var(--ease-soft),opacity .5s var(--ease-soft),filter .5s var(--ease-soft)}
.pill-button .deep-price,.pill-button .shard-icon{transition:color .5s var(--ease-soft)}
.result-actions .primary:hover{transform:translateY(-2px)}
/* «Новый расклад», «К колодам» and the other outlined buttons: the outline turns green with a soft glow. */
.secondary:hover:not(:disabled){border-color:var(--accent);color:var(--accent);background-color:color-mix(in srgb,var(--accent) 6%,transparent);
  box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent),0 0 18px -4px color-mix(in srgb,var(--accent) 45%,transparent)}
@media(prefers-reduced-motion:reduce){.primary,.secondary,.pill-button,.ask-hint,.login-button,.help-button,.icon-button,.topic{transition-duration:.01s}}

/* «Поделиться раскладом»: a paper plane before the words. */
.result-actions .share{justify-content:center;gap:10px}
.share-icon{width:18px;height:18px;flex:none}
/* «Новый расклад» — three cards in a fan, «К колодам» — an arrow back. */
.result-actions .secondary{display:inline-flex;align-items:center;justify-content:center;gap:8px}
.action-icon{width:17px;height:17px;flex:none}
.result-actions .return:hover .action-icon{transform:translateX(-3px)}
.result-actions .again:hover .action-icon{transform:rotate(-8deg)}
.action-icon{transition:transform .5s cubic-bezier(.22,1,.36,1)}

/* Collection in the profile. Anime pictures get the same rich colour as on the home fan and in the viewer.
   On hover a sheen slides across the card, and a clear glow in the deck's colour rises behind it. */
.collection-grid .collect-card{transition:transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s cubic-bezier(.22,1,.36,1)}
.collection-grid .collect-card.anime:not(.locked){filter:saturate(1.3) contrast(1.08)}
/* The deck's light from the home fan (DECK_LIGHT in card-shine.js): violet for tarot, rose-violet for anime. */
.collection-grid .collect-card.tarot{--glow:#a77bff}
.collection-grid .collect-card.anime{--glow:#dc7cbf}
.collection-grid .collect-slot:hover .collect-card:not(.locked){box-shadow:3px 3px 0 #34303a,5px 8px 0 #1a181e,
  0 0 0 1px color-mix(in srgb,var(--glow) 50%,transparent),0 12px 30px -8px color-mix(in srgb,var(--glow) 75%,transparent),
  0 0 32px -4px color-mix(in srgb,var(--glow) 45%,transparent)}
/* A card opened in the last 24 hours pulses in the same deck colour. */
.collection-grid .collect-slot.fresh .collect-card{outline-color:color-mix(in srgb,var(--glow) 80%,transparent);animation-name:freshGlowDeck}
@keyframes freshGlowDeck{
  0%,100%{box-shadow:3px 3px 0 #34303a,5px 8px 0 #1a181e,0 0 10px 1px color-mix(in srgb,var(--glow) 40%,transparent)}
  50%{box-shadow:3px 3px 0 #34303a,5px 8px 0 #1a181e,0 0 28px 5px color-mix(in srgb,var(--glow) 70%,transparent)}}
@media(prefers-reduced-motion:reduce){.collection-grid .collect-slot.fresh .collect-card{box-shadow:0 0 18px 3px color-mix(in srgb,var(--glow) 55%,transparent)}}
.collection-grid .collect-card:not(.locked)::before{content:'';position:absolute;inset:-30% -70%;z-index:3;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(105deg,transparent 40%,#ffffff60 48%,#ffffff26 51%,transparent 57%);transform:translateX(-75%);opacity:0}
.collection-grid .collect-slot:hover .collect-card:not(.locked)::before{transform:translateX(75%);opacity:1;
  transition:transform 1.1s cubic-bezier(.3,.7,.3,1),opacity .25s ease}
@media(prefers-reduced-motion:reduce){.collection-grid .collect-card:not(.locked)::before{display:none}}
/* The name under the card turns bright white over the glow, with a dark halo so it stays readable. */
.collection-grid .collect-caption{position:relative;z-index:1;transition:color .5s cubic-bezier(.22,1,.36,1),text-shadow .5s cubic-bezier(.22,1,.36,1)}
.collection-grid .collect-slot:hover .collect-caption{color:#fff;text-shadow:0 1px 2px #000,0 0 12px #000000d9}

/* Free shards on the buy page: a bonus that is not available now shows a dimmed button (time to the next spin, or
   «Получено»). The digits keep their width, so the countdown does not twitch. */
.bonus-list .secondary:disabled{opacity:.55;cursor:default;box-shadow:none;transform:none}
.bonus-list .secondary:disabled:hover{border-color:#ffffff25;color:inherit;background-color:transparent}
.bonus-wait .js-spin-left{font-variant-numeric:tabular-nums;letter-spacing:.5px}

/* «Сделать расклад» on the home screen: the block's own fade/slide transition (deck switching) used to replace the
   button's hover transition, so the colour and lift jumped. Both now run, the hover on the same soft curve. */
.home .hero-copy>.primary{transition:opacity .26s ease,translate .26s ease,background-color .5s cubic-bezier(.22,1,.36,1),
  color .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1),box-shadow .5s cubic-bezier(.22,1,.36,1)}

/* Promo and friend-code forms: the result line sits right under the «Активировать» button, centred on it. */
.promo-form{align-items:flex-start}
/* The button column takes the place the button had: under the field at full width in narrow panels, its own
   170px next to the field on the buy page (full width again on narrow phones). */
.promo-action{display:flex;flex-direction:column;align-items:stretch;flex:1 0 auto;min-width:170px}
.buy-extras .promo-action{flex:0 0 auto}
.promo-action .secondary{width:100%}
.promo-action .promo-note{margin:8px 0 0;min-height:0}
.promo-action .promo-note:empty{display:none}
@media(max-width:520px){.buy-extras .promo-action{flex:1 1 100%}}

/* Cookie notice: a small dark card that slides up from the bottom once per device. Solid, without a backdrop blur:
   over the full-screen 3D scene a blur is redrawn every frame and slows the whole page down. */
.cookie-note{position:fixed;z-index:60;left:50%;bottom:20px;width:min(640px,calc(100% - 32px));display:flex;align-items:center;gap:18px;
  padding:14px 14px 14px 20px;border-radius:18px;background:#120e17;border:1px solid #ffffff17;box-shadow:0 18px 50px #00000080;
  opacity:0;translate:-50% 18px;pointer-events:none;
  transition:opacity .5s cubic-bezier(.22,1,.36,1),translate .5s cubic-bezier(.22,1,.36,1)}
.cookie-note.shown{opacity:1;translate:-50% 0;pointer-events:auto}
.cookie-note p{margin:0;font-size:13.5px;line-height:1.5;color:#cfc7d9}
.cookie-note a{color:#ddf3a0;text-underline-offset:3px}
.cookie-note .cookie-ok{flex:none;min-width:0;width:auto;min-height:40px;padding:0 24px;justify-content:center}
@media(max-width:600px){
  .cookie-note{flex-direction:column;align-items:stretch;gap:12px;bottom:16px;padding:16px}
  .cookie-note .cookie-ok{width:100%}
}
@media(prefers-reduced-motion:reduce){.cookie-note{transition:none}}