/*
 * The landing's sections below its first screens: the world strip, features, the next adventure, the cinema, the
 * wardrobe, play, guides, FAQ and footer. The pages (public/about/index.html, and /ru/ and /uk/ made from it) load
 * these beside themselves rather than before their first paint; the sections are laid out only as they come near
 * (content-visibility in the pages' own styles), long after these have arrived. The first screens' styles stay in
 * each page.
 */
/* ---------- world strip ---------- */
.world{padding-block:clamp(150px,14vw,230px) clamp(40px,6vw,90px)}
.world .head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:16px 40px;margin-bottom:clamp(24px,3vw,40px)}
.strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(260px,31%);gap:clamp(12px,1.4vw,20px);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px;
  scrollbar-color:var(--lantern) transparent}
.strip figure{margin:0;scroll-snap-align:start;display:grid;gap:10px}
.strip img{aspect-ratio:3/2;width:100%;object-fit:cover;border-radius:10px}
.strip figcaption{display:flex;justify-content:space-between;gap:12px;font-size:17px;color:var(--paper)}
.clock{font:400 14px/1.6 var(--pixel);color:var(--lantern);white-space:nowrap}

/* ---------- features ---------- */
.features{padding-block:clamp(40px,6vw,90px);display:grid;gap:clamp(48px,7vw,110px)}
.feature{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(20px,4vw,64px);align-items:center}
.feature.flip{grid-template-columns:minmax(0,1fr) minmax(0,1.35fr)}
.feature.flip .media{order:2}
.feature .media img,.feature .media video{width:100%;border-radius:var(--radius);box-shadow:0 30px 60px -30px rgba(0,0,0,.65)}
.feature .txt{display:grid;gap:14px}
.feature .media.trio{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.feature .media.trio img{aspect-ratio:9/16;object-fit:cover;border-radius:0;box-shadow:0 0 0 3px var(--night),0 24px 40px -24px rgba(0,0,0,.7);image-rendering:pixelated}
.tells{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px;padding:0;list-style:none}
.tells li{font-size:15px;padding:5px 11px;border-radius:999px;box-shadow:inset 0 0 0 1px currentColor}
.tells .harm{color:#ff8f8f}.tells .fire{color:#ffb070}.tells .rot{color:#b6d86b}.tells .frost{color:#9fd7ff}.tells .void{color:#caa6ff}.tells .amber{color:#ffd36b}

/* ---------- the next adventure ---------- */
.coming{padding-block:clamp(40px,6vw,90px)}
.coming-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(24px,5vw,64px);padding:clamp(24px,4vw,52px);border-radius:var(--radius);background:linear-gradient(135deg,rgba(246,184,91,.12),rgba(199,179,218,.06));box-shadow:inset 0 0 0 1px rgba(246,184,91,.3)}
.coming-card .txt{display:grid;gap:16px;align-content:start}
.coming-card h2{margin-top:14px}
.coming-card .included{color:var(--lantern);font-weight:500}
.coming-list,.full-game-list{margin:0;padding-left:1.2em;color:var(--paper-soft)}
.coming-list li+li,.full-game-list li+li{margin-top:8px}

/* ---------- play ---------- */
.play{padding-block:clamp(50px,7vw,110px)}
.guides{padding-block:0 clamp(50px,7vw,100px)}
.guides h2{margin:14px 0 clamp(24px,3vw,36px)}
.guide-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.guide-card{display:flex;flex-direction:column;border-radius:var(--radius);overflow:hidden;text-decoration:none;color:var(--paper);background:rgba(245,238,247,.05);box-shadow:inset 0 0 0 1px rgba(245,238,247,.14)}
.guide-card img{width:100%;aspect-ratio:16/9;object-fit:cover}
.guide-card span{display:block;padding:16px 20px 22px;font-size:16px;line-height:1.45;color:var(--paper-soft)}
.guide-card b{display:block;margin-bottom:6px;font:400 clamp(22px,1vw + 14px,28px)/1.1 var(--display);color:var(--paper)}
.guide-card:hover b{color:var(--lantern-hot)}
.guide-card:hover{box-shadow:inset 0 0 0 1px rgba(246,184,91,.55)}
.play h2{max-width:14ch}
.platforms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,24px);margin-top:clamp(28px,4vw,44px)}
.platform{display:grid;gap:12px;align-content:start;padding:clamp(22px,2.4vw,34px);border-radius:var(--radius);background:rgba(245,238,247,.05);box-shadow:inset 0 0 0 1px rgba(245,238,247,.14)}
.platform h3{color:var(--paper)}
.platform .price{font:600 15px/1 var(--pixel);letter-spacing:.08em;text-transform:uppercase;color:var(--lantern)}
.platform .btn{justify-self:start;margin-top:8px}
.stores-soon{margin-top:24px;display:grid;gap:14px}
.stores-soon ul{display:flex;flex-wrap:wrap;gap:10px 14px;list-style:none;padding:0;margin:0;color:var(--paper-soft)}
.stores-soon li{padding:8px 14px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(245,238,247,.2)}
/* A store that already has a page is a link the size of its whole pill: a tap target of 24 px or more (WCAG 2.5.8). */
.stores-soon a{display:block;margin:-8px -14px;padding:8px 14px;border-radius:inherit}
.night .btn-lantern{background:var(--lantern);color:var(--night);box-shadow:none}
.night .btn-lantern svg{color:var(--night)}
.night .btn-lantern:hover{background:var(--lantern-hot)}
.night .btn-store{color:var(--paper);box-shadow:inset 0 0 0 2px var(--paper-soft)}
.night .btn-store:hover{background:rgba(245,238,247,.08)}

/* ---------- faq ---------- */
.faq{padding-block:clamp(30px,5vw,70px) clamp(60px,8vw,120px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(20px,5vw,80px)}
.faq details{border-top:1px solid rgba(245,238,247,.16);padding-block:18px}
.faq details:last-child{border-bottom:1px solid rgba(245,238,247,.16)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;font:400 clamp(20px,.6vw + 17px,24px)/1.25 var(--display);color:var(--paper)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--pixel);color:var(--lantern)}
.faq details[open] summary::after{content:"−"}
.faq details p{margin-top:10px}

footer{padding-block:28px calc(env(safe-area-inset-bottom,0px) + 36px);border-top:1px solid rgba(245,238,247,.1);color:var(--paper-soft);font-size:15px}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;align-items:center}
footer nav{display:flex;flex-wrap:wrap;gap:8px 22px}
footer a{text-decoration:none}
footer a:hover{color:var(--lantern)}
footer button{appearance:none;margin:0;padding:0;border:0;background:none;font:inherit;color:inherit;cursor:pointer}
footer button[hidden]{display:none}
footer button:hover{color:var(--lantern)}
footer .footer-langs{gap:8px}
footer a[aria-current=page]{color:var(--paper)}

/* ---------- narrow screens ---------- */
@media (max-width:980px){
  .feature,.feature.flip,.coming-card,.faq{grid-template-columns:minmax(0,1fr)}
  .feature.flip .media{order:0}
  .strip{grid-auto-columns:minmax(240px,78%)}
}
@media (max-width:699px){
  .platforms,.guide-cards{grid-template-columns:minmax(0,1fr)}
}

/* ---------- the cinema and the wardrobe ---------- */
.trailer{padding-block:clamp(30px,5vw,70px);isolation:isolate}
.cinema-intro{margin-bottom:28px}
.cinema{--glow-x:50%;--glow-y:45%;position:relative;border:1px solid rgba(246,184,91,.3);border-radius:20px;padding:0 10px 10px;background:linear-gradient(140deg,#3e304d,#201a30 55%,#3a2b40);box-shadow:0 32px 70px -35px #000,inset 0 1px 0 rgba(255,217,143,.13)}
.cinema::before{content:"";position:absolute;z-index:-1;inset:-30px -8px;background:radial-gradient(ellipse at var(--glow-x) var(--glow-y),rgba(246,184,91,.14),transparent 70%);filter:blur(24px);pointer-events:none}
.cinema-bar{position:relative;min-height:56px;display:flex;align-items:center;padding:12px;color:var(--paper-soft)}
.cinema-name{font:500 17px/1.3 var(--body)}
.film-close{position:absolute;right:4px;top:50%;transform:translateY(-50%);width:44px;height:44px;border:1px solid rgba(199,179,218,.4);border-radius:50%;color:var(--paper);background:var(--deep);font:400 24px/1 var(--body);cursor:pointer}
.film-close[hidden],.film-cover[hidden]{display:none}
.film-close:hover{background:var(--dusk)}
.film-screen{position:relative;aspect-ratio:16/9;overflow:hidden;border:1px solid rgba(255,217,143,.2);border-radius:12px;background:var(--night);isolation:isolate}
.film-cover{display:block;position:absolute;inset:0;text-decoration:none;overflow:hidden}
.film-cover:focus-visible{outline-offset:-5px}
.film-cover>img{width:100%;height:100%;object-fit:cover;object-position:center 60%;filter:saturate(.9) brightness(.8);transition:transform .8s ease,filter .8s ease}
.film-cover::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse,transparent,rgba(15,11,27,.35));pointer-events:none}
.film-light{position:absolute;inset:0;background:radial-gradient(ellipse at var(--glow-x) var(--glow-y),rgba(255,217,143,.15),transparent 58%);mix-blend-mode:screen;pointer-events:none}
.film-play{position:absolute;z-index:2;inset:0;display:flex;flex-direction:column;gap:16px;align-items:center;justify-content:center;color:var(--lantern-hot);font:500 19px/1 var(--body);text-shadow:0 2px 10px #000}
.film-play svg{box-sizing:content-box;padding:24px 22px 24px 26px;border-radius:50%;background:rgba(36,25,49,.78);border:1px solid rgba(255,217,143,.7);box-shadow:0 0 0 10px rgba(255,217,143,.05),0 0 44px rgba(246,184,91,.18);transition:background .3s,box-shadow .3s,transform .3s}
.film-cover:hover>img,.film-cover:focus-visible>img{transform:scale(1.025);filter:saturate(1) brightness(.9)}
.film-cover:hover .film-play svg,.film-cover:focus-visible .film-play svg{background:var(--lantern);color:var(--night);box-shadow:0 0 0 14px rgba(255,217,143,.07),0 0 60px rgba(246,184,91,.3);transform:scale(1.05)}
.film-sparks{position:absolute;inset:0;pointer-events:none}
.film-sparks i{position:absolute;left:16%;top:68%;width:3px;height:3px;border-radius:50%;background:var(--lantern-hot);box-shadow:0 0 10px 2px rgba(246,184,91,.5);animation:film-spark 7s ease-in-out infinite;animation-play-state:paused}
.film-sparks i:nth-child(2){left:79%;top:32%;animation-delay:-3s}.film-sparks i:nth-child(3){left:32%;top:24%;animation-delay:-5s}.film-sparks i:nth-child(4){left:66%;top:76%;animation-delay:-1s}.film-sparks i:nth-child(5){left:90%;top:62%;animation-delay:-4s}.film-sparks i:nth-child(6){left:9%;top:36%;animation-delay:-2s}
.trailer[data-in-view] .film-sparks i{animation-play-state:running}
@keyframes film-spark{0%,100%{transform:translate(0,8px);opacity:.2}50%{transform:translate(8px,-14px);opacity:.9}}
.film-screen iframe{display:block;position:absolute;inset:0;width:100%;height:100%;border:0;background:var(--night)}
.video-links{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 28px;margin-top:22px;font-size:16px;color:var(--paper-soft)}
.video-links a{text-underline-offset:4px}.video-links a:hover{color:var(--lantern)}
@media(max-width:699px){.cinema{padding:0 6px 6px;border-radius:16px}.cinema-bar{padding-inline:8px}.film-screen{border-radius:8px}.film-play{gap:12px;font-size:16px}.film-play svg{width:16px;height:20px;padding:16px 14px 16px 18px}}
@media(prefers-reduced-motion:reduce){.film-cover>img,.film-play svg{transition:none}.film-cover:hover>img,.film-cover:focus-visible>img,.film-cover:hover .film-play svg,.film-cover:focus-visible .film-play svg{transform:none}.film-sparks i{animation:none}}
.wardrobe{padding-block:clamp(40px,6vw,80px)}
.wardrobe-heading{display:grid;gap:16px;margin-bottom:32px}
.wardrobe-intro{font-size:clamp(18px,1.2vw + 10px,22px)}
.wardrobe-room{display:grid;grid-template-columns:minmax(0,1fr) 340px;overflow:hidden;border:1px solid rgba(199,179,218,.25);border-radius:24px;background:linear-gradient(135deg,#34283f,#191526 60%);box-shadow:0 30px 80px -50px #000}
.wardrobe:not([data-ready]) .wardrobe-room{grid-template-columns:minmax(0,1fr)}
.wardrobe-stage{position:relative;min-width:0;min-height:560px;isolation:isolate;background:radial-gradient(ellipse at 30% 28%,rgba(246,184,91,.11),transparent 54%),radial-gradient(ellipse at 80% 48%,rgba(126,165,173,.14),transparent 55%)}
.wardrobe-stage::after{content:"";position:absolute;inset:65% 8% 10%;z-index:-1;border-radius:50%;background:radial-gradient(ellipse,rgba(169,137,191,.13),transparent 70%);filter:blur(22px)}
.wardrobe-canvas{display:block;width:100%;height:100%;min-height:560px;touch-action:pan-y;cursor:grab}
.wardrobe-canvas:active{cursor:grabbing}.wardrobe-canvas:focus-visible{outline-offset:-5px}
.wardrobe-fallback{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));height:100%;min-height:560px;align-items:center;gap:16px;padding:24px}
.wardrobe-fallback figure{margin:0;min-width:0}.wardrobe-fallback img{width:100%;border-radius:14px;aspect-ratio:3/4;object-fit:cover}.wardrobe-fallback figcaption{text-align:center;margin-top:12px;font:400 24px/1.2 var(--display)}
.wardrobe-names{position:absolute;left:8%;right:8%;bottom:64px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;text-align:center;pointer-events:none;font:400 24px/1.2 var(--display);color:var(--paper-soft)}
.wardrobe-names [data-active]{color:var(--lantern-hot)}
.wardrobe-hint{position:absolute;bottom:22px;left:16px;right:16px;max-width:none;text-align:center;font:400 14px/1.3 var(--body)}
.wardrobe-controls{padding:30px 24px 22px;border-left:1px solid rgba(199,179,218,.17);background:rgba(20,15,30,.35);display:grid;align-content:start;gap:24px;min-width:0}
.wardrobe-controls fieldset{margin:0;padding:0;border:0;min-width:0}
.wardrobe-controls legend{padding:0;margin-bottom:12px;color:var(--paper-soft);font:500 16px/1.2 var(--body)}
.hero-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.wardrobe button{font:500 16px/1.2 var(--body);color:var(--paper);cursor:pointer;border:1px solid rgba(199,179,218,.2);border-radius:10px;background:rgba(199,179,218,.04);min-height:44px;padding:10px 8px}
.wardrobe button:hover{background:rgba(199,179,218,.13);border-color:rgba(199,179,218,.5)}
.wardrobe button[aria-pressed="true"]{background:rgba(246,184,91,.12);border-color:var(--lantern);color:var(--lantern-hot)}
.gear-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.gear-options button{display:flex;align-items:center;justify-content:flex-start;gap:8px;text-align:left;font-size:15px;min-width:0}
.weapon-options{grid-template-columns:repeat(3,minmax(0,1fr))}
.weapon-options button{flex-direction:column;justify-content:center;text-align:center;gap:8px;padding:12px 6px;min-height:90px}
.weapon-options svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.gear-swatch{display:inline-block;width:15px;height:19px;flex-shrink:0;border-radius:7px 7px 4px 4px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.swatch-original{background:linear-gradient(120deg,#b76f62,#807b7a)}.swatch-fen{background:#82c2b9}.swatch-star{background:#687fab}.swatch-courier{background:#9db6dc}
.wardrobe-actions{display:flex;gap:12px;justify-content:space-between}.wardrobe-actions button{border:0;background:transparent;min-height:44px;text-underline-offset:4px;text-decoration:underline;padding:4px 0;color:var(--paper-soft)}
.wardrobe-actions .outfit-shuffle{color:var(--lantern-hot)}
.wardrobe-status{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.wardrobe [hidden]{display:none}
@media(max-width:999px){.wardrobe-room{grid-template-columns:minmax(0,1fr)}.wardrobe-controls{border-left:0;border-top:1px solid rgba(199,179,218,.17);grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.hero-picker,.wardrobe-actions{grid-column:1/-1}.wardrobe-stage,.wardrobe-canvas,.wardrobe-fallback{min-height:480px}.wardrobe-stage{height:480px}.wardrobe-names{left:16%;right:16%}}
@media(max-width:599px){.wardrobe-room{border-radius:16px}.wardrobe-stage,.wardrobe-canvas,.wardrobe-fallback{min-height:340px}.wardrobe-stage{height:340px}.wardrobe-fallback{padding:12px;gap:10px}.wardrobe-fallback figcaption{font-size:19px}.wardrobe-names{left:4%;right:4%;bottom:53px;gap:16px;font-size:21px}.wardrobe-hint{font-size:12px;bottom:19px}.wardrobe-controls{padding:24px 16px 18px;grid-template-columns:minmax(0,1fr);gap:22px}.hero-picker,.wardrobe-actions{grid-column:auto}.weapon-options button{min-height:82px}}
@media(pointer:coarse){.keyboard-hint{display:none}}