/* ============================================================
   The game community pages (/warrock-2, /gta-6, ...), drawn by
   pages/community/community-shared.mjs.
   The hero is a dark card: Studio 801's artwork with the desktop
   app's in-game overlay drawn over it, then the copy and the real
   /start door (styled by start.css, loaded before this file).
   ============================================================ */

.wr-hero{padding:128px 0 34px}

.wr-hero-card{position:relative;overflow:hidden;border-radius:24px;background:#12161a;box-shadow:0 22px 60px rgba(20,32,24,.22)}

/* ---- The artwork, with the overlay on it ---- */
.wr-stage{position:relative;aspect-ratio:1080/560;overflow:hidden;background:#1d2227}
.wr-stage-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--art-pos,50% 30%);display:block}
/* The fade also covers the game's logo in the artwork's bottom corners (the
   gallery below shows the pictures whole, logos and all). */
.wr-stage::after{content:'';position:absolute;inset:auto 0 0;height:50%;background:linear-gradient(180deg,rgba(18,22,26,0) 0%,rgba(18,22,26,.82) 52%,#12161a 78%);pointer-events:none}

/* ---- The in-game overlay ----
   Ported from mssgs-electron src/ui/overlay/game-overlay.css (.ov-*):
   same glass, same ring, same pill. Positioned inside the picture
   instead of over a whole screen, and scaled with it. */
.wr-ov{position:absolute;inset:0;z-index:1;pointer-events:none;color:#fff;font-family:ui-sans-serif,-apple-system,system-ui,'Segoe UI',Helvetica,Arial,sans-serif;opacity:.95;--ov-gap:18px}
.wr-ov-voice{position:absolute;top:var(--ov-gap);right:var(--ov-gap);display:flex;flex-direction:column;gap:6px}
.wr-ov-voice-head{display:flex;align-items:center;gap:6px;padding:2px 6px 4px;font-size:11px;font-weight:600;color:rgba(255,255,255,.5);max-width:220px}
.wr-ov-voice-head-dot{width:6px;height:6px;border-radius:50%;background:rgba(144,238,144,.9);flex:none}
.wr-ov-voice-list{display:flex;flex-direction:column;gap:4px}
.wr-ov-person{display:flex;align-items:center;gap:8px;padding:3px}
.wr-ov-avatar{position:relative;display:flex;align-items:center;justify-content:center;width:30px;height:30px;flex:none;border-radius:8px;overflow:hidden;font-size:12px;font-weight:600;color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.06)}
.wr-ov-person.speaking .wr-ov-avatar{box-shadow:0 0 0 3px rgba(144,238,144,.9),0 0 11px rgba(74,124,89,.5);animation:wr-ov-talk 1.6s ease-in-out infinite}
.wr-ov-person.muted .wr-ov-avatar{opacity:.5}
.wr-ov-name{display:none;font-size:12px;font-weight:500;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:4px;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.wr-ov-person.with-name .wr-ov-name{display:block}
.wr-ov-muted-dot{width:6px;height:6px;border-radius:50%;background:#ed4245;flex:none}
@keyframes wr-ov-talk{
  0%,100%{box-shadow:0 0 0 2.5px rgba(144,238,144,.9),0 0 8px rgba(74,124,89,.5)}
  50%{box-shadow:0 0 0 3.6px rgba(144,238,144,.9),0 0 14px rgba(74,124,89,.5)}
}

.wr-ov-chat{position:absolute;left:var(--ov-gap);bottom:calc(50% - 4px);display:flex;flex-direction:column;gap:6px;width:300px;max-width:38%}
.wr-ov-chat-line{padding:7px 10px 8px;border-radius:12px;background:rgba(18,20,24,.5);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border:1px solid rgba(255,255,255,.08);box-shadow:0 4px 16px rgba(0,0,0,.35)}
.wr-ov-chat-head{display:flex;align-items:center;gap:6px;margin-bottom:3px}
.wr-ov-avatar-sm{width:18px;height:18px;border-radius:5px;font-size:9px;box-shadow:none}
.wr-ov-chat-author{font-size:12px;font-weight:600}
.wr-ov-chat-channel{font-size:11px;color:rgba(255,255,255,.4);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wr-ov-chat-text{font-size:13px;line-height:1.35;color:rgba(255,255,255,.92);text-shadow:0 1px 3px rgba(0,0,0,.5)}

.wr-ov-clip{position:absolute;top:var(--ov-gap);left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px;max-width:60%;padding:7px 8px 7px 12px;border-radius:999px;background:rgba(18,20,24,.55);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border:1px solid rgba(255,255,255,.1);box-shadow:0 4px 16px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.08);white-space:nowrap}
.wr-ov-clip-dot{width:9px;height:9px;flex:none;border-radius:50%;background:#ed4245;box-shadow:0 0 8px rgba(237,66,69,.85);animation:wr-ov-pulse 2s ease-in-out infinite}
@keyframes wr-ov-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.wr-ov-clip-words{display:flex;flex-direction:column;gap:1px;min-width:0}
.wr-ov-clip-text{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.wr-ov-clip-sub{font-size:11px;color:rgba(255,255,255,.55);overflow:hidden;text-overflow:ellipsis}
.wr-ov-clip-save{flex:none;padding:6px 11px;border:1px solid rgba(144,238,144,.3);border-radius:999px;background:linear-gradient(135deg,rgba(74,124,89,.9) 0%,rgba(90,140,105,.9) 100%);box-shadow:0 2px 8px rgba(74,124,89,.3);font-size:12px;font-weight:600}

/* ---- Copy and the create door ---- */
.wr-hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px;align-items:start;padding:0 48px 46px;margin-top:-150px}
.wr-hero-copy{padding-top:36px}
.wr-kicker{display:inline-flex;align-items:center;gap:9px;margin:0 0 16px;padding:7px 14px;border-radius:980px;background:rgba(111,211,155,.14);border:1px solid rgba(111,211,155,.28);font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#9fe0b9}
.wr-kicker i{font-size:12px}
.wr-hero-copy h1{font-size:clamp(38px,4.6vw,60px);line-height:1.02;margin:0 0 18px;color:#fff}
.wr-hero-copy h1 span{display:block;color:#7fd3a0}
.wr-lead{font-size:17px;line-height:1.6;color:rgba(255,255,255,.78);margin:0 0 22px;max-width:560px}
.wr-chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px;margin:0;padding:0}
.wr-chips li{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:rgba(255,255,255,.88)}
.wr-chips i{color:#7fd3a0;font-size:12px}
.wr-stage-caption{margin:26px 0 0;font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.5);max-width:520px}
.wr-hero-form{scroll-margin-top:110px}
.wr-create{box-shadow:0 18px 50px rgba(0,0,0,.35)}
.wr-create .start-submit{width:100%}
.wr-create-note{margin:0;font-size:13px;line-height:1.5;color:var(--w-mut);text-align:center}

/* ---- Sections ---- */
.wr-section{padding:44px 0}
.wr-head{max-width:680px;margin:0 auto 34px;text-align:center}
.wr-head h2{font-size:clamp(30px,3.6vw,42px);line-height:1.08;margin:8px 0 14px;color:var(--w-ink)}
.wr-head p:last-child{font-size:16.5px;line-height:1.6;color:var(--w-mut);margin:0}

.wr-features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.wr-feature{padding:24px 24px 22px;border-radius:18px;background:var(--w-panel);border:1px solid var(--w-line);box-shadow:rgba(31,35,33,.05) 0 6px 22px}
.wr-feature-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(51,117,77,.1);color:var(--green-600);font-size:16px;margin-bottom:14px}
.wr-feature h3{font-size:17px;font-weight:700;margin:0 0 6px;color:var(--w-ink)}
.wr-feature p{font-size:14.5px;line-height:1.55;color:var(--w-mut);margin:0}

.wr-art-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.wr-art-item{margin:0}
.wr-art-link{display:block;border-radius:16px;overflow:hidden;background:#1d2227;box-shadow:0 12px 34px rgba(20,32,24,.16)}
.wr-art-link img{display:block;width:100%;height:auto;transition:transform .5s var(--ease-standard)}
.wr-art-link:hover img{transform:scale(1.02)}
.wr-art-link:focus-visible{outline:none;box-shadow:0 0 0 3px var(--w-focus)}
.wr-art-item figcaption{margin-top:12px;font-size:14.5px;line-height:1.5;color:var(--w-mut)}
.wr-credit{margin:22px 0 0;text-align:center;font-size:13.5px;color:var(--w-mut)}
.wr-credit a,.wr-about a,.wr-faq-answer a{color:var(--w-ink);text-decoration:underline;text-underline-offset:2px}

.wr-steps-card{padding:40px 44px;border-radius:22px;background:var(--w-panel);border:1px solid var(--w-line2);box-shadow:rgba(31,35,33,.07) 0 10px 34px}
.wr-steps-card h2{font-size:clamp(28px,3.2vw,38px);margin:0 0 26px;color:var(--w-ink);text-align:center}
.wr-step-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.wr-step{display:flex;gap:14px;align-items:flex-start}
.wr-step-num{flex:none;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--brand);color:var(--brand-contrast);font-size:15px;font-weight:700}
.wr-step h3{font-size:17px;font-weight:700;margin:4px 0 5px;color:var(--w-ink)}
.wr-step p{font-size:14.5px;line-height:1.55;color:var(--w-mut);margin:0}
.wr-actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:32px}

.wr-narrow{max-width:760px}
.wr-about h2,.wr-faq h2{font-size:clamp(26px,3vw,34px);margin:0 0 16px;color:var(--w-ink)}
.wr-about p{font-size:16px;line-height:1.65;color:var(--w-ink3);margin:0 0 14px}
.wr-disclaimer{padding:14px 16px;border-radius:12px;background:var(--w-inset);font-size:13.5px!important;line-height:1.55!important;color:var(--w-mut)!important}

.wr-faq{padding-bottom:80px}
.wr-faq-list{display:flex;flex-direction:column;gap:10px}
.wr-faq-item{border-radius:14px;background:var(--w-panel);border:1px solid var(--w-line)}
.wr-faq-item summary{cursor:pointer;list-style:none;padding:17px 48px 17px 20px;position:relative;font-size:16px;font-weight:600;color:var(--w-ink)}
.wr-faq-item summary::-webkit-details-marker{display:none}
.wr-faq-item summary::after{content:'+';position:absolute;right:20px;top:50%;transform:translateY(-50%);font-size:20px;font-weight:500;color:var(--green-600)}
.wr-faq-item[open] summary::after{content:'\2212'}
.wr-faq-item summary:focus-visible{outline:none;box-shadow:0 0 0 3px var(--w-focus);border-radius:14px}
.wr-faq-answer{padding:0 20px 18px}
.wr-faq-answer p{margin:0;font-size:15px;line-height:1.6;color:var(--w-ink3)}

/* ---- Gallery viewer (web-static/js/gallery-viewer.js) ----
   A modal <dialog>: the picture as large as the window allows, its caption,
   a close button and, for a group, arrows either side. */
.wr-art-link{cursor:zoom-in}
.lb{position:fixed;inset:0;width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:#fff;overflow:hidden}
.lb::backdrop{background:rgba(12,15,18,.9);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.lb[open]{display:flex;align-items:center;justify-content:center;animation:lb-in .2s var(--ease-standard)}
@keyframes lb-in{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}
.lb-figure{margin:0;width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:64px 88px 28px}
.lb-img{display:block;max-width:100%;max-height:calc(100vh - 150px);width:auto;height:auto;border-radius:14px;box-shadow:0 24px 70px rgba(0,0,0,.55)}
.lb-caption{max-width:760px;font-size:15px;line-height:1.5;color:rgba(255,255,255,.82);text-align:center}
.lb-btn{position:absolute;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.1);color:#fff;font-size:17px;cursor:pointer;transition:background var(--dur-base) var(--ease-standard)}
.lb-btn:hover{background:rgba(255,255,255,.2)}
.lb-btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(111,211,155,.7)}
.lb-btn[hidden]{display:none}
.lb-close{top:18px;right:18px}
.lb-prev{left:22px;top:50%;transform:translateY(-50%)}
.lb-next{right:22px;top:50%;transform:translateY(-50%)}
html.lb-open{overflow:hidden}

@media (max-width:980px){
  .wr-hero-grid{grid-template-columns:minmax(0,1fr);gap:28px;margin-top:-70px;padding:0 28px 32px}
  .wr-hero-copy{padding-top:0}
  .wr-features{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wr-step-list{grid-template-columns:minmax(0,1fr);gap:20px;max-width:520px;margin:0 auto}
}

@media (max-width:640px){
  .wr-hero{padding:96px 0 20px}
  .wr-hero .container{padding:0 12px}
  .wr-hero-card{border-radius:20px}
  .wr-stage{aspect-ratio:4/3}
  .wr-stage-art{object-position:var(--art-pos-sm,62% 30%)}
  .wr-hero-grid{margin-top:-40px;padding:0 18px 22px}
  .wr-ov{--ov-gap:10px}
  .wr-ov-chat,.wr-ov-voice-head{display:none}
  .wr-ov-avatar{width:24px;height:24px;border-radius:7px;font-size:10px}
  .wr-ov-name{font-size:11px}
  .wr-ov-clip{top:auto;bottom:calc(30% + 4px);left:10px;transform:none;max-width:calc(100% - 20px)}
  .wr-features,.wr-art-grid{grid-template-columns:minmax(0,1fr)}
  .wr-steps-card{padding:28px 20px}
  .wr-actions .btn-f{width:100%}
  .lb-figure{padding:64px 12px 84px}
  .lb-prev,.lb-next{top:auto;bottom:18px;transform:none}
  .lb-prev{left:calc(50% - 56px)}
  .lb-next{right:calc(50% - 56px)}
}

@media (prefers-reduced-motion:reduce){
  .wr-ov-person.speaking .wr-ov-avatar,.wr-ov-clip-dot{animation:none}
  .wr-art-link img{transition:none}
  .lb[open]{animation:none}
}