/* Game-first first screen for home-previewv3. Films and Studio follow below the hero. */
:root{--v2-red:#ff343f;--v2-ink:#08090d;
  /* the top bar as on UNDERDOG TV (TemplateData/style.css): the full width with the same gutter - one bar across
     both sites, the logo in the same place on every page */
  --tb-maxw:none;--tb-gutter:clamp(20px,3.6vw,96px)}
/* focus and scroll-into-view stop clear of the fixed bars (WCAG 2.4.11) */
html{scroll-padding-top:calc(var(--tb-h) + 8px);scroll-padding-bottom:calc(var(--tab-space,0px) + 8px)}

.hx-v2{padding:0;background:var(--v2-ink)}
.hx-v2 .hero-bg .hero-video,.hx-v2 .hero-bg .hero-fallback{
  object-position:57% 41%;filter:saturate(1.13) contrast(1.08) brightness(.99)}
.hx-v2 .hero-bg .hero-video{transform:scale(1.015);animation:none}
.hx-v2 .hero-bg::after{background:
  radial-gradient(38% 34% at 100% 0%,rgba(5,6,9,.9) 0%,rgba(5,6,9,.55) 45%,transparent 100%),
  linear-gradient(90deg,rgba(5,6,9,.97) 0%,rgba(5,6,9,.84) 28%,rgba(5,6,9,.38) 54%,rgba(5,6,9,.1) 78%,rgba(5,6,9,.22) 100%),
  linear-gradient(180deg,rgba(5,6,9,.4) 0%,rgba(5,6,9,.02) 31%,rgba(5,6,9,.16) 55%,rgba(5,6,9,.92) 84%,#08090d 100%)}
.hx-v2 .hero-scan{opacity:.02}
.hx-v2::before{content:"";position:absolute;z-index:3;left:0;right:0;top:var(--tb-h);height:1px;
  background:linear-gradient(90deg,transparent 4%,rgba(255,255,255,.16) 48%,transparent 96%)}
.hx-v2 .hx-in{max-width:2260px;min-height:100svh;gap:clamp(14px,2vh,24px);
  padding:calc(var(--tb-h) + clamp(20px,3.6vh,48px)) clamp(24px,4.2vw,88px) clamp(16px,2.8vh,32px)}
.hx-v2 .hx-top{display:flex;align-items:center;justify-content:flex-start}
.hx-v2 .hx-brand{position:relative;z-index:2;max-width:990px;padding:18px 0 20px}
.hx-v2 .hx-brand::before{content:"";position:absolute;left:-28px;top:19%;bottom:15%;width:3px;
  background:linear-gradient(180deg,transparent,var(--v2-red) 22%,var(--v2-red) 78%,transparent);
  box-shadow:0 0 26px rgba(255,52,63,.55)}
.hx-v2 .hero-badge{margin:0 0 clamp(18px,2.5vh,28px);border:0;border-radius:0;padding:0;
  background:none;color:#e8e9ea;font-family:var(--f-mono);font-size:clamp(11px,.8vw,13px);
  letter-spacing:.14em;text-transform:uppercase}
.hx-v2 .hero-badge .dot{background:var(--v2-red);box-shadow:0 0 16px var(--v2-red)}
.hx-v2 h1{margin:0;max-width:990px;font-family:var(--f-head);font-size:clamp(76px,min(10vw,12.5vh),175px);
  line-height:.83;letter-spacing:-.055em;text-transform:uppercase;text-wrap:balance;
  text-shadow:0 18px 70px rgba(0,0,0,.46)}
.hx-v2 h1 span{display:block;width:max-content;max-width:100%}
.hx-v2 h1 .l1{color:#fff}
.hx-v2 h1 .l2{color:var(--v2-red);text-shadow:0 0 65px rgba(255,52,63,.24)}
.hx-v2 h1 .l2::after{display:none}
.hx-v2 .hero-tag{max-width:44ch;margin:clamp(20px,3vh,34px) 0 0;font-size:clamp(17px,1.21vw,22px);
  line-height:1.5;color:rgba(255,255,255,.86);text-wrap:pretty}
.hx-v2 .hx-cta{gap:12px;margin-top:clamp(22px,3vh,36px)}
.hx-v2 .hx-cta .btn{height:clamp(58px,5.7vh,70px);padding:0 28px;justify-content:center;border-radius:8px;
  font-size:clamp(16px,1.05vw,19px);letter-spacing:.06em;text-transform:uppercase}
.hx-v2 .hx-play{background:var(--v2-red);box-shadow:0 12px 38px rgba(255,52,63,.3)}
.hx-v2 .hx-play:hover{background:#ff5360;box-shadow:0 15px 48px rgba(255,52,63,.44)}
.hx-v2 .hx-create{background:rgba(7,8,12,.7);border:1px solid rgba(255,255,255,.54)}
.hx-v2 .hx-create:hover{background:#fff;color:#07080c;transform:translateY(-2px)}
.hx-v2 .hx-cta .ic{width:20px;height:20px}
.hx-v2 .hx-choice{position:relative;z-index:5}
.hx-v2 .hx-choice-h{margin:0 0 12px;font-size:clamp(11px,.75vw,13px);letter-spacing:.18em;color:#fff}
.hx-v2 .hx-choice-h::after{background:linear-gradient(90deg,rgba(255,255,255,.45),rgba(255,255,255,.02))}
.hx-v2 .hx-tiles{gap:10px}
.hx-v2 .tile{min-height:clamp(195px,20vh,265px);padding:clamp(18px,1.55vw,30px);border-radius:8px;
  background:#111319;border-color:rgba(255,255,255,.22);box-shadow:0 20px 45px rgba(0,0,0,.35)}
.hx-v2 .tile:hover{transform:translateY(-7px);border-color:rgba(255,255,255,.58);
  box-shadow:0 28px 70px rgba(0,0,0,.48)}
.hx-v2 .tile-media::after{background:linear-gradient(90deg,rgba(6,7,10,.96) 0%,rgba(6,7,10,.78) 42%,rgba(6,7,10,.14) 88%),
  linear-gradient(0deg,rgba(6,7,10,.38),transparent 55%)}
.hx-v2 .tile-body{max-width:70%;gap:10px}
.hx-v2 .tile-k{font-size:clamp(12px,.8vw,15px);letter-spacing:.19em}
.hx-v2 .tile-t{font-size:clamp(30px,2.45vw,50px);line-height:.92}
.hx-v2 .tile-d{font-size:clamp(14px,.92vw,17px);line-height:1.38;color:rgba(255,255,255,.89)}
.hx-v2 .tile-go{width:46px;height:46px;background:var(--v2-red);border-color:var(--v2-red);border-radius:7px}
.hx-v2 .tile:hover .tile-go{transform:translateX(4px);background:#ff5862}

/* Four real films after the game; each card opens its film and the section leads to the full gallery. */
.wsec-films-compact{padding-block:clamp(56px,6vw,90px) clamp(36px,4vw,70px)}
.wsec-compact-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:clamp(18px,2vw,30px)}
.wsec-compact-head h2{font-size:clamp(34px,4vw,60px);line-height:1;text-transform:uppercase;margin:12px 0 8px}
.wsec-compact-head p{font-size:clamp(15px,1.15vw,18px);color:var(--tx-mid)}
.v3-gallery-cta{flex:none;align-self:flex-end;gap:10px;height:48px;padding:0 20px;border-radius:8px;
  font-size:14px;letter-spacing:.08em;text-transform:uppercase}
.v3-gallery-cta .ic{width:18px;height:18px}
.wsec-films-compact .frail{margin:0;padding:0;overflow:visible}
.wsec-films-compact .frail-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.3vw,22px)}
.wsec-films-compact .fcard{width:100%;min-width:0}
.wsec-films-compact .fcard-link{height:100%;border-radius:12px}
.wsec-films-compact .fcard-media,.wsec-films-compact .fcard[data-shape="landscape"] .fcard-media{
  width:100%;height:clamp(210px,18vw,310px);aspect-ratio:auto;border-radius:12px}
.wsec-films-compact .fcard-body{padding-inline:2px}
.wsec-films-compact .fcard-title{font-size:clamp(17px,1.3vw,21px)}
.closing-grid{grid-template-columns:1fr}
.closing-play{max-width:1200px;margin-inline:auto}

@media(max-width:1439px){
  .hx-v2 .hx-in{padding-inline:clamp(20px,3vw,54px)}
  .hx-v2 h1{font-size:clamp(64px,min(9.5vw,12vh),140px)}
  .hx-v2 .tile-body{max-width:75%}
  .hx-v2 .tile-t{font-size:clamp(26px,2.35vw,38px)}
}
@media(max-height:1100px) and (min-width:761px){
  .hx-v2 .hx-in{padding-top:calc(var(--tb-h) + 12px);gap:10px}
  .hx-v2 .hx-brand{padding:2px 0 4px}
  .hx-v2 .hero-badge{margin-bottom:10px}
  .hx-v2 .hero-tag{margin-top:16px}
  .hx-v2 .hx-cta{margin-top:18px}
  .hx-v2 .tile{padding-block:16px}
  html[lang="pl"] .hx-v2 .tile-t{font-size:clamp(27px,2vw,38px)}
}
@media(max-width:1023px){
  .wsec-films-compact .frail-track{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hx-v2 .hx-in{min-height:0}
  .hx-v2 .hx-brand{max-width:800px}
  .hx-v2 h1{font-size:clamp(70px,10vw,110px)}
  .hx-v2 .tile{min-height:260px}
  .hx-v2 .tile-body{max-width:none}
  .hx-v2 .tile-media::after{background:linear-gradient(0deg,rgba(6,7,10,.94),rgba(6,7,10,.68) 46%,rgba(6,7,10,.08))}
  .hx-v2 .tile-t{font-size:clamp(26px,3vw,36px)}
}
@media(max-width:760px){
  .wsec-compact-head{display:block}
  .v3-gallery-cta{margin-top:16px;width:100%;justify-content:center}
  .wsec-films-compact .frail-track{display:flex;flex-direction:column;gap:10px}
  .wsec-films-compact .fcard{width:100%}
  .wsec-films-compact .fcard-link{height:auto}
  .wsec-films-compact .fcard-media,.wsec-films-compact .fcard[data-shape="landscape"] .fcard-media{
    width:122px;height:90px;aspect-ratio:auto}
  .hx-v2{--hx-media-h:clamp(176px,23svh,230px)}
  .hx-v2 .hero-bg{top:calc(var(--tb-h) + 12px);left:16px;right:16px;bottom:auto;height:var(--hx-media-h);
    border:1px solid rgba(255,255,255,.36);border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.58)}
  .hx-v2 .hero-bg .hero-video,.hx-v2 .hero-bg .hero-fallback{object-position:center;filter:saturate(1.2) contrast(1.08) brightness(.98)}
  .hx-v2 .hero-bg::after{background:linear-gradient(0deg,rgba(6,7,10,.38),transparent 55%)}
  .hx-v2 .hx-in{padding:calc(var(--tb-h) + 28px) 16px 30px;gap:22px}
  .hx-v2 .hx-brand{padding:calc(var(--hx-media-h) + 19px) 0 0}
  .hx-v2 .hx-brand::before{left:-11px;top:25%;bottom:0;width:2px}
  .hx-v2 .hero-badge{margin-bottom:13px;font-size:10px}
  .hx-v2 h1{font-size:clamp(62px,16vw,88px);line-height:.88;letter-spacing:-.048em}
  .hx-v2 .hero-tag{margin-top:19px;font-size:16px;line-height:1.45}
  .hx-v2 .hx-cta{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;margin-top:22px}
  .hx-v2 .hx-cta .btn{width:100%;height:54px;padding:0 9px;font-size:13px;white-space:nowrap}
  .hx-v2 .hx-cta .ic{width:17px;height:17px}
  .hx-v2 .hx-choice-h{font-size:10px;gap:8px}
  .hx-v2 .hx-tiles{grid-template-columns:1fr;gap:9px}
  .hx-v2 .tile{min-height:130px;grid-template-columns:minmax(0,1fr) 95px;padding:15px;border-radius:7px;gap:12px}
  .hx-v2 .tile-body{max-width:none;gap:5px 7px}
  .hx-v2 .tile-k{font-size:11px}
  .hx-v2 .tile-t{font-size:clamp(23px,6vw,30px);white-space:normal}
  .hx-v2 .tile-d{font-size:12.5px;line-height:1.3}
  .hx-v2 .tile-media::after{display:none}
  .hx-v2 .tile-go{width:30px;height:30px;right:12px;bottom:12px}
}
@media(max-width:390px){
  .hx-v2 h1{font-size:clamp(58px,16.8vw,70px)}
  .hx-v2 .hx-cta .btn{font-size:12px}
}
/* Responsiveness (Tools/RESPONSIVE_TRACKER.md): the play and trailer buttons on the first screen of every screen.
   A short phone upright: a lower picture, a headline sized by the height too. */
@media(max-width:760px) and (max-height:700px){
  .hx-v2{--hx-media-h:clamp(128px,20svh,176px)}
  .hx-v2 .hx-in{padding-top:calc(var(--tb-h) + 20px);gap:18px}
  .hx-v2 .hx-brand{padding-top:calc(var(--hx-media-h) + 16px)}
  .hx-v2 .hero-badge{margin-bottom:10px}
  .hx-v2 h1{font-size:clamp(46px,min(16vw,9svh),88px)}
  .hx-v2 .hero-tag{margin-top:12px;font-size:15px;line-height:1.4}
  .hx-v2 .hx-cta{margin-top:16px}
  .hx-v2 .hx-cta .btn{height:50px}
}
/* A phone on its side and any low window: the film behind the words again, the headline sized by the height */
@media(orientation:landscape) and (max-height:500px) and (min-width:480px){
  .hx-v2 .hero-bg{top:0;left:0;right:0;bottom:0;height:auto;border:0;border-radius:0;box-shadow:none}
  .hx-v2 .hero-bg .hero-video,.hx-v2 .hero-bg .hero-fallback{object-position:62% 38%}
  .hx-v2 .hero-bg::after{background:
    radial-gradient(46% 72% at 100% 0%,rgba(5,6,9,.94) 0%,rgba(5,6,9,.6) 50%,transparent 100%),
    linear-gradient(90deg,rgba(5,6,9,.96) 0%,rgba(5,6,9,.82) 34%,rgba(5,6,9,.3) 66%,rgba(5,6,9,.18) 100%),
    linear-gradient(180deg,rgba(5,6,9,.35) 0%,transparent 30%,rgba(5,6,9,.5) 82%,#08090d 100%)}
  .hx-v2 .hx-in{min-height:0;padding:calc(var(--tb-h) + 14px) clamp(18px,4vw,48px) 18px;gap:16px}
  .hx-v2 .hx-brand{padding:0;max-width:min(560px,62vw)}
  .hx-v2 .hx-brand::before{left:-12px;width:2px}
  .hx-v2 .hero-badge{margin-bottom:8px;font-size:10px}
  .hx-v2 h1{font-size:clamp(34px,13dvh,70px);line-height:.86}
  .hx-v2 .hero-tag{max-width:46ch;margin-top:10px;font-size:14px;line-height:1.4}
  .hx-v2 .hx-cta{display:flex;flex-wrap:wrap;width:auto;gap:8px;margin-top:14px}
  .hx-v2 .hx-cta .btn{width:auto;height:46px;padding:0 18px;font-size:13px}
}
/* a very low screen on its side (a small phone): the headline and both buttons, the line under the headline waits */
@media(orientation:landscape) and (max-height:380px) and (min-width:480px){
  .hx-v2 h1{font-size:clamp(32px,12dvh,60px)}
  .hx-v2 .hero-tag{display:none}
}
@media(prefers-reduced-motion:reduce){
  .hx-v2 .hx-brand>*,.hx-v2 .hx-choice{animation:none}
  .hx-v2 .hero-badge .dot{animation:none}
}
/* the narrowest phones (a zoomed-in one): the footer's link columns one under the other */
@media(max-width:340px){.ft .foot-links{grid-template-columns:minmax(0,1fr)}}
/* iPhone/iPad Safari zooms the page in on focus of a field under 16px and leaves it zoomed (sideways scroll) */
@media(pointer:coarse){.ms-sel{font-size:16px}}
/* the site's structure (previews and testing; js/site-nav.js): the official cycle of the game under the hero -
   the next Weekly Cup with its countdown, the Monthly Championship's final, the way to watch live */
.site-cycle{position:relative;z-index:5;border-bottom:1px solid var(--bd);background:linear-gradient(90deg,rgba(233,185,73,.12),rgba(255,56,56,.06) 62%,rgba(13,15,19,.55))}
.site-cycle .in{max-width:var(--maxw);margin:0 auto;padding:10px var(--pad-x);display:flex;flex-wrap:wrap;align-items:center;gap:4px 32px}
.site-cycle .sc-item{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-height:44px;min-width:0;color:#fff;text-decoration:none}
.site-cycle .sc-item b{font-family:var(--f-head);font-size:15px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.site-cycle .sc-item span{font-family:var(--f-mono,ui-monospace,monospace);font-size:13px;color:var(--gold);font-variant-numeric:tabular-nums}
.site-cycle .ic{width:18px;height:18px;flex:none;color:var(--gold);fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.site-cycle .sc-watch{margin-left:auto}
.site-cycle .sc-dot{width:9px;height:9px;border-radius:50%;background:#ff3838;box-shadow:0 0 10px #ff3838;animation:scPulse 1.6s infinite}
@keyframes scPulse{0%,100%{opacity:1}50%{opacity:.35}}
.site-cycle .sc-item:hover b{text-decoration:underline;text-underline-offset:4px}
.site-cycle .sc-item:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
@media(max-width:700px){.site-cycle .in{gap:0 18px}.site-cycle .sc-watch{margin-left:0}}
@media(prefers-reduced-motion:reduce){.site-cycle .sc-dot{animation:none}}

/* ---------- the landing's news (Damian, 2026-09-28: news on the homepage instead of a sub-page in the bar): the
   latest story large, two more beside it; every card opens the whole story, "All news" leads to the list ---------- */
.hnews{padding-block:clamp(48px,6vw,96px) clamp(20px,3vw,44px)}
.hsec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;margin-bottom:clamp(18px,2vw,30px)}
.hsec-head h2{font-size:clamp(34px,4vw,60px);line-height:1;text-transform:uppercase;margin:12px 0 0}
.hsec-more{display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 18px;border-radius:8px;border:1px solid rgba(255,255,255,.24);
  font-family:var(--f-head);font-size:14px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#fff;transition:border-color .2s,background-color .2s}
.hsec-more .ic{width:18px;height:18px;color:var(--v2-red);transition:transform .2s}
.hsec-more:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.hsec-more:hover .ic{transform:translateX(3px)}
.hnews-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);grid-template-rows:auto auto;gap:clamp(12px,1.3vw,22px)}
.hnews-card{position:relative;display:flex;flex-direction:column;min-width:0;padding:0;border-radius:12px;overflow:hidden;text-align:left;cursor:pointer;
  font:inherit;color:inherit;background:#111319;border:1px solid rgba(255,255,255,.12);
  transition:transform .22s cubic-bezier(.2,.7,.2,1),border-color .22s,box-shadow .22s}
.hnews-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.42);box-shadow:0 24px 56px rgba(0,0,0,.45)}
.hnews-card:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.hnews-lead{grid-row:1 / span 2}
.hnews-media{position:relative;display:block;flex:none;overflow:hidden;background:#0b0c10;aspect-ratio:16/9}
.hnews-lead .hnews-media{aspect-ratio:auto;height:clamp(240px,23vw,420px)}
.hnews-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.hnews-card:hover .hnews-media img{transform:scale(1.045)}
.hnews-body{display:flex;flex-direction:column;align-items:flex-start;gap:9px;flex:1;min-width:0;padding:clamp(16px,1.5vw,26px)}
.hnews-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.hnews-cat{padding:4px 9px;border-radius:4px;font-family:var(--f-head);font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
.hnews-cat.patch{background:rgba(56,182,255,.15);color:var(--cyan)}
.hnews-cat.event{background:rgba(233,185,73,.15);color:var(--gold)}
.hnews-cat.community{background:rgba(0,210,106,.14);color:var(--green)}
.hnews-date{font-family:var(--f-mono);font-size:12.5px;color:rgba(255,255,255,.55)}
.hnews-t{font-family:var(--f-head);font-size:clamp(20px,1.55vw,26px);font-weight:600;line-height:1.08;letter-spacing:.01em;text-transform:uppercase;color:#fff;text-wrap:balance}
.hnews-lead .hnews-t{font-size:clamp(26px,2.4vw,42px)}
.hnews-d{font-size:clamp(14.5px,1vw,16.5px);line-height:1.5;color:rgba(255,255,255,.76);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hnews-lead .hnews-d{-webkit-line-clamp:3;max-width:60ch}
.hnews-go{display:inline-flex;align-items:center;gap:8px;margin-top:auto;padding-top:4px;font-family:var(--f-head);font-size:13.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:#fff}
.hnews-go .ic{width:17px;height:17px;color:var(--v2-red);transition:transform .2s}
.hnews-card:hover .hnews-go .ic{transform:translateX(4px)}
/* beside the lead story: the picture on the left, the words on the right */
.hnews-card:not(.hnews-lead){flex-direction:row}
.hnews-card:not(.hnews-lead) .hnews-media{width:40%;aspect-ratio:auto}
@media(max-width:1023px){
  .hnews-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hnews-lead{grid-row:auto;grid-column:1 / -1}
  .hnews-card:not(.hnews-lead){flex-direction:column}
  .hnews-card:not(.hnews-lead) .hnews-media{width:auto;aspect-ratio:16/9}
}
@media(max-width:640px){
  .hnews-grid{grid-template-columns:minmax(0,1fr)}
  .hnews-lead .hnews-media{height:auto;aspect-ratio:16/9}
  .hnews-card:not(.hnews-lead){flex-direction:row}
  .hnews-card:not(.hnews-lead) .hnews-media{width:34%;aspect-ratio:auto}
  .hnews-card:not(.hnews-lead) .hnews-d{display:none}
  .hsec-more{height:44px}
}

/* ---------- the community: the game's Discord, in Discord's own colour - the live numbers (js/community.js), what is
   there, one big way in; the hero has a short way in too ---------- */
.hdc{padding-block:clamp(28px,4vw,64px)}
.hdc-card{position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:center;
  gap:clamp(26px,4vw,72px);padding:clamp(28px,4.4vw,76px);border-radius:16px;border:1px solid rgba(88,101,242,.5);
  background:radial-gradient(90% 120% at 0% 0%,rgba(88,101,242,.5) 0%,rgba(88,101,242,.16) 45%,transparent 75%),
    linear-gradient(135deg,#1b1e3d 0%,#10122a 52%,#0b0c16 100%);
  box-shadow:0 30px 90px rgba(24,28,90,.45)}
.hdc-mark{position:absolute;z-index:-1;right:-5%;bottom:-24%;width:min(52vw,680px);height:min(52vw,680px);color:rgba(120,132,255,.1);transform:rotate(-12deg);pointer-events:none}
.hdc-eyebrow{display:inline-flex;align-items:center;gap:10px;color:#c9ceff}
.hdc-eyebrow .ic{width:20px;height:20px;color:#9aa3ff}
.hdc-eyebrow::before{background:linear-gradient(90deg,#8f99ff,transparent)}
.hdc h2{margin:14px 0 16px;font-size:clamp(36px,4.5vw,76px);line-height:.94;text-transform:uppercase;color:#fff;text-wrap:balance}
.hdc-accent{color:#8f99ff}
.hdc-text{max-width:52ch;font-size:clamp(15px,1.15vw,18px);line-height:1.55;color:rgba(255,255,255,.84)}
.hdc-stats{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 26px;margin-top:22px;font-size:14px;color:rgba(255,255,255,.72)}
.hdc-stats[hidden]{display:none}
.hdc-stat b{margin-right:5px;font-family:var(--f-head);font-size:clamp(24px,2vw,34px);font-weight:600;letter-spacing:.01em;color:#fff;font-variant-numeric:tabular-nums}
.hdc-online i{display:inline-block;width:10px;height:10px;margin-right:9px;border-radius:50%;vertical-align:.18em;background:#23a55a;
  box-shadow:0 0 0 4px rgba(35,165,90,.22),0 0 14px #23a55a}
.hdc-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin-top:28px}
.hdc-btn{gap:12px;height:64px;padding:0 32px;border-radius:10px;font-size:clamp(16px,1.15vw,20px);letter-spacing:.06em;box-shadow:0 16px 44px rgba(88,101,242,.5)}
.hdc-btn .ic{width:26px;height:26px}
.hdc-btn:hover{box-shadow:0 20px 54px rgba(88,101,242,.62)}
.hdc-free{font-size:14px;color:rgba(255,255,255,.62)}
.hdc-perks{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.hdc-perks li{display:flex;align-items:flex-start;gap:14px;min-width:0;padding:clamp(16px,1.4vw,22px);border-radius:12px;
  background:rgba(9,10,20,.58);border:1px solid rgba(255,255,255,.1)}
.hdc-ic{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:10px;background:rgba(88,101,242,.24);color:#d3d7ff}
.hdc-ic .ic{width:22px;height:22px}
.hdc-perks b{display:block;margin-bottom:4px;font-family:var(--f-head);font-size:clamp(16px,1.2vw,19px);font-weight:600;letter-spacing:.04em;line-height:1.2;
  text-transform:uppercase;color:#fff}
.hdc-perks li>span:last-child>span{display:block;font-size:14.5px;line-height:1.45;color:rgba(255,255,255,.74)}
@media(max-width:1023px){.hdc-card{grid-template-columns:minmax(0,1fr)}}
@media(max-width:560px){
  .hdc-perks{grid-template-columns:minmax(0,1fr)}
  .hdc-cta{flex-direction:column;align-items:stretch;text-align:center}
  .hdc-btn{width:100%;height:58px}
}
/* the hero's third button: the Discord in its colour, with the number online when it is known */
.hx-v2 .hx-cta .hx-discord{gap:12px;background:#5865f2;color:#fff;box-shadow:0 12px 38px rgba(88,101,242,.34)}
.hx-v2 .hx-cta .hx-discord:hover{background:#6d78f6;box-shadow:0 15px 48px rgba(88,101,242,.5);transform:translateY(-2px)}
.hx-v2 .hx-cta .hx-discord .ic{width:24px;height:24px}
.hx-dc-live{display:inline-flex;align-items:center;gap:7px;padding-left:12px;border-left:1px solid rgba(255,255,255,.35);
  font-family:var(--f-mono);font-size:max(12px,.74em);font-weight:500;letter-spacing:0;text-transform:none;color:rgba(255,255,255,.92);white-space:nowrap}
.hx-dc-live[hidden]{display:none}
.hx-dc-live i{width:9px;height:9px;border-radius:50%;background:#3ddc84;box-shadow:0 0 10px #3ddc84}
/* phones: the two buttons side by side, the Discord under them across the width */
@media(max-width:760px){.hx-v2 .hx-cta .hx-discord{grid-column:1 / -1;height:48px}}
/* a short phone and a phone on its side keep the first screen for the headline and the two buttons */
@media(max-width:760px) and (max-height:700px),(orientation:landscape) and (max-height:500px){.hx-v2 .hx-cta .hx-discord{display:none}}
/* very wide screens (Damian's 3382x1253 window): the hero starts where the bar's logo does, no empty band on the left */
@media(min-width:2600px){.hx-v2 .hx-in{max-width:none;padding-inline:var(--tb-gutter)}}
/* the shop is off on the site (app.js SITE_OFF) */
html.tb-site-on .ft [data-nav="shop"]{display:none}

/* career chapters: the picture of each chapter (media/chapters, cut out of the game's square tile, whose empty part
   was white), 16:9 like the picture itself */
.chap{aspect-ratio:16/9;background:#0b0c10}
@media(max-width:640px){.chap-grid{--min:140px;gap:10px}.chap-info b{font-size:13px}}

/* the news page (#news): the latest story wide, the others three a row - the landing's news cards */
.hnews-page{padding-top:clamp(28px,4vw,56px)}
.hnews-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.3vw,22px)}
.hnews-list .hnews-card{flex-direction:column}
.hnews-list .hnews-card .hnews-media{width:auto;aspect-ratio:16/9}
.hnews-list .hnews-card .hnews-d{display:-webkit-box}
.hnews-list .hnews-wide{grid-column:1 / -1;flex-direction:row}
.hnews-list .hnews-wide .hnews-media{width:58%;aspect-ratio:16/9}
.hnews-list .hnews-wide .hnews-body{justify-content:center;padding:clamp(20px,2.6vw,44px)}
.hnews-list .hnews-wide .hnews-t{font-size:clamp(26px,2.6vw,44px)}
.hnews-list .hnews-wide .hnews-d{-webkit-line-clamp:3;max-width:52ch}
@media(max-width:1023px){.hnews-list{grid-template-columns:repeat(2,minmax(0,1fr))}.hnews-list .hnews-card:last-child{grid-column:1 / -1}}
@media(max-width:640px){
  .hnews-list{grid-template-columns:minmax(0,1fr)}
  .hnews-list .hnews-wide{flex-direction:column}
  .hnews-list .hnews-wide .hnews-media{width:auto}
  .hnews-list .hnews-card:last-child{grid-column:auto}
}