.site-main{min-height:100vh;background:#0a0a0a url("{SITE_TEMPLATE_URL}/images/bg.jpg") center/cover no-repeat fixed;color:#fff;position:relative}
.site-main::before{content:"";position:absolute;inset:0;background:radial-gradient(90% 70% at 50% 35%, rgba(0,0,0,.1) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.9) 100%);pointer-events:none}
.portal{position:relative;z-index:1;padding:110px 20px 80px}
.portal__wrap{max-width:1100px;margin:0 auto;text-align:center;text-shadow:0 1px 1px rgba(0,0,0,.35)}
.portal__title{margin:0 0 10px;font-size:64px;font-weight:900;letter-spacing:1.4px;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-touch-callout:none;}
.portal__subtitle{margin:0 0 56px;color:#d8d8d8;font-size:24px}
.portal__cards{display:flex;gap:32px;justify-content:center;flex-wrap:wrap;margin-bottom:26px}

.no-select{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-webkit-touch-callout:none;}

.game-card{width:360px;height:460px;border-radius:26px;position:relative;overflow:hidden;box-shadow:0 18px 44px rgba(0,0,0,.55), 0 6px 16px rgba(0,0,0,.25)}



.game-card__content{position:absolute;inset:0;padding:24px 22px 0;display:flex;flex-direction:column;justify-content:flex-end;transition:filter .25s ease; border:2px solid #00ff00; border-radius:30px; box-shadow:0 0 10px #00ff00, 0 0 20px #00ff00; font-weight:bold;}
.game-card__header{position:absolute;top:24px;left:24px;right:24px;text-align:center;font-weight:800;letter-spacing:1.2px;font-size: 32px;}
.game-card__online{width:86%;margin:0 auto 18px;display:flex;align-items:center;gap:12px;background:rgba(0,0,0,.5);border-radius:18px;padding:14px 18px;text-align:left}
.icon-users{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.18);display:inline-block}
.game-card__online-text .label{opacity:.95;font-size:15px}
.game-card__online-text .value{margin-top:4px;font-weight:700;letter-spacing:.3px}

.game-card__overlay{position:absolute;left:0;right:0;top:0;bottom:96px;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.35);color:#fff;text-decoration:none;font-weight:800;letter-spacing:.5px;font-size:24px;opacity:0;transition:opacity .25s ease;z-index:5}
.game-card:hover .game-card__content{filter:blur(3.5px)}
.game-card:hover .game-card__overlay{opacity:1}

.game-card__actions{position:absolute;left:0;right:0;bottom:22px;display:flex;justify-content:center;gap:16px;z-index:6}
.btn{width:52px;height:52px;border-radius:14px;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12), 0 8px 16px rgba(0,0,0,.35);text-decoration:none;color:#fff}
.btn svg{width:22px;height:22px;fill:#fff;opacity:.95}
.btn__vk{font-weight:800;letter-spacing:.6px}

.portal__summary{display:inline-block;background:rgba(20,20,20,.6);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.08);padding:14px 22px;border-radius:16px;box-shadow:0 16px 36px rgba(0,0,0,.45);color:#eee}

@media (max-width:980px){.portal__title{font-size:52px}.game-card{width:340px;height:440px}}
@media (max-width:720px){.portal{padding-top:90px}.portal__title{font-size:38px}.game-card{width:100%;max-width:360px;height:420px}}


/* === Hotfix v3: full-height blur, spacing, larger overlay text === */
.portal__subtitle{ margin: 0 0 60px !important; }

.game-card__content{
  position: absolute; inset: 0 !important;
  padding: 24px 22px 110px !important; /* reserve space for icons row */
}

.game-card__overlay{
  position: absolute; inset: 0 !important;
  z-index: 5 !important;
  font-size: 26px !important;
}

.game-card__actions{ z-index: 6 !important; }


/* Right-side subtle photo layer */
/images/bg_right.jpg") right center / cover no-repeat;
  opacity:.16;           /* barely visible */
  pointer-events:none;
  z-index:0;
}
/* keep vignette above photo */
.site-main::before{ z-index:1; }
.portal{ position:relative; z-index:2; }

/* icon style */
.icon-users{ width:20px; height:20px; fill:rgba(255,255,255,.9); display:inline-block }

/* Buttons hover */
.btn-discord{ transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease }
.btn-discord:hover{ transform: translateY(-2px); background: #5865F2; box-shadow:0 10px 20px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.14) }
.btn-discord:focus-visible{ outline:2px solid rgba(255,255,255,.35); outline-offset:2px }

.btn-site{ transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease }
.btn-site:hover{ transform: translateY(-2px); background: rgba(216, 137, 137, 0.2); box-shadow:0 10px 20px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.14) }
.btn-site:focus-visible{ outline:2px solid rgba(255,255,255,.35); outline-offset:2px }

.btn-tg{ transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease }
.btn-tg:hover{ transform: translateY(-2px); background: #27a7e7; box-shadow:0 10px 20px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.14) }
.btn-tg:focus-visible{ outline:2px solid rgba(255,255,255,.35); outline-offset:2px }

.btn-vk{ transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease }
.btn-vk:hover{ transform: translateY(-2px); background: #0077ff; box-shadow:0 10px 20px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.14) }
.btn-vk:focus-visible{ outline:2px solid rgba(255,255,255,.35); outline-offset:2px }

/* z-index layering */
.game-card__overlay{ z-index:4 }
.game-card__actions{ z-index:5 }


/* === Hotfix v4: show right-side background image directly === */
.site-main {
  min-height: 100vh;
  background: url("{SITE_TEMPLATE_URL}/images/bg_right.jpg") right center / cover no-repeat #000 !important;
  color: #fff;
  position: relative;
}

.site-main::before {
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(90% 70% at 50% 35%,
    rgba(0,0,0,.2) 0%,
    rgba(0,0,0,.6) 55%,
    rgba(0,0,0,.9) 100%);
  pointer-events:none;
  z-index:1;
}

.portal { position: relative; z-index: 2; }


/* === Right image as actual background (visible) === */
.site-main{
  
  background-position: right center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-color: #000 !important;
}
.site-main::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(90% 70% at 50% 35%,
    rgba(0,0,0,.25) 0%,
    rgba(0,0,0,.65) 55%,
    rgba(0,0,0,.92) 100%);
  pointer-events:none;
  z-index:1;
}
.portal{ position:relative; z-index:2; }

/* Override for game headers */
.game-card__header{font-size:32px !important;font-weight:900 !important;letter-spacing:1.6px !important}


/* Force card backgrounds to use inline images with gradient overlay */
.game-card--rust, 
.game-card--mc,