@import url('style.css');

body.subpage{min-height:100vh;background:#070707;color:var(--fg)}
body.subpage::before{content:"";position:fixed;inset:0;z-index:-2;background:#070707}
body.subpage::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(255,36,56,.065) 1px,transparent 1px),linear-gradient(90deg,rgba(255,36,56,.065) 1px,transparent 1px);background-size:72px 72px}
.sub-topbar{height:88px;padding:0 var(--pad);display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid var(--line);position:fixed;top:0;left:0;right:0;background:rgba(7,7,7,.9);backdrop-filter:blur(16px);z-index:70}
.sub-home,.sub-nav a{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#b8b8b2;text-decoration:none}
.sub-home{white-space:nowrap}.sub-home strong{color:#fff}.sub-nav{display:flex;align-items:center;gap:26px}.sub-nav a:hover,.sub-home:hover{color:#fff}.sub-nav .join-link{background:var(--red);color:#fff;padding:13px 18px;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.sub-menu{display:none;background:none;border:0;color:#fff;font-size:11px;letter-spacing:.14em}
.sub-main{padding-top:88px}.subhero{min-height:58vh;padding:110px var(--pad) 66px;display:grid;grid-template-columns:1.25fr .55fr;gap:48px;align-items:end;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.subhero::after{content:"";position:absolute;width:440px;height:440px;border:1px solid rgba(255,36,56,.28);right:-120px;top:-90px;transform:rotate(14deg);clip-path:polygon(50% 0,95% 25%,95% 75%,50% 100%,5% 75%,5% 25%)}
.subhero-copy{position:relative;z-index:2}.subhero .section-index{display:block;margin-bottom:28px}.subhero h1{font-size:clamp(70px,10vw,150px);line-height:.77;letter-spacing:-.07em;margin:0;text-transform:uppercase}.subhero h1 em{display:block;color:var(--red);font-style:normal}.subhero-side{position:relative;z-index:2;max-width:440px;border-left:1px solid var(--red);padding-left:24px;color:#aaa;line-height:1.6}.subhero-side strong{color:#fff}.page-section{padding:92px var(--pad);border-bottom:1px solid var(--line)}
.section-kicker{font-size:10px;letter-spacing:.2em;color:#a1a19b;text-transform:uppercase}.section-title{font-size:clamp(48px,6vw,92px);line-height:.84;letter-spacing:-.055em;margin:14px 0 42px;text-transform:uppercase}.section-title em{font-style:normal;color:var(--red)}
.lead{font-size:clamp(20px,2vw,30px);line-height:1.45;max-width:900px;color:#c7c7c2}.muted{color:#91918c}.mono{font-family:monospace}.red{color:var(--red)}

/* Games index */
.world-stack{display:grid;gap:16px}.world-card{display:grid;grid-template-columns:1.05fr .95fr;min-height:500px;border:1px solid #2b2b2b;background:#0a0a0a;color:#fff;text-decoration:none;overflow:hidden;position:relative}.world-card:hover .world-arrow{transform:translate(7px,-7px)}.world-art{position:relative;overflow:hidden}.world-art img{width:100%;height:100%;object-fit:cover;filter:saturate(.72) contrast(1.12);transition:transform .6s}.world-card:hover .world-art img{transform:scale(1.025)}.world-art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 35%,rgba(7,7,7,.76))}.world-copy{padding:48px;display:flex;flex-direction:column;justify-content:space-between;position:relative}.world-copy h2{font-size:clamp(52px,6vw,94px);line-height:.8;letter-spacing:-.06em;margin:24px 0;text-transform:uppercase}.world-copy h2 em{color:var(--red);font-style:normal}.world-copy p{max-width:540px;color:#a9a9a4;line-height:1.55}.world-stats{display:flex;gap:22px;flex-wrap:wrap}.world-stats span{font-size:10px;letter-spacing:.14em;color:#898984;text-transform:uppercase}.world-stats strong{display:block;color:#fff;font-size:24px;letter-spacing:-.03em;margin-top:5px}.world-arrow{position:absolute;right:34px;bottom:28px;color:var(--red);font-size:42px;transition:.25s}.abyss-visual{height:100%;min-height:430px;background:radial-gradient(circle at 52% 44%,rgba(255,36,56,.34),transparent 12%),radial-gradient(circle at 50% 48%,#290610 0,#130309 23%,#070707 48%);position:relative;overflow:hidden}.abyss-visual::before,.abyss-visual::after{content:"";position:absolute;left:50%;top:50%;width:430px;height:430px;border:1px solid rgba(255,36,56,.43);transform:translate(-50%,-50%) rotate(45deg)}.abyss-visual::after{width:270px;height:270px;border-color:rgba(255,255,255,.2);transform:translate(-50%,-50%) rotate(20deg)}.abyss-word{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:clamp(68px,9vw,150px);font-weight:900;letter-spacing:-.09em;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.76);transform:rotate(-7deg)}

/* Campaign pages */
.campaign-hero{min-height:78vh;padding:126px var(--pad) 66px;position:relative;display:flex;align-items:end;border-bottom:1px solid var(--line);overflow:hidden}.campaign-bg{position:absolute;inset:0}.campaign-bg img{width:100%;height:100%;object-fit:cover;filter:saturate(.62) contrast(1.16)}.campaign-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,7,7,.97) 0,rgba(7,7,7,.84) 42%,rgba(7,7,7,.25) 78%),linear-gradient(0deg,rgba(7,7,7,.78),transparent 45%)}.campaign-hero .hero-data{position:relative;z-index:2;max-width:980px}.campaign-hero h1{font-size:clamp(76px,11vw,166px);line-height:.74;letter-spacing:-.075em;margin:22px 0 28px;text-transform:uppercase}.campaign-hero h1 em{font-style:normal;color:var(--red);display:block}.campaign-tags{display:flex;gap:10px;flex-wrap:wrap}.campaign-tags span{font-size:10px;letter-spacing:.14em;border:1px solid #444;padding:9px 12px;background:rgba(7,7,7,.68)}.campaign-intro{display:grid;grid-template-columns:1fr .72fr;gap:80px}.campaign-intro p{font-size:20px;line-height:1.65;color:#b3b3ae}.feature-list{display:grid;gap:1px;background:#252525;border:1px solid #252525}.feature-list div{background:#090909;padding:24px}.feature-list strong{display:block;font-size:20px;margin-bottom:8px}.feature-list span{color:#8e8e89;line-height:1.45}.groups{display:grid;gap:10px}.group-row{display:grid;grid-template-columns:150px 1fr 160px 140px 48px;align-items:center;gap:20px;min-height:96px;border-top:1px solid #303030;padding:16px 0}.group-row:last-child{border-bottom:1px solid #303030}.group-day{font-size:11px;letter-spacing:.16em;color:#9b9b96;text-transform:uppercase}.group-time{font-size:clamp(24px,2.3vw,36px);font-weight:900;letter-spacing:-.03em}.group-slots{font-size:14px;color:#b1b1ac}.group-status{font-size:10px;letter-spacing:.14em;text-transform:uppercase}.group-status.open{color:var(--red)}.group-status.live{color:#c5c5c0}.group-arrow{font-size:24px;color:var(--red);text-align:right}.campaign-cta{display:flex;align-items:center;justify-content:space-between;gap:28px;background:var(--red);padding:48px}.campaign-cta h3{font-size:clamp(38px,5vw,72px);line-height:.86;letter-spacing:-.055em;margin:0;text-transform:uppercase}.campaign-cta p{color:#280005;max-width:480px}.campaign-cta .slash-btn{background:#fff;color:#111}
.abyss-campaign-bg{background:radial-gradient(circle at 72% 42%,rgba(255,36,56,.26),transparent 15%),radial-gradient(circle at 70% 45%,#2b0610 0,#100207 22%,#070707 52%)}.abyss-campaign-bg::before{content:"";position:absolute;width:600px;height:600px;right:8%;top:13%;border:1px solid rgba(255,36,56,.4);transform:rotate(45deg)}.abyss-campaign-bg::after{background:linear-gradient(90deg,rgba(7,7,7,.98),rgba(7,7,7,.66) 58%,rgba(7,7,7,.15))}

/* Schedule */
.week-grid{display:grid;gap:1px;background:#262626;border:1px solid #262626}.day-row{display:grid;grid-template-columns:120px 1fr;min-height:126px;background:#090909}.day-name{padding:25px;border-right:1px solid #262626;display:flex;flex-direction:column;justify-content:space-between}.day-name strong{font-size:24px}.day-name span{font-size:10px;letter-spacing:.13em;color:#7f7f7a}.day-events{padding:18px;display:grid;gap:10px}.event-chip{display:grid;grid-template-columns:145px 1fr 120px;gap:18px;align-items:center;background:#0e0e0e;border-left:3px solid #484848;padding:17px 20px;color:#fff;text-decoration:none}.event-chip.open{border-left-color:var(--red);background:linear-gradient(90deg,rgba(255,36,56,.13),#0e0e0e 30%)}.event-chip time{font-family:monospace;color:#aaa}.event-chip strong{font-size:20px}.event-chip span{text-align:right;font-size:10px;letter-spacing:.12em;color:#94948f;text-transform:uppercase}.timezone-note{padding:20px 24px;border:1px solid #2c2c2c;border-top:0;color:#91918c;font-size:12px;letter-spacing:.08em}

/* About */
.about-hero{min-height:78vh;padding:120px var(--pad) 0;display:grid;grid-template-columns:1fr .82fr;align-items:end;border-bottom:1px solid var(--line);overflow:hidden;position:relative}.about-copy{padding-bottom:72px;position:relative;z-index:2}.about-copy h1{font-size:clamp(74px,10vw,150px);line-height:.75;letter-spacing:-.07em;margin:20px 0 32px;text-transform:uppercase}.about-copy h1 em{color:var(--red);font-style:normal}.about-copy p{font-size:20px;line-height:1.55;color:#b3b3ae;max-width:650px}.about-portrait{height:min(75vh,850px);display:flex;align-items:end;justify-content:center;position:relative}.about-portrait::before{content:"";position:absolute;inset:20% 8% 0;background:var(--red);clip-path:polygon(18% 0,100% 9%,83% 100%,0 92%);opacity:.9}.about-portrait img{height:100%;max-width:100%;object-fit:contain;object-position:bottom center;position:relative;z-index:2;filter:drop-shadow(-25px 0 45px rgba(0,0,0,.45))}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#282828;border:1px solid #282828}.metric{background:#090909;padding:32px}.metric strong{display:block;font-size:clamp(36px,4vw,62px);letter-spacing:-.055em}.metric span{display:block;margin-top:8px;font-size:10px;letter-spacing:.14em;color:#8f8f89;text-transform:uppercase}.timeline{display:grid;grid-template-columns:160px 1fr;gap:0;border-top:1px solid #2d2d2d}.timeline:last-child{border-bottom:1px solid #2d2d2d}.timeline-year{padding:28px 0;font-size:24px;font-weight:900;color:var(--red)}.timeline-text{padding:28px;border-left:1px solid #2d2d2d;color:#b0b0ab;line-height:1.55}.principles{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.principle{min-height:220px;border:1px solid #2c2c2c;background:#0a0a0a;padding:30px;display:flex;flex-direction:column;justify-content:space-between}.principle b{font-size:11px;letter-spacing:.16em;color:var(--red)}.principle h3{font-size:clamp(30px,3vw,46px);line-height:.9;letter-spacing:-.045em;margin:0 0 12px;text-transform:uppercase}.principle p{color:#969691;line-height:1.5;margin:0}

/* Reviews */
.review-intro{display:grid;grid-template-columns:1fr .6fr;gap:60px;align-items:end}.review-count{font-size:clamp(80px,10vw,150px);font-weight:900;letter-spacing:-.08em;color:var(--red);line-height:.7}.review-count span{display:block;font-size:11px;letter-spacing:.17em;color:#92928d;margin-top:22px}.review-columns{columns:3 320px;column-gap:18px}.review-card{break-inside:avoid;margin:0 0 18px;background:#0b0b0b;border:1px solid #2b2b2b;padding:10px;position:relative}.review-card button{all:unset;display:block;cursor:zoom-in;width:100%}.review-card img{display:block;width:100%;height:auto;background:#111}.review-meta{display:flex;justify-content:space-between;padding:13px 4px 3px;font-size:9px;letter-spacing:.13em;color:#7f7f7a;text-transform:uppercase}.review-modal{position:fixed;inset:0;background:rgba(0,0,0,.94);z-index:200;display:none;align-items:center;justify-content:center;padding:26px}.review-modal.open{display:flex}.review-modal img{max-width:min(1200px,94vw);max-height:91vh;object-fit:contain}.review-modal button{position:absolute;right:26px;top:22px;background:var(--red);border:0;color:#fff;width:44px;height:44px;font-size:20px;cursor:pointer}

/* Join */
.contact-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:12px}.contact-card{min-height:280px;border:1px solid #2c2c2c;background:#0a0a0a;padding:34px;color:#fff;text-decoration:none;display:flex;flex-direction:column;justify-content:space-between;transition:.2s}.contact-card:hover{transform:translateY(-4px);border-color:#555}.contact-card.primary{background:var(--red);border-color:var(--red)}.contact-card .network{font-size:10px;letter-spacing:.18em;color:#92928d}.contact-card.primary .network{color:#ffd1d6}.contact-card h2{font-size:clamp(38px,5vw,72px);line-height:.84;letter-spacing:-.055em;margin:0;text-transform:uppercase}.contact-card p{color:#a0a09b;margin:0}.contact-card.primary p{color:#300007}.contact-card b{font-size:28px}.open-seat{padding:36px;border:1px solid var(--red);background:linear-gradient(90deg,rgba(255,36,56,.16),rgba(7,7,7,.1));display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center}.open-seat h3{font-size:clamp(34px,4vw,58px);letter-spacing:-.045em;margin:5px 0;text-transform:uppercase}.open-seat p{color:#aaa;margin:0}.discord-note{font-family:monospace;color:#b7b7b2}

/* News */
.feed{display:grid;gap:12px}.feed-card{display:grid;grid-template-columns:minmax(230px,34%) 1fr;border:1px solid #2b2b2b;background:#0a0a0a;color:#fff;text-decoration:none;overflow:hidden}.feed-media{min-height:270px;overflow:hidden;background:#111}.feed-media img{width:100%;height:100%;object-fit:cover}.feed-copy{padding:34px;display:flex;flex-direction:column;justify-content:space-between}.feed-copy h2{font-size:clamp(38px,4vw,66px);line-height:.86;letter-spacing:-.05em;margin:16px 0}.feed-copy p{color:#9d9d98;line-height:1.55}.feed-copy small{font-size:10px;letter-spacing:.15em;color:#8b8b86}.sync-banner{display:flex;align-items:center;justify-content:space-between;gap:25px;border:1px solid #2d2d2d;padding:24px 28px}.sync-banner span{color:#999}.sync-banner a{color:#fff;text-decoration:none;border-bottom:1px solid var(--red);padding-bottom:4px}

@media(max-width:1000px){
  .sub-nav{display:none;position:fixed;left:0;right:0;top:88px;background:#080808;padding:24px var(--pad) 30px;flex-direction:column;align-items:flex-start;border-bottom:1px solid #333}.sub-nav.open{display:flex}.sub-menu{display:block}.subhero{grid-template-columns:1fr;min-height:52vh}.subhero-side{max-width:720px}.world-card{grid-template-columns:1fr;min-height:0}.world-art,.abyss-visual{height:380px}.world-art::after{background:linear-gradient(0deg,rgba(7,7,7,.8),transparent 55%)}.campaign-intro{grid-template-columns:1fr;gap:42px}.group-row{grid-template-columns:110px 1fr 110px 100px}.group-arrow{display:none}.about-hero{grid-template-columns:1fr;min-height:980px;padding-top:120px}.about-copy{padding-bottom:0}.about-portrait{height:560px}.metric-grid{grid-template-columns:repeat(2,1fr)}.review-intro{grid-template-columns:1fr}.contact-grid{grid-template-columns:1fr}.feed-card{grid-template-columns:1fr}.feed-media{height:330px}}
@media(max-width:650px){
  .sub-topbar{height:72px}.sub-main{padding-top:72px}.sub-nav{top:72px}.sub-home{font-size:9px}.subhero{padding:90px var(--pad) 48px;min-height:430px}.subhero h1{font-size:clamp(58px,17vw,92px)}.subhero::after{width:280px;height:280px}.page-section{padding:68px var(--pad)}.section-title{font-size:48px}.world-art,.abyss-visual{height:260px}.world-copy{padding:26px}.world-copy h2{font-size:50px}.world-stats{gap:14px}.world-stats strong{font-size:20px}.campaign-hero{min-height:680px;padding:100px var(--pad) 52px}.campaign-hero h1{font-size:clamp(62px,17vw,98px)}.campaign-intro p{font-size:18px}.group-row{grid-template-columns:1fr 1fr;gap:8px;padding:22px 0}.group-day{grid-column:1}.group-time{grid-column:1/3}.group-slots{grid-column:1}.group-status{grid-column:2;text-align:right}.campaign-cta{padding:30px;flex-direction:column;align-items:flex-start}.week-grid{background:transparent;border:0}.day-row{grid-template-columns:1fr;border:1px solid #292929;margin-bottom:10px}.day-name{border-right:0;border-bottom:1px solid #252525;flex-direction:row}.event-chip{grid-template-columns:1fr}.event-chip span{text-align:left}.about-hero{min-height:820px}.about-copy h1{font-size:clamp(62px,17vw,96px)}.about-portrait{height:430px}.metric-grid{grid-template-columns:1fr}.timeline{grid-template-columns:92px 1fr}.principles{grid-template-columns:1fr}.review-columns{columns:1}.contact-card{min-height:220px;padding:28px}.open-seat{grid-template-columns:1fr}.feed-media{height:250px}.sync-banner{align-items:flex-start;flex-direction:column}}

/* Schedule v0.5 — live Google Calendar layer */
.schedule-toolbar{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end}.schedule-toolbar .section-title{margin-bottom:0}.schedule-controls{display:grid;gap:18px;justify-items:end;padding-bottom:8px}.calendar-status{display:flex;align-items:center;gap:10px;font-size:9px;letter-spacing:.16em;color:#92928d}.calendar-status span{width:8px;height:8px;border-radius:50%;background:#555;box-shadow:0 0 0 4px rgba(255,255,255,.025)}.calendar-status[data-mode="live"]{color:#fff}.calendar-status[data-mode="live"] span{background:var(--red);box-shadow:0 0 18px rgba(255,36,56,.8)}.calendar-status[data-mode="loading"] span{background:var(--red);animation:calendarPulse 1s infinite alternate}.calendar-status[data-mode="fallback"] span{background:#777}.week-switch{display:grid;grid-template-columns:46px minmax(190px,auto) 46px;align-items:center;border:1px solid #2c2c2c;background:#0b0b0b}.week-switch button{width:46px;height:44px;border:0;background:transparent;color:#fff;font-size:18px;cursor:pointer}.week-switch button:hover{background:var(--red)}.week-switch strong{padding:0 18px;text-align:center;font-size:11px;letter-spacing:.14em}.day-row.today{box-shadow:inset 3px 0 0 var(--red)}.day-name{position:relative}.day-name i{position:absolute;right:18px;top:18px;font-style:normal;font-size:38px;line-height:1;font-weight:900;color:#242424;letter-spacing:-.05em}.day-row.today .day-name i{color:rgba(255,36,56,.32)}.event-chip.empty{opacity:.58;border-left-color:#242424}.privacy-note{display:grid;grid-template-columns:220px 1fr;gap:30px;margin-top:18px;padding:22px 24px;border:1px solid #242424;background:#090909}.privacy-note span{font-size:9px;letter-spacing:.16em;color:var(--red)}.privacy-note p{margin:0;color:#81817c;font-size:12px;line-height:1.55;max-width:820px}@keyframes calendarPulse{from{opacity:.35}to{opacity:1}}
@media(max-width:850px){.schedule-toolbar{grid-template-columns:1fr}.schedule-controls{justify-items:start}.privacy-note{grid-template-columns:1fr}}
@media(max-width:650px){.week-switch{width:100%;grid-template-columns:44px 1fr 44px}.week-switch strong{font-size:10px;padding:0 8px}.day-name i{font-size:30px}.schedule-controls{width:100%}}
/* Schedule status redesign */
.event-chip:not(.empty){
  grid-template-columns:145px minmax(0,1fr) auto;
  grid-template-areas:"time title meta";
}

.event-chip:not(.empty) time{
  grid-area:time;
}

.event-chip:not(.empty) > strong{
  grid-area:title;
}

.event-meta{
  grid-area:meta;
  min-width:150px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:11px;
  text-align:right;
  text-transform:uppercase;
}

.event-meta .event-slots{
  font-size:28px;
  line-height:1;
  font-weight:900;
  letter-spacing:-.055em;
  color:#fff;
}

.event-meta .event-state{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 9px 6px;
  border:1px solid #383838;
  color:#9c9c97;
  font-size:9px;
  line-height:1;
  font-weight:800;
  letter-spacing:.14em;
}

.event-chip.open .event-slots{
  color:var(--red);
}

.event-chip.open .event-state{
  color:var(--red);
  border-color:rgba(255,36,56,.55);
  background:rgba(255,36,56,.08);
}

@media(max-width:650px){
  .event-chip:not(.empty){
    grid-template-columns:1fr auto;
    grid-template-areas:
      "time time"
      "title title"
      ". meta";
    row-gap:13px;
    column-gap:12px;
    padding:18px 20px;
  }

  .event-chip:not(.empty) time{
    font-size:12px;
  }

  .event-chip:not(.empty) > strong{
    font-size:21px;
    line-height:1.08;
  }

  .event-meta{
    justify-self:end;
    justify-content:flex-end;
    min-width:0;
    margin-top:3px;
    text-align:right;
  }

  .event-meta .event-slots{
    font-size:30px;
  }
}
/* Join — live open tables */
.join-open-section{
  overflow:hidden;
}

.join-open-header{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:32px;
  margin-bottom:34px;
}

.join-open-title{
  font-size:clamp(54px,6vw,92px);
  line-height:.82;
  letter-spacing:-.06em;
  margin:14px 0 0;
  text-transform:uppercase;
}

.join-open-title em{
  color:var(--red);
  font-style:normal;
}

.join-open-controls{
  display:flex;
  align-items:center;
  border:1px solid #303030;
  background:#0b0b0b;
  flex-shrink:0;
}

.join-open-controls button{
  width:48px;
  height:46px;
  border:0;
  background:transparent;
  color:#fff;
  font-size:18px;
  cursor:pointer;
}

.join-open-controls button:hover{
  background:var(--red);
}

.join-open-controls span{
  min-width:74px;
  text-align:center;
  color:#aaa;
  font-size:10px;
  font-weight:700;
  letter-spacing:.16em;
}

.join-open-status{
  border:1px solid #292929;
  background:#0a0a0a;
  padding:28px;
  color:#999;
  font-size:11px;
  letter-spacing:.12em;
}

.join-open-list{
  display:flex;
  gap:18px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;
  padding:0 0 12px;
}

.join-open-card{
  position:relative;
  flex:0 0 min(760px,78vw);
  min-height:300px;
  scroll-snap-align:start;
  border:1px solid #333;
  border-top:2px solid var(--red);
  background:
    linear-gradient(
      135deg,
      rgba(255,36,56,.13),
      rgba(10,10,10,.96) 38%
    );
  padding:34px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:36px;
  align-items:end;
  overflow:hidden;
}

.join-open-card::after{
  content:"";
  position:absolute;
  width:230px;
  height:230px;
  right:-95px;
  top:-105px;
  border:1px solid rgba(255,36,56,.24);
  transform:rotate(45deg);
  pointer-events:none;
}

.join-open-copy{
  position:relative;
  z-index:1;
}

.join-open-copy h3{
  max-width:620px;
  margin:22px 0 18px;
  font-size:clamp(38px,4vw,66px);
  line-height:.86;
  letter-spacing:-.055em;
  text-transform:uppercase;
}

.join-open-copy p{
  margin:0;
  max-width:650px;
  color:#aaa;
  font-size:14px;
  line-height:1.55;
}

.join-open-meta{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:28px;
}

.join-open-meta strong{
  color:#fff;
  font-size:38px;
  line-height:1;
  font-weight:900;
  letter-spacing:-.06em;
}

.join-open-meta span{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 11px;
  border:1px solid rgba(255,36,56,.55);
  background:rgba(255,36,56,.08);
  color:var(--red);
  font-size:9px;
  line-height:1;
  font-weight:800;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.join-open-card .slash-btn{
  position:relative;
  z-index:1;
  align-self:end;
  min-width:190px;
}

.join-open-empty{
  width:100%;
  border:1px solid #2b2b2b;
  border-top:2px solid #444;
  background:#0a0a0a;
  padding:42px;
}

.join-open-empty h3{
  max-width:950px;
  margin:18px 0;
  font-size:clamp(38px,4.5vw,68px);
  line-height:.88;
  letter-spacing:-.055em;
  text-transform:uppercase;
}

.join-open-empty p{
  max-width:720px;
  color:#999;
  line-height:1.6;
}

.join-open-empty a{
  display:inline-block;
  margin-top:16px;
  padding-bottom:5px;
  border-bottom:1px solid var(--red);
  color:#fff;
  text-decoration:none;
}

@media(max-width:650px){
  .join-open-header{
    flex-direction:column;
    align-items:flex-start;
  }

  .join-open-title{
    font-size:50px;
  }

  .join-open-controls{
    align-self:flex-end;
  }

  .join-open-card{
    flex:0 0 88vw;
    min-height:360px;
    grid-template-columns:1fr;
    gap:26px;
    padding:26px;
  }

  .join-open-copy h3{
    font-size:40px;
  }

  .join-open-copy p{
    font-size:13px;
  }

  .join-open-meta strong{
    font-size:36px;
  }

  .join-open-card .slash-btn{
    justify-self:start;
    align-self:end;
    min-width:180px;
  }

  .join-open-empty{
    padding:28px;
  }
}
/* ============================================================
   GAMES LIBRARY / ASHA.VTT
============================================================ */


/* ------------------------------------------------------------
   БЕГУЩАЯ СТРОКА НАБОРОВ
------------------------------------------------------------ */

.games-recruitment-ticker{
  height:48px;
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:stretch;
  overflow:hidden;
  border-bottom:1px solid #2a2a2a;
  background:#0a0a0a;
}

.games-ticker-label{
  position:relative;
  z-index:3;
  display:flex;
  align-items:center;
  padding:0 22px;
  background:var(--red);
  color:#fff;
  font-size:9px;
  font-weight:900;
  letter-spacing:.18em;
  white-space:nowrap;
}

.games-ticker-window{
  min-width:0;
  overflow:hidden;
  display:flex;
  align-items:center;
}

.games-ticker-track{
  display:flex;
  align-items:center;
  width:max-content;
  min-width:100%;
  white-space:nowrap;
  animation:gamesTicker 34s linear infinite;
  will-change:transform;
}

.games-ticker-track:hover{
  animation-play-state:paused;
}

.games-ticker-track.is-static{
  animation:none;
}

.games-ticker-set{
  flex:none;
  display:flex;
  align-items:center;
  gap:28px;
  padding-right:28px;
}

.games-ticker-item{
  display:flex;
  align-items:center;
  gap:12px;
  color:#fff;
  text-decoration:none;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.games-ticker-item strong{
  font-size:11px;
  letter-spacing:.08em;
}

.games-ticker-item > span:last-child{
  color:#91918c;
  font-size:9px;
  letter-spacing:.12em;
}

.games-ticker-dot{
  color:var(--red);
  font-size:10px;
}

.games-ticker-separator{
  color:#3c3c3c;
  font-size:8px;
}

.games-ticker-empty{
  display:flex;
  align-items:center;
  min-height:48px;
  padding:0 28px;
  color:#aaa;
  text-decoration:none;
  font-size:10px;
  letter-spacing:.14em;
}

@keyframes gamesTicker{
  from{
    transform:translateX(0);
  }

  to{
    transform:translateX(-50%);
  }
}


/* ------------------------------------------------------------
   HERO
------------------------------------------------------------ */

.games-library-hero{
  min-height:62vh;
}

.games-library-hero::before{
  content:"44";
  position:absolute;
  right:6vw;
  bottom:-3vw;
  color:#111;
  font-size:clamp(180px,25vw,430px);
  line-height:.7;
  font-weight:900;
  letter-spacing:-.1em;
  pointer-events:none;
}


/* ------------------------------------------------------------
   ПАНЕЛЬ СОРТИРОВКИ
------------------------------------------------------------ */

.games-library-tools{
  min-height:88px;
  padding:18px var(--pad);
  border-bottom:1px solid #2a2a2a;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  background:#090909;
  position:sticky;
  top:88px;
  z-index:30;
}

.games-library-tools-copy{
  display:flex;
  align-items:center;
  gap:22px;
}

.games-library-tools-copy strong{
  font-size:12px;
  letter-spacing:.16em;
}

.games-sort{
  display:flex;
  align-items:center;
  gap:1px;
  border:1px solid #2b2b2b;
  background:#2b2b2b;
}

.games-sort button{
  min-height:42px;
  padding:0 18px;
  border:0;
  background:#0a0a0a;
  color:#888;
  cursor:pointer;
  font-size:9px;
  font-weight:800;
  letter-spacing:.13em;
  transition:
    background .2s,
    color .2s;
}

.games-sort button:hover{
  color:#fff;
  background:#141414;
}

.games-sort button.active{
  background:var(--red);
  color:#fff;
}


/* ------------------------------------------------------------
   ЗАГОЛОВКИ РАЗДЕЛОВ
------------------------------------------------------------ */

.games-library-section{
  overflow:hidden;
}

.games-section-heading{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:30px;
  margin-bottom:42px;
}

.games-section-heading .section-title{
  margin-bottom:0;
}

.games-section-number{
  color:#202020;
  font-size:clamp(70px,9vw,140px);
  line-height:.65;
  font-weight:900;
  letter-spacing:-.08em;
}


/* ------------------------------------------------------------
   СЕТКА ПЛИТОК
------------------------------------------------------------ */

.games-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
}


/* ------------------------------------------------------------
   ОДНА ПЛИТКА
------------------------------------------------------------ */

.game-tile{
  position:relative;
  display:block;
  aspect-ratio:4 / 5;
  min-width:0;
  overflow:hidden;
  border:1px solid #292929;
  background:#0b0b0b;
  color:#fff;
  text-decoration:none;
  isolation:isolate;
}

.game-tile-media{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:
    radial-gradient(
      circle at 50% 40%,
      rgba(255,36,56,.18),
      transparent 35%
    ),
    #0b0b0b;
}

.game-tile-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  filter:
    saturate(.78)
    contrast(1.08);
  transition:
    transform .65s cubic-bezier(.2,.7,.2,1),
    filter .45s,
    opacity .3s;
}

.game-tile-shade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      0deg,
      rgba(4,4,4,.94) 0%,
      rgba(4,4,4,.34) 43%,
      rgba(4,4,4,.04) 72%
    );
  transition:background .4s;
}


/* ------------------------------------------------------------
   ЕСЛИ КАРТИНКИ ПОКА НЕТ
------------------------------------------------------------ */

.game-tile-media.is-missing{
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    linear-gradient(
      135deg,
      rgba(255,36,56,.10),
      transparent 55%
    ),
    repeating-linear-gradient(
      -45deg,
      #0a0a0a 0,
      #0a0a0a 18px,
      #0d0d0d 18px,
      #0d0d0d 36px
    );
}

.game-tile-placeholder{
  transform:rotate(-7deg);
  color:transparent;
  -webkit-text-stroke:1px #343434;
  font-size:clamp(34px,4vw,68px);
  font-weight:900;
  letter-spacing:-.07em;
}


/* ------------------------------------------------------------
   ОБЫЧНОЕ СОСТОЯНИЕ ПЛИТКИ
------------------------------------------------------------ */

.game-tile-base{
  position:absolute;
  z-index:3;
  left:0;
  right:0;
  bottom:0;
  padding:24px;
  transition:
    opacity .25s,
    transform .35s;
}

.game-tile-type{
  display:block;
  margin-bottom:10px;
  color:var(--red);
  font-size:8px;
  font-weight:900;
  letter-spacing:.18em;
}

.game-tile-base h3{
  margin:0;
  max-width:95%;
  font-size:clamp(23px,2.1vw,37px);
  line-height:.89;
  letter-spacing:-.045em;
  text-transform:uppercase;
}

.game-tile-level{
  display:block;
  margin-top:15px;
  color:#aaa;
  font-family:monospace;
  font-size:9px;
  letter-spacing:.08em;
}


/* ------------------------------------------------------------
   HOVER
------------------------------------------------------------ */

.game-tile-hover{
  position:absolute;
  z-index:4;
  inset:0;
  padding:26px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  background:
    linear-gradient(
      0deg,
      rgba(6,6,6,.98) 0%,
      rgba(6,6,6,.92) 43%,
      rgba(6,6,6,.66) 74%,
      rgba(6,6,6,.42) 100%
    );
  opacity:0;
  transform:translateY(12px);
  transition:
    opacity .3s,
    transform .4s;
}

.game-tile-hover-type{
  margin-bottom:auto;
  color:var(--red);
  font-size:8px;
  font-weight:900;
  letter-spacing:.18em;
}

.game-tile-hover h3{
  margin:0 0 15px;
  font-size:clamp(25px,2.3vw,40px);
  line-height:.88;
  letter-spacing:-.05em;
  text-transform:uppercase;
}

.game-tile-hover p{
  margin:0 0 22px;
  color:#b1b1ac;
  font-size:13px;
  line-height:1.48;
  max-width:95%;
}

.game-tile-hover-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding-top:16px;
  border-top:1px solid #333;
}

.game-tile-hover-bottom span{
  color:#8d8d88;
  font-family:monospace;
  font-size:9px;
}

.game-tile-hover-bottom strong{
  color:#fff;
  font-size:9px;
  letter-spacing:.13em;
}

.game-tile:hover .game-tile-media img{
  transform:scale(1.055);
  filter:
    saturate(.45)
    brightness(.55)
    contrast(1.15);
}

.game-tile:hover .game-tile-base{
  opacity:0;
  transform:translateY(12px);
}

.game-tile:hover .game-tile-hover{
  opacity:1;
  transform:translateY(0);
}

.game-tile:hover{
  border-color:#555;
}


/* ------------------------------------------------------------
   НЕМНОГО ХАОСА В СЕТКЕ
   Каждая 7-я плитка получает маленький красный акцент.
------------------------------------------------------------ */

.game-tile:nth-child(7n)::after{
  content:"";
  position:absolute;
  z-index:6;
  width:55px;
  height:3px;
  right:0;
  top:0;
  background:var(--red);
}


/* ------------------------------------------------------------
   СРЕДНИЕ ЭКРАНЫ
------------------------------------------------------------ */

@media(max-width:1300px){

  .games-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

}


/* ------------------------------------------------------------
   ПЛАНШЕТ
------------------------------------------------------------ */

@media(max-width:900px){

  .games-library-tools{
    position:relative;
    top:auto;
    align-items:flex-start;
    flex-direction:column;
  }

  .games-sort{
    width:100%;
    display:grid;
    grid-template-columns:repeat(4,1fr);
  }

  .games-sort button{
    padding:0 8px;
  }

  .games-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

}


/* ------------------------------------------------------------
   ТЕЛЕФОН
------------------------------------------------------------ */

@media(max-width:650px){

  .games-recruitment-ticker{
    height:42px;
    grid-template-columns:auto 1fr;
  }

  .games-ticker-label{
    padding:0 12px;
    font-size:7px;
  }

  .games-ticker-item{
    gap:8px;
  }

  .games-ticker-item > span:last-child{
    font-size:8px;
  }

  .games-library-hero{
    min-height:480px;
  }

  .games-library-tools{
    padding-top:16px;
    padding-bottom:16px;
  }

  .games-library-tools-copy{
    width:100%;
    justify-content:space-between;
  }

  .games-sort{
    grid-template-columns:repeat(2,1fr);
  }

  .games-sort button{
    min-height:44px;
  }

  .games-section-heading{
    margin-bottom:26px;
  }

  .games-section-number{
    font-size:68px;
  }

  .games-grid{
    grid-template-columns:1fr;
    gap:14px;
  }

  .game-tile{
    aspect-ratio:4 / 4.65;
  }

  .game-tile-base{
    padding:22px;
  }

  .game-tile-base h3{
    font-size:32px;
  }

}


/* ------------------------------------------------------------
   УСТРОЙСТВА БЕЗ HOVER

   На телефоне нельзя "навести мышь".
   Поэтому слой с описанием будет виден сразу,
   когда мы позже заполним teaser.
------------------------------------------------------------ */

@media(hover:none){

  .game-tile-hover{
    opacity:1;
    transform:none;
    justify-content:flex-end;
    background:
      linear-gradient(
        0deg,
        rgba(5,5,5,.96) 0%,
        rgba(5,5,5,.72) 48%,
        rgba(5,5,5,.08) 78%
      );
  }

  .game-tile-hover-type{
    margin-bottom:auto;
  }

  .game-tile-base{
    display:none;
  }

}
/* ============================================================
   GAME DETAIL PAGE / ASHA.VTT
   Универсальная личная страница приключения
============================================================ */


/* ------------------------------------------------------------
   HERO / ГЛАВНЫЙ АРТ
------------------------------------------------------------ */

.game-detail-hero{
  position:relative;
  min-height:calc(100vh - 88px);
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  isolation:isolate;
}


/* Картинка занимает весь первый экран */

.game-detail-bg{
  position:absolute;
  inset:0;
  z-index:-3;
  overflow:hidden;
  background:#070707;
}

.game-detail-bg img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center center;
  filter:
    saturate(.82)
    contrast(1.08)
    brightness(.78);
  transform:scale(1.015);
}


/* ------------------------------------------------------------
   ГЛАВНЫЙ ЭФФЕКТ:
   картинка постепенно растворяется в фоне сайта
------------------------------------------------------------ */

.game-detail-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:

    /* затемнение слева под названием */
    linear-gradient(
      90deg,
      rgba(7,7,7,.88) 0%,
      rgba(7,7,7,.56) 35%,
      rgba(7,7,7,.10) 72%
    ),

    /* растворение арта вниз */
    linear-gradient(
      0deg,
      #070707 0%,
      rgba(7,7,7,.96) 7%,
      rgba(7,7,7,.78) 17%,
      rgba(7,7,7,.38) 31%,
      rgba(7,7,7,.08) 48%,
      transparent 67%
    );

  pointer-events:none;
}


/* Лёгкая красная атмосфера */

.game-detail-hero::before{
  content:"";
  position:absolute;
  z-index:-2;
  inset:0;
  pointer-events:none;

  background:
    radial-gradient(
      circle at 78% 34%,
      rgba(255,36,56,.14),
      transparent 32%
    );
}


/* Еле заметная графическая форма */

.game-detail-hero::after{
  content:"";
  position:absolute;
  z-index:-1;
  width:min(36vw,560px);
  aspect-ratio:1;
  right:-9vw;
  top:8vh;

  border:1px solid rgba(255,36,56,.22);

  clip-path:polygon(
    50% 0,
    93% 25%,
    93% 75%,
    50% 100%,
    7% 75%,
    7% 25%
  );

  transform:rotate(18deg);
  pointer-events:none;
}


/* ------------------------------------------------------------
   ТЕКСТ HERO
------------------------------------------------------------ */

.game-detail-hero-content{
  width:100%;
  padding:
    150px
    var(--pad)
    100px;

  position:relative;
  z-index:5;
}

.game-detail-hero-content .section-index{
  display:block;
  margin-bottom:30px;
}

.game-detail-hero-content h1{
  max-width:1250px;
  margin:0;

  font-size:clamp(72px,10.5vw,168px);
  line-height:.76;
  letter-spacing:-.075em;
  text-transform:uppercase;

  text-shadow:
    0 8px 40px rgba(0,0,0,.32);
}

.game-detail-hero-content h1 em{
  display:block;
  color:var(--red);
  font-style:normal;
}


/* ------------------------------------------------------------
   TAGS
------------------------------------------------------------ */

.game-detail-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;

  max-width:950px;
  margin-top:34px;
}

.game-detail-tags span{
  padding:9px 12px;

  border:1px solid rgba(255,255,255,.23);
  background:rgba(7,7,7,.48);
  backdrop-filter:blur(8px);

  color:#d1d1cc;

  font-size:9px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.game-detail-tags span:first-child{
  border-color:rgba(255,36,56,.62);
  color:var(--red);
}


/* ------------------------------------------------------------
   БЛОК "О ЧЁМ ЭТА ИСТОРИЯ"
------------------------------------------------------------ */

.game-detail-about{
  display:grid;
  grid-template-columns:minmax(330px,.75fr) minmax(0,1.25fr);
  gap:clamp(50px,8vw,140px);
  align-items:start;

  position:relative;
}

.game-detail-about-title{
  position:sticky;
  top:160px;
}

.game-detail-about-title .section-title{
  margin-bottom:0;
}

.game-detail-about-text{
  max-width:850px;
  padding-top:28px;
}

.game-detail-about-text p{
  margin:0 0 28px;

  color:#9f9f99;

  font-size:17px;
  line-height:1.75;
}

.game-detail-about-text .game-detail-lead{
  color:#d2d2cd;

  font-size:clamp(22px,2vw,31px);
  line-height:1.48;
  letter-spacing:-.018em;
}


/* Маленькая красная черта */

.game-detail-about-text::before{
  content:"";
  display:block;

  width:72px;
  height:3px;

  margin-bottom:34px;

  background:var(--red);
}


/* ------------------------------------------------------------
   ЧЕГО ЖДАТЬ / FEATURE CARDS
------------------------------------------------------------ */

.game-detail-features{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;

  margin-top:10px;

  background:#292929;
  border:1px solid #292929;
}

.game-detail-feature{
  min-height:300px;

  padding:30px;

  background:#090909;

  display:flex;
  flex-direction:column;

  position:relative;
  overflow:hidden;

  transition:
    background .25s,
    transform .25s;
}

.game-detail-feature::after{
  content:"";
  position:absolute;

  width:130px;
  height:130px;

  right:-80px;
  bottom:-80px;

  border:1px solid rgba(255,36,56,.18);

  transform:rotate(45deg);

  transition:
    right .35s,
    bottom .35s,
    border-color .35s;
}

.game-detail-feature:hover{
  background:#0d0d0d;
}

.game-detail-feature:hover::after{
  right:-60px;
  bottom:-60px;

  border-color:rgba(255,36,56,.48);
}

.game-detail-feature > span{
  color:var(--red);

  font-family:monospace;
  font-size:10px;
  letter-spacing:.16em;
}

.game-detail-feature h3{
  margin:auto 0 16px;

  font-size:clamp(25px,2.3vw,38px);
  line-height:.9;
  letter-spacing:-.045em;
  text-transform:uppercase;
}

.game-detail-feature p{
  margin:0;

  color:#8f8f89;

  font-size:13px;
  line-height:1.55;
}


/* ------------------------------------------------------------
   ПЛАВНЫЙ ПЕРЕХОД ОТ HERO К ОБЫЧНОМУ ФОНУ

   body.subpage уже рисует нашу красную сетку.
   Поэтому после окончания hero она автоматически начинает
   проявляться как основной фон страницы.
------------------------------------------------------------ */

.game-detail-page .game-detail-hero + .page-section{
  padding-top:120px;
}


/* ------------------------------------------------------------
   ПЛАНШЕТ
------------------------------------------------------------ */

@media(max-width:1000px){

  .game-detail-hero{
    min-height:820px;
  }

  .game-detail-hero-content{
    padding-bottom:80px;
  }

  .game-detail-about{
    grid-template-columns:1fr;
    gap:35px;
  }

  .game-detail-about-title{
    position:static;
  }

  .game-detail-about-text{
    padding-top:0;
  }

  .game-detail-features{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

}


/* ------------------------------------------------------------
   ТЕЛЕФОН
------------------------------------------------------------ */

@media(max-width:650px){

  .game-detail-hero{
    min-height:720px;
  }

  .game-detail-bg img{
    object-position:center center;
  }

  .game-detail-bg::after{
    background:

      linear-gradient(
        90deg,
        rgba(7,7,7,.64),
        rgba(7,7,7,.18)
      ),

      linear-gradient(
        0deg,
        #070707 0%,
        rgba(7,7,7,.94) 10%,
        rgba(7,7,7,.62) 28%,
        rgba(7,7,7,.16) 52%,
        transparent 70%
      );
  }

  .game-detail-hero-content{
    padding:
      110px
      var(--pad)
      60px;
  }

  .game-detail-hero-content h1{
    font-size:clamp(58px,17vw,96px);
  }

  .game-detail-tags{
    margin-top:25px;
  }

  .game-detail-tags span{
    font-size:8px;
    padding:8px 10px;
  }

  .game-detail-page .game-detail-hero + .page-section{
    padding-top:76px;
  }

  .game-detail-about-text .game-detail-lead{
    font-size:22px;
  }

  .game-detail-about-text p{
    font-size:15px;
  }

  .game-detail-features{
    grid-template-columns:1fr;
  }

  .game-detail-feature{
    min-height:220px;
  }

  .game-detail-feature h3{
    font-size:32px;
  }

}
/* ============================================================
   ASHA.VTT / CUSTOM SCROLLBARS
============================================================ */

/* Firefox */
.subpage{
  scrollbar-width:thin;
  scrollbar-color:#ff2438 #0a0a0a;
}


/* Chrome / Edge / Safari */

.subpage *::-webkit-scrollbar,
.subpage::-webkit-scrollbar{
  width:8px;
  height:8px;
}


/* фон полосы */

.subpage *::-webkit-scrollbar-track,
.subpage::-webkit-scrollbar-track{
  background:#0a0a0a;
}


/* сам ползунок */

.subpage *::-webkit-scrollbar-thumb,
.subpage::-webkit-scrollbar-thumb{
  background:#ff2438;

  border:2px solid #0a0a0a;

  border-radius:0;
}


/* наведение */

.subpage *::-webkit-scrollbar-thumb:hover,
.subpage::-webkit-scrollbar-thumb:hover{
  background:#ffffff;
}


/* убираем угол между вертикальным и горизонтальным */

.subpage *::-webkit-scrollbar-corner,
.subpage::-webkit-scrollbar-corner{
  background:#0a0a0a;
}