*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--bg:#07070d;--bg2:#0c0c18;--bg3:#10101e;--card:#0f0f1e;--accent:#e0433a;--accent2:#ff6b35;--glow:#e0433a55;--text:#e8e8f0;--muted:#7a7a96;--border:#1c1c32;--font-display:'Bebas Neue',sans-serif;--font-body:'Barlow Condensed',sans-serif}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:1.1rem;font-weight:400;line-height:1.6;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--accent);border-radius:3px}

/* GRAIN OVERLAY */
body::after{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.055'/%3E%3C/svg%3E");pointer-events:none;z-index:9999;opacity:.4;mix-blend-mode:overlay}
#pc{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.3}

/* LAYOUT */
.container{max-width:1180px;margin:0 auto;padding:0 2rem;position:relative;z-index:2}
section{padding:7rem 0;position:relative}

/* TYPE */
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.0;letter-spacing:.02em}
.lbl{font-size:.72rem;font-family:var(--font-body);letter-spacing:.3em;text-transform:uppercase;color:var(--accent);margin-bottom:.5rem;font-weight:600}
.div{width:48px;height:3px;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:2px;margin-bottom:1.4rem;box-shadow:0 0 10px rgba(224,67,58,.4)}
.stitle{font-size:clamp(2.4rem,5vw,3.8rem);margin-bottom:.8rem}
.ssub{color:var(--muted);font-size:1rem;font-weight:400;max-width:520px;margin-bottom:3rem}
.tag{font-size:.65rem;letter-spacing:.1em;text-transform:uppercase;padding:.22rem .6rem;border-radius:3px;background:rgba(224,67,58,.12);color:var(--accent);border:1px solid rgba(224,67,58,.28);font-family:var(--font-body);font-weight:600}
.btn{display:inline-flex;align-items:center;gap:.45rem;padding:.75rem 1.8rem;border-radius:4px;font-family:var(--font-body);font-weight:700;font-size:.95rem;letter-spacing:.08em;text-transform:uppercase;transition:all .2s;cursor:pointer;border:none}
.btn-p{background:var(--accent);color:#fff}.btn-p:hover{background:var(--accent2);box-shadow:0 0 32px var(--glow);transform:translateY(-2px)}
.btn-s{background:transparent;color:var(--text);border:2px solid var(--border)}.btn-s:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)}

/* NAV */
nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:1.1rem 0;transition:background .3s,box-shadow .3s,padding .3s}
nav.sc{background:rgba(7,7,13,.97);backdrop-filter:blur(16px);box-shadow:0 1px 0 var(--border);padding:.75rem 0}
.ni{display:flex;align-items:center;justify-content:space-between}
.nl{font-family:var(--font-display);font-size:1.6rem;letter-spacing:.08em}.nl span{color:var(--accent)}
.nlinks{display:flex;gap:2.4rem;list-style:none;align-items:center}
.nlinks a{font-family:var(--font-body);font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--muted);transition:color .2s;position:relative}
.nlinks a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:var(--accent);transition:width .25s}
.nlinks a:hover,.nlinks a.active{color:var(--text)}.nlinks a:hover::after,.nlinks a.active::after{width:100%}
.ncta{background:var(--accent)!important;color:#fff!important;padding:.42rem 1.2rem;border-radius:4px;font-weight:700!important}.ncta:hover{background:var(--accent2)!important;box-shadow:0 0 18px var(--glow)!important}.ncta::after{display:none!important}
.hbg{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px;background:none;border:none}
.hbg span{display:block;width:24px;height:2px;background:var(--text);border-radius:2px;transition:transform .3s,opacity .3s}
.hbg.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}.hbg.open span:nth-child(2){opacity:0}.hbg.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mm{display:none;position:fixed;inset:0;background:rgba(7,7,13,.98);z-index:99;flex-direction:column;align-items:center;justify-content:center;gap:2.5rem}
.mm.open{display:flex}.mm a{font-family:var(--font-display);font-size:2.6rem;color:var(--muted);letter-spacing:.08em;transition:color .2s}.mm a:hover{color:var(--accent)}

/* PAGE HERO (about, games, blog, contact) */
.ph{padding:11rem 0 6rem;position:relative;z-index:2;border-bottom:1px solid var(--border)}
.ph::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(to bottom,transparent 0,transparent 3px,rgba(0,0,0,.05) 3px,rgba(0,0,0,.05) 4px);pointer-events:none}
.bc{font-family:var(--font-body);font-size:.7rem;color:var(--muted);letter-spacing:.12em;text-transform:uppercase;margin-bottom:1.2rem;font-weight:600}
.bc a{color:var(--accent)}.bc a:hover{text-decoration:underline}
.ph h1{font-size:clamp(3rem,7vw,6rem);line-height:.95}
.ph p{color:var(--muted);font-size:1.05rem;max-width:500px;margin-top:.8rem}

/* FOOTER */
footer{background:var(--bg);border-top:1px solid var(--border);padding:3rem 0;position:relative;z-index:2}
.fi2{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1.2rem}
.flogo{font-family:var(--font-display);font-size:1.5rem;letter-spacing:.06em}.flogo span{color:var(--accent)}
.flinks{display:flex;gap:1.8rem;list-style:none}.flinks a{font-size:.78rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);transition:color .2s}.flinks a:hover{color:var(--accent)}
.fcopy{font-size:.75rem;color:var(--muted);font-weight:400}
.fsocials{display:flex;gap:1rem;align-items:center}
.fsocials a{color:var(--muted);font-size:1rem;transition:color .2s}.fsocials a:hover{color:var(--accent)}

/* REVEAL on scroll */
.rv{opacity:0;transform:translateY(30px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
.rv.visible{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}

/* BACK TO TOP */
.btt{position:fixed;bottom:2rem;right:2rem;width:44px;height:44px;border-radius:50%;background:var(--accent);color:#fff;border:none;font-size:1.2rem;cursor:pointer;z-index:10000;opacity:0;transform:translateY(10px);transition:opacity .3s,transform .3s,background .2s;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(224,67,58,.4)}
.btt.show{opacity:1;transform:none}.btt:hover{background:var(--accent2)}

/* RESPONSIVE */
@media(max-width:900px){
  .nlinks{display:none}.hbg{display:flex}
  section{padding:5rem 0}
  .ph{padding:8rem 0 4rem}
}
@media(max-width:560px){
  .container{padding:0 1.2rem}
  .fi2{flex-direction:column;align-items:flex-start}
}

/* =========================================================
   MOBILE WIDTH FIX — prevents horizontal overflow on phones
   Added to make every page fit the screen on small devices.
   ========================================================= */
html,
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

body{
  min-width:0;
}

main,
section,
nav,
footer,
.container,
.ph,
.mm{
  max-width:100%;
}

.container{
  width:100%;
}

img,
video,
canvas,
svg,
iframe{
  max-width:100%;
}

*{
  min-width:0;
}

h1,h2,h3,h4,p,a,span,div,button,input,textarea,select{
  overflow-wrap:break-word;
  word-break:normal;
}

/* Keep fixed decorative layers from creating phantom width */
#pc,
body::after{
  max-width:100vw;
  overflow:hidden;
}

/* Safer grids used across pages */
.news-grid,
.bg{
  grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)) !important;
}

/* Mobile/tablet layout tightening */
@media(max-width:900px){
  .container{
    padding-left:1.2rem;
    padding-right:1.2rem;
  }

  .fg-inner,
  .as-inner,
  .lol-inner,
  .gd-header,
  .req-grid,
  .lol-card,
  .story-grid,
  .cg,
  .fp{
    grid-template-columns:1fr !important;
    gap:2rem !important;
  }

  .sb-inner,
  .fp-foot,
  .fi2{
    align-items:flex-start !important;
  }

  .sb-right{
    align-items:flex-start !important;
  }

  .gallery-strip{
    overflow:hidden;
  }
}

/* Small phone fixes */
@media(max-width:560px){
  .container{
    padding-left:1rem;
    padding-right:1rem;
  }

  section{
    padding-left:0;
    padding-right:0;
  }

  nav{
    padding:.85rem 0;
  }

  .nl{
    font-size:1.35rem;
    max-width:72vw;
    white-space:nowrap;
  }

  .mm{
    padding:2rem 1rem;
    gap:1.5rem;
  }

  .mm a{
    font-size:clamp(2rem,12vw,2.6rem);
    max-width:100%;
    text-align:center;
  }

  .ph h1{
    font-size:clamp(2.6rem,15vw,4rem) !important;
  }

  .stitle{
    font-size:clamp(2.1rem,12vw,3rem) !important;
  }

  .btn,
  button,
  input,
  textarea,
  select{
    max-width:100%;
  }

  .btn{
    width:100%;
    justify-content:center;
    padding:.75rem 1rem;
  }

  .hbadge,
  .lol-label,
  .cat,
  .tag,
  .nc-cat{
    max-width:100%;
    white-space:normal;
  }

  .hbadge{
    align-items:flex-start;
    border-radius:10px;
    font-size:.66rem;
    letter-spacing:.12em;
    line-height:1.35;
  }

  .htitle{
    font-size:clamp(3rem,18vw,4rem) !important;
    letter-spacing:.01em;
  }

  .hdesc{
    font-size:1rem !important;
    max-width:100%;
  }

  .hbtns,
  .fg-btns,
  .lol-tags,
  .fg-tags{
    width:100%;
  }

  .sb-title,
  .lol-title{
    font-size:clamp(2.6rem,15vw,4rem) !important;
  }

  .sb-price{
    font-size:2.6rem !important;
  }

  .fg-stats,
  .stats-grid,
  .stats-grid2,
  .gd-meta-grid,
  .fr,
  .faq-grid{
    grid-template-columns:1fr !important;
  }

  .fg-stats{
    flex-direction:column;
    gap:1rem !important;
  }

  .stat-box,
  .stat-card,
  .steam-card,
  .social-card,
  .gc,
  .nc,
  .bc2,
  .fp,
  .tc,
  .faq,
  .form-wrap{
    max-width:100%;
  }

  .steam-game-row,
  .si,
  .req-row{
    align-items:flex-start;
  }

  .steam-game-row{
    flex-direction:column;
  }

  .steam-game-row img{
    width:100% !important;
  }

  .team-grid,
  .ss-grid{
    grid-template-columns:1fr !important;
  }

  .req-row{
    flex-direction:column;
    gap:.25rem !important;
  }

  .req-key{
    width:auto !important;
  }

  .btt{
    right:1rem;
    bottom:1rem;
  }
}

/* Extra narrow devices */
@media(max-width:380px){
  .container{
    padding-left:.85rem;
    padding-right:.85rem;
  }

  .htitle{
    font-size:clamp(2.6rem,17vw,3.4rem) !important;
  }

  .hbadge{
    font-size:.6rem;
    letter-spacing:.08em;
    padding:.35rem .7rem;
  }

  .btn{
    font-size:.82rem;
    letter-spacing:.05em;
  }

  .fg-badge,
  .gd-badge{
    position:static !important;
    display:inline-flex;
    margin:.75rem;
    max-width:calc(100% - 1.5rem);
  }
}

/* =========================================================
   MOBILE FOOTER FIX — prevents footer links from being cut off
   ========================================================= */
footer,
.fi2,
.flinks,
.fsocials,
.fcopy{
  max-width:100%;
}

.flinks{
  flex-wrap:wrap;
  row-gap:.7rem;
}

@media(max-width:700px){
  footer{
    padding:2.5rem 0;
  }

  .fi2{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:flex-start;
    gap:1.1rem;
    width:100%;
  }

  .flinks{
    width:100%;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.75rem 1rem;
  }

  .flinks li,
  .flinks a{
    min-width:0;
    max-width:100%;
  }

  .flinks a{
    display:block;
    font-size:.76rem;
    line-height:1.3;
    white-space:normal;
  }

  .fsocials{
    flex-wrap:wrap;
  }

  .fcopy{
    width:100%;
    line-height:1.5;
  }
}

@media(max-width:380px){
  .flinks{
    grid-template-columns:1fr;
  }

  .flinks a{
    font-size:.74rem;
  }
}