/* Главная до входа (лендинг). Всё ограничено #landing, чтобы не задевать платформу.
   Показ/скрытие — app.js (showAuthPage / hideLanding), логика — js/home.js. */
#landing{position:fixed;inset:0;z-index:20;overflow-y:auto;overflow-x:hidden}
#landing[hidden],html.has-token #landing{display:none}

#landing{
  --bg-primary:#100A05; --bg-secondary:#1C0E06; --bg-tertiary:#2A1408; --bg-hover:#351A0A;
  --accent:#C47820; --glow:#E8A030; --glow-soft:rgba(232,160,48,.12); --glow-border:rgba(232,160,48,.22);
  --text-primary:#F0DFBF; --text-secondary:#C4A87A; --text-muted:#8A6A44;
  --border:rgba(255,244,230,.06);
  --elev-2:0 8px 28px rgba(0,0,0,.45); --elev-3:0 16px 48px rgba(0,0,0,.55);
  --hand:'Caveat',cursive;
  --sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --wrap:1180px; --gutter:clamp(16px,4vw,40px);
}
#landing *{box-sizing:border-box}
#landing{scroll-behavior:smooth;scroll-padding-top:72px}
#landing{margin:0;background:var(--bg-primary);color:var(--text-secondary);font:15px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
#landing a{color:inherit}
#landing img{display:block;max-width:100%}
#landing h1,#landing h2,#landing h3{font-family:var(--sans);color:var(--text-primary);margin:0;font-weight:800;letter-spacing:-.005em}
#landing .wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}

/* ── кнопки ── */
#landing .lp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 22px;border-radius:9px;font:700 15px/1 var(--sans);letter-spacing:.2px;text-decoration:none;cursor:pointer;border:0;transition:transform .12s,box-shadow .2s,background .2s,color .2s;white-space:nowrap}
#landing .lp-btn:active{transform:scale(.98)}
#landing .lp-btn-primary,#landing .lp-btn-ghost{background:none;color:var(--glow)}
#landing .lp-btn-primary{font-size:16px;text-shadow:0 0 12px rgba(232,160,48,.28)}
#landing .lp-btn-ghost{color:var(--text-secondary)}
#landing .lp-btn-primary:hover,#landing .lp-btn-ghost:hover{background:rgba(232,160,48,.10);color:#FFD98A;text-shadow:0 0 8px rgba(232,160,48,.5)}
#landing .lp-btn-sm{min-height:38px;padding:0 14px;font-size:14px}
#landing .link-arrow{color:var(--glow);font-weight:700;font-size:14px;text-decoration:none;white-space:nowrap}
#landing .link-arrow:hover{color:#FFD98A}

/* ── шапка: во всю ширину, логотип в левом углу — как на текущей главной ── */
#landing .top{position:fixed;top:0;left:0;right:0;z-index:50;padding-top:env(safe-area-inset-top);transition:background .3s,backdrop-filter .3s}
#landing .top.scrolled{background:rgba(16,10,5,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
#landing .top-in{display:flex;align-items:center;gap:32px;height:72px;padding:0 clamp(16px,3.4vw,48px)}
#landing .brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-weight:700;font-size:18px;color:#F0DFBF;text-shadow:0 0 14px rgba(232,160,48,.4);flex:none}
#landing .brand img{width:34px;height:34px;object-fit:contain;animation:lp-logo-breathe 4s ease-in-out infinite}
@keyframes lp-logo-breathe{0%,100%{filter:drop-shadow(0 0 3px rgba(232,160,48,.2))}50%{filter:drop-shadow(0 0 10px rgba(232,160,48,.5))}}
#landing .nav{display:flex;gap:22px;flex:1}
#landing .nav a{text-decoration:none;font-size:14px;color:var(--text-secondary);transition:color .15s}
#landing .nav a:hover{color:var(--glow)}
#landing .top-actions{display:flex;gap:4px;margin-left:auto}
@media (max-width:860px){#landing .nav{display:none}#landing .top-actions .lp-btn:first-child{display:none}#landing .top-in{height:60px}}

/* ── hero: гифка-фонарь слева, текст справа, ровно один экран ── */
#landing .hero{position:relative;background:var(--bg-primary);overflow:hidden}
#landing .hero-art{position:absolute;top:0;left:0;bottom:0;width:62%}
#landing .hero-art img{width:100%;height:100%;object-fit:cover;object-position:left center}
#landing .hero-art::after{content:'';position:absolute;inset:0;background:
  linear-gradient(270deg,var(--bg-primary) 0%,rgba(16,10,5,.85) 16%,rgba(16,10,5,.25) 46%,rgba(16,10,5,0) 70%),
  linear-gradient(0deg,var(--bg-primary) 0%,rgba(16,10,5,0) 26%),
  linear-gradient(180deg,rgba(16,10,5,.6) 0%,rgba(16,10,5,0) 20%)}
#landing .hero .wrap{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;justify-content:flex-end}
#landing .hero-text{width:min(520px,46%);padding:96px 0 56px}
#landing .eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--glow);margin-bottom:18px}
#landing .eyebrow::before{content:'';width:22px;height:1px;background:var(--glow)}
#landing .hero h1{font-size:clamp(30px,3.2vw,42px);line-height:1.12;margin-bottom:18px;text-shadow:0 2px 22px rgba(0,0,0,.65)}
#landing .hero h1 em{font-style:normal;color:var(--glow)}
#landing .hero p{font-size:16px;line-height:1.6;margin:0 0 26px;color:#CBA67A}
#landing .hero-cta{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin-left:-14px}
#landing .hero-note{margin-top:8px;font-size:13px;color:var(--text-muted)}
#landing .hero-scroll{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);color:var(--text-muted);font-size:22px;text-decoration:none;animation:lp-bob 2.4s ease-in-out infinite}
#landing .hero-scroll:hover{color:var(--glow)}
@keyframes lp-bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,6px)}}
@media (max-width:860px){
  #landing .hero-art{position:relative;width:100%;aspect-ratio:4/3}
  #landing .hero-art::after{background:linear-gradient(0deg,var(--bg-primary) 0%,rgba(16,10,5,0) 45%)}
  #landing .hero .wrap{min-height:0;margin-top:-56px;justify-content:flex-start}
  #landing .hero-text{width:100%;padding:0 0 44px}
  #landing .hero-scroll{display:none}
}

/* ── секции ── */
#landing section{padding:clamp(56px,8vw,96px) 0}
#landing .sec-head{display:flex;align-items:baseline;gap:20px;margin-bottom:32px}
#landing .sec-head h2{font-size:clamp(22px,2.2vw,26px);flex:none}
#landing .sec-head .rule{flex:1;height:1px;background:linear-gradient(90deg,rgba(196,120,32,.22),transparent)}
#landing .sec-head .link-arrow{margin-left:auto}
#landing .sec-alt{background:var(--bg-secondary)}
@media (max-width:600px){#landing .sec-head{flex-wrap:wrap;gap:6px 16px}#landing .sec-head h2{flex:1 1 auto}#landing .sec-head .rule{display:none}}

/* ── игры: слайдшоу. Фон = обложка/скриншот/трейлер ЭТОЙ игры, клик по фону — открыть игру ── */
#landing .showcase{position:relative;overflow:hidden;padding:0;background:var(--bg-primary)}
#landing .sc-bg{position:absolute;inset:0;z-index:0}
#landing .sc-layer{position:absolute;inset:0;background:center/cover no-repeat;opacity:0;transform:scale(1.04);transition:opacity 1.1s ease,transform 9s ease-out;overflow:hidden}
#landing .sc-layer.on{opacity:1;transform:scale(1)}
#landing .sc-layer video{width:100%;height:100%;object-fit:cover}
#landing .sc-layer iframe{position:absolute;top:50%;left:50%;width:max(100%,177.78vh);height:max(100%,56.25vw);transform:translate(-50%,-50%);border:0;pointer-events:none}
#landing .sc-bg::after{content:'';position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(180deg,var(--bg-primary) 0%,rgba(16,10,5,.35) 10%,rgba(16,10,5,0) 20%,rgba(16,10,5,0) 76%,rgba(28,14,6,.75) 91%,var(--bg-secondary) 100%),
  linear-gradient(90deg,rgba(16,10,5,.9) 0%,rgba(16,10,5,.66) 26%,rgba(16,10,5,.1) 52%,rgba(16,10,5,0) 100%)}
#landing .sc-hit{position:absolute;inset:0;z-index:1;cursor:pointer}
#landing .sc-inner{position:relative;z-index:2;pointer-events:none;min-height:clamp(600px,52vw,940px);display:flex;flex-direction:column;padding-top:clamp(56px,7vw,88px);padding-bottom:clamp(40px,5vw,64px)}
#landing .sc-inner .sec-head,#landing .sc-info,#landing .sc-media,#landing .sc-dots{pointer-events:auto}
#landing .sc-stage{flex:1;display:flex;flex-direction:column;justify-content:center;gap:28px}
#landing .sc-info{max-width:520px;animation:lp-sc-in .55s ease both}
@keyframes lp-sc-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
#landing .sc-badge{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--glow);margin-bottom:14px;text-shadow:0 0 10px rgba(232,160,48,.35)}
#landing .sc-title{display:flex;align-items:center;gap:14px;margin-bottom:14px}
#landing .sc-title img{width:64px;height:64px;object-fit:contain;filter:drop-shadow(0 4px 12px rgba(0,0,0,.75));flex:none}
#landing .sc-title h3{font-size:clamp(26px,2.8vw,34px);line-height:1.1;text-shadow:0 2px 18px rgba(0,0,0,.8)}
#landing .sc-desc{margin:0 0 20px;font-size:15.5px;line-height:1.6;color:#D2B58A;text-shadow:0 1px 10px rgba(0,0,0,.8);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
#landing .sc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-left:-14px}
#landing .sc-actions .muted{font-size:13px;color:var(--text-muted);padding-left:6px}
/* лента медиа ЭТОЙ игры: трейлер + скриншоты со страницы игры */
#landing .sc-media{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;max-width:100%;padding:6px 2px 10px;margin:-6px -2px 0;-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 60px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 60px),transparent);animation:lp-sc-in .55s .08s ease both}
#landing .sc-media::-webkit-scrollbar{display:none}
#landing .sc-media.fits{-webkit-mask-image:none;mask-image:none}
#landing .sc-shot{position:relative;flex:none;width:150px;aspect-ratio:16/9;border-radius:8px;background:#1a0e04 center/cover no-repeat;cursor:pointer;opacity:.78;box-shadow:0 6px 18px rgba(0,0,0,.6);transition:opacity .2s,transform .2s,box-shadow .2s;border:0;padding:0}
#landing .sc-shot:hover{opacity:.9;transform:translateY(-2px)}
#landing .sc-shot.on{opacity:1;box-shadow:0 6px 22px rgba(0,0,0,.6),0 0 16px rgba(232,160,48,.4)}
#landing .sc-shot.play::after{content:'▶';position:absolute;inset:0;display:grid;place-items:center;color:#FFF5E4;font-size:20px;text-shadow:0 0 12px rgba(0,0,0,.9);background:rgba(10,5,1,.25);border-radius:8px}
#landing .sc-shot.play::before{content:'Трейлер';position:absolute;left:8px;bottom:6px;z-index:1;font:700 10.5px var(--sans);letter-spacing:.04em;color:#FFF5E4;text-shadow:0 1px 6px rgba(0,0,0,.9)}
/* стрелки по бокам и точки снизу (как на текущей главной) */
#landing .sc-arrow{position:absolute;top:50%;z-index:3;width:52px;height:52px;margin-top:-26px;border-radius:50%;border:0;background:none;color:var(--text-secondary);font-size:30px;line-height:1;cursor:pointer;transition:background .2s,color .2s,text-shadow .2s}
#landing .sc-arrow:hover{background:rgba(232,160,48,.10);color:#FFD98A;text-shadow:0 0 8px rgba(232,160,48,.5)}
#landing .sc-prev{left:clamp(4px,1.4vw,24px)}#landing .sc-next{right:clamp(4px,1.4vw,24px)}
#landing .sc-dots{display:flex;gap:9px;justify-content:center;margin-top:28px}
#landing .sc-dot{position:relative;width:9px;height:9px;border-radius:9px;background:rgba(196,120,32,.32);cursor:pointer;border:0;padding:0;overflow:hidden;transition:width .3s,background .2s}
#landing .sc-dot:hover{background:rgba(232,160,48,.55)}
#landing .sc-dot.on{width:34px;background:rgba(232,160,48,.25)}
#landing .sc-dot i{position:absolute;inset:0;width:0;background:var(--glow);box-shadow:0 0 8px rgba(232,160,48,.6)}
#landing .sc-dot.on i{width:100%}
#landing .sc-dot.run i{width:0;animation:lp-sc-prog var(--dur) linear forwards}
@keyframes lp-sc-prog{to{width:100%}}
#landing .sc-empty{min-height:420px}
@media (max-width:860px){
  #landing .sc-bg::after{background:linear-gradient(180deg,var(--bg-primary) 0%,rgba(16,10,5,.15) 16%,rgba(16,10,5,.3) 38%,rgba(16,10,5,.92) 64%,var(--bg-secondary) 100%)}
  #landing .sc-inner{min-height:0}
  #landing .sc-stage{gap:18px;padding-top:min(40vw,260px)}
  #landing .sc-media{margin:0 calc(-1 * var(--gutter));padding:6px var(--gutter) 10px}
  #landing .sc-shot{width:118px}
  #landing .sc-arrow{display:none}
}

/* ── о нас / платформа ── */
#landing .story{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,560px) 1fr;min-height:clamp(420px,38vw,620px);gap:clamp(32px,5vw,72px);align-items:center}
#landing .story-text h2{font-size:clamp(24px,2.6vw,30px);line-height:1.2;margin-bottom:18px}
#landing .story-text p{margin:0 0 14px;font-size:15px;line-height:1.65;text-shadow:0 1px 10px rgba(16,10,5,.95)}
#landing .story-text p.lead{color:#CBA67A;font-size:16px}
#landing .story-sign{font-family:var(--hand);font-size:24px;color:var(--glow);margin-top:6px}
#landing #lp-about{position:relative;overflow:hidden}
#landing #lp-about::before{content:'';position:absolute;top:0;bottom:0;right:0;width:66%;background:url('/images/home-hero.webp') 30% 50%/cover no-repeat;opacity:.85;-webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 22%,#000 55%),linear-gradient(180deg,transparent 0%,#000 18%,#000 80%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 22%,#000 55%),linear-gradient(180deg,transparent 0%,#000 18%,#000 80%,transparent 100%);mask-composite:intersect}
#landing #lp-about::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(28,14,6,0) 70%,var(--bg-primary) 100%)}
@media (max-width:860px){#landing #lp-about::before{width:100%;opacity:.3}#landing #lp-about::after{background:linear-gradient(180deg,var(--bg-secondary) 0%,rgba(28,14,6,.7) 30%,rgba(28,14,6,.85) 100%)}}
@media (max-width:860px){#landing .story{grid-template-columns:1fr}}

/* ── дневник ── */
#landing .devlog{display:flex;flex-direction:column;gap:28px}
#landing #lp-devlog{position:relative;overflow:hidden}
#landing #lp-devlog::before{content:'';position:absolute;top:0;bottom:0;left:0;width:52%;background:url('/images/home-devlog.webp') 50% 30%/cover no-repeat;opacity:.9;
  -webkit-mask-image:linear-gradient(270deg,transparent 0%,rgba(0,0,0,.4) 25%,#000 58%),linear-gradient(180deg,transparent 0%,#000 16%,#000 82%,transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(270deg,transparent 0%,rgba(0,0,0,.4) 25%,#000 58%),linear-gradient(180deg,transparent 0%,#000 16%,#000 82%,transparent 100%);mask-composite:intersect}
#landing .devlog-wrap{position:relative;z-index:1;display:flex;justify-content:flex-end}
#landing .devlog-col{width:min(680px,56%)}
#landing .devlog-col .sec-head .social{margin-left:auto;flex:none}
@media (max-width:860px){
  #landing #lp-devlog::before{width:100%;opacity:.28;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 20%,#000 70%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 20%,#000 70%,transparent 100%)}
  #landing .devlog-col{width:100%}
}
#landing .post{display:flex;gap:18px;text-decoration:none;border-radius:12px;transition:background .2s}
#landing .post-img{position:relative;flex:none;width:168px;aspect-ratio:16/10;border-radius:10px;background:#1a0e04 center/cover no-repeat;box-shadow:0 8px 24px rgba(0,0,0,.5);transition:transform .35s ease}
#landing .post:hover .post-img{transform:scale(1.02)}
#landing .post-body{display:flex;flex-direction:column;gap:6px;min-width:0;padding-top:2px}
#landing .post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:12px;color:var(--text-muted)}
#landing .post-tag{color:var(--glow);font-weight:700;letter-spacing:.02em}
#landing .post h3{font-size:16px;line-height:1.3;transition:color .2s}
#landing .post:hover h3{color:#FFD98A;text-shadow:0 0 10px rgba(232,160,48,.35)}
#landing .post p{margin:0;font-size:13.5px;line-height:1.55;text-shadow:0 1px 8px rgba(16,10,5,.9);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#landing .post-more{font-size:13px;font-weight:700;color:var(--glow);margin-top:4px}
#landing .post.big{flex-direction:column;gap:18px}
#landing .post.big .post-img{width:100%;aspect-ratio:16/9;border-radius:14px;box-shadow:var(--elev-3)}
#landing .post.big .post-img::after{content:'';position:absolute;inset:0;border-radius:14px;background:linear-gradient(0deg,rgba(16,10,5,.55) 0%,rgba(16,10,5,0) 40%)}
#landing .post.big h3{font-size:clamp(19px,1.8vw,23px)}
#landing .post.big p{-webkit-line-clamp:3;font-size:15px}
#landing .devlog-side{display:flex;flex-direction:column;gap:22px}
#landing .devlog-empty{padding:12px 0;color:var(--text-secondary)}
@media (max-width:860px){#landing .post-img{width:112px}}

/* ── призыв ── */
#landing .join{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--bg-primary) 0%,var(--bg-secondary) 45%,var(--bg-secondary) 75%,#0B0703 100%)}
#landing .join::before{content:'';position:absolute;inset:0;background:url('/images/lazy-guild-lantern.gif') 0% 60%/cover no-repeat;opacity:.3;transform:scaleX(-1);filter:blur(2px) saturate(1.1);-webkit-mask-image:linear-gradient(90deg,transparent 25%,#000 85%),linear-gradient(180deg,transparent 0%,#000 30%,#000 75%,transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 25%,#000 85%),linear-gradient(180deg,transparent 0%,#000 30%,#000 75%,transparent 100%);mask-composite:intersect}
#landing .join .wrap{position:relative}
#landing .join h2{font-size:clamp(22px,2.6vw,30px);line-height:1.25;max-width:640px;margin-bottom:14px}
#landing .join p{max-width:560px;margin:0 0 24px;font-size:15px}
#landing .join-row{display:flex;flex-wrap:wrap;gap:4px;align-items:center;margin-left:-14px}

/* ── подвал ── */
#landing footer{background:#0B0703;padding:40px 0 calc(32px + env(safe-area-inset-bottom));font-size:13.5px}
#landing .foot{display:flex;flex-wrap:wrap;gap:24px 40px;align-items:flex-start;justify-content:space-between}
#landing .foot-links{display:flex;flex-wrap:wrap;gap:8px 20px}
#landing .foot-links a{text-decoration:none;color:var(--text-muted)}
#landing .foot-links a:hover{color:var(--glow)}
#landing .social{display:flex;gap:10px}
#landing .social a{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--bg-tertiary);color:var(--text-secondary);transition:color .15s,background .15s}
#landing .social a:hover{color:var(--glow);background:var(--bg-hover)}
#landing .social svg{width:19px;height:19px}
#landing .foot-meta{width:100%;display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;color:#5E4528;font-size:12.5px;padding-top:4px}
#landing .foot-meta a{color:var(--text-muted);text-decoration:none}
#landing .foot-meta a b{color:var(--glow)}

/* ── появление при скролле ── */
#landing .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease}
#landing .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){#landing *{transition:none!important;animation:none!important}#landing .reveal{opacity:1;transform:none}#landing{scroll-behavior:auto}}


/* шапка — липкая внутри прокручиваемого #landing (fixed перекрывал бы его полосу прокрутки) */
#landing .top{position:sticky;margin-bottom:-72px}
@media (max-width:860px){#landing .top{margin-bottom:-60px}}