@import url('https://fonts.googleapis.com/css2?family=Oxanium:wght@200;300;400;600;700;800&display=swap');

  :root {
    /* Layout */
    --nav-height:        48px;
    --local-nav-height:  64px;

    /* Page backgrounds */
    --bg-page:           #151616;
    --bg-ea-play:        #151616;
    --bg-network-nav:    #000000;
	--bg-local-nav: rgba(21, 22, 22, 0.90);
    --bg-card:           #323232;
    --bg-local-footer:   #323232;
    --bg-network-footer: #212222;

    /* Text */
    --text-primary:      #ffffff;
    --text-muted:        rgba(255,255,255,0.75);
    --text-faint:        rgba(255,255,255,0.4);
    --text-nav-link:     rgba(255,255,255,0.8);
    --text-footer-link:  rgba(255,255,255,0.75);
    --text-nf-link:      rgba(255,255,255,0.6);

    /* Buttons */
    --btn-primary-bg:    #ffffff;
    --btn-primary-text:  #000000;
    --btn-gold-bg:       #b8892a;
    --btn-gold-text:     #ffffff;
    --btn-gold-hover:    #cfa040;

    /* Tags */
    --tag-solid-bg:      #ffffff;
    --tag-solid-text:    #000000;
    --tag-outline-text:  rgba(255,255,255,0.7);
    --tag-outline-border:rgba(255,255,255,0.35);

    /* Borders & dividers */
    --border-nav:        rgba(255,255,255,0.08);
    --border-icon-btn:   rgba(255,255,255,0.25);
    --divider:           rgba(255,255,255,0.12);
    --divider-footer:    rgba(255,255,255,0.1);
    --divider-nf:        rgba(255,255,255,0.08);
    --divider-nf-link:   rgba(255,255,255,0.18);

    /* Misc */
    --privacy-badge-bg:  #1558b0;
    --esrb-text:         rgba(255,255,255,0.5);
  }


  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { background: var(--bg-page); color: var(--text-primary); scroll-behavior: smooth; }
  body { font-family: 'Oxanium'; font-size: 16px; line-height: 1.5; background: var(--bg-page); overflow-x: hidden; }
  a { color: inherit; text-decoration: none; }
  img { display: block; max-width: 100%; }
  ul { list-style: none; }
  button { background: none; border: none; cursor: pointer; font: inherit; color: inherit; }

  /* ─── NETWORK NAV ─── */
  .network-nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 200;
    height: var(--nav-height); background: var(--bg-network-nav);
    display: flex; align-items: center; padding: 0 24px;
    border-bottom: 1px solid var(--border-nav);
  }
  .network-nav-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 1270; margin: 0 auto; }
  .icon-btn { width: 36px; height: 36px; border: 1px solid var(--border-icon-btn); border-radius: 4px; display: flex; align-items: center; justify-content: center; transition: border-color 0.2s; }
  .icon-btn:hover { border-color: rgba(255,255,255,0.6); }

  /* ─── LOCAL NAV ─── */
  .local-nav {
    position: fixed; top: var(--nav-height); left: 0; right: 0; z-index: 199;
    height: var(--local-nav-height); background: var(--bg-local-nav);
    backdrop-filter: blur(48px); border-bottom: 1px solid var(--border-nav);
    display: flex; align-items: center; padding: 0 24px;
  }
  .local-nav-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 1270; margin: 0 auto; }
  .local-nav-btn { display: flex; align-items: center; gap: 4px; padding: 8px 16px; font-size: 14px; font-weight: 500; color: var(--text-nav-link); border-radius: 4px; transition: color 0.2s; }
  .local-nav-btn:hover { color: var(--text-primary); }

  /* ─── MAIN ─── */
  main { padding-top: calc(var(--nav-height) + var(--local-nav-height)); }

  /* ─── EDITORIAL SECTION ─── */
  .editorial-section { display: grid; grid-template-columns: 1fr 1fr; align-items: center; max-width: 1392px; margin: 0 auto; padding: 64px 80px; gap: 48px; }
  .editorial-title { font-size: 48px; font-weight: 700; line-height: 1.1; letter-spacing: -0.5px; margin-bottom: 4px; }
  .editorial-divider { display: block; width: 48px; height: 3px; background: var(--text-primary); margin: 16px 0 24px; }
  .editorial-text { font-size: 18px; color: var(--text-muted); line-height: 1.6; margin-bottom: 32px; }

  /* ─── BUTTONS ─── */
  .btn { display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; font-weight: 700; cursor: pointer; transition: opacity 0.2s, transform 0.15s; }
  .btn:hover { opacity: 0.88; transform: translateY(-1px); }
  .btn-lg { background: var(--btn-primary-bg); color: var(--btn-primary-text); padding: 14px 32px; font-size: 16px; }
  .btn-sm { background: var(--btn-primary-bg); color: var(--btn-primary-text); padding: 10px 20px; font-size: 14px; }
  .btn-gold { background: var(--btn-gold-bg); color: var(--btn-gold-text); padding: 10px 20px; font-size: 14px; }
  .btn-gold:hover { background: var(--btn-gold-hover); opacity: 1; }

 /* ─── DIVIDER ─── */
  .section-divider { width: 100%; max-width: 1392px; height: 1px; background: var(--divider); margin: 0 auto; padding: 0 80px; background-clip: content-box; }

.divider-wrap { padding: 0 80px; }
.divider-wrap .section-divider { max-width: 1392px; margin: 0 auto; height: 1px; background: var(--divider); }

  /* ─── MEDIA HEROES ─── */
  .media-heroes-wrapper { max-width: 1392px; margin: 0 auto; padding: 64px 80px; display: flex; flex-direction: column; gap: 96px; }
  .media-hero-grid { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 48px; }
  .media-hero-thumb { position: relative; overflow: hidden; border-radius: 4px; }
  .media-hero-thumb img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; transition: transform 0.4s; }
  .media-hero-thumb:hover img { transform: scale(1.02); }
  .play-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.2); transition: background 0.2s; }
  .play-overlay:hover { background: rgba(0,0,0,0.38); }
  .play-circle { width: 64px; height: 64px; background: rgba(255,255,255,0.9); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 24px rgba(0,0,0,0.4); }
  .play-circle svg { margin-left: 4px; }
  .media-hero-heading { font-size: 28px; font-weight: 600; line-height: 1.2; margin-bottom: 16px; letter-spacing: -0.3px; }
  .media-hero-body { font-size: 16px; color: var(--text-muted); line-height: 1.65; margin-bottom: 24px; }

  /* ─── GAME CARDS ─── */
  .row-section { max-width: 1392px; margin: 0 auto; padding: 64px 80px; }
  .row-section-title { font-size: 66px; font-weight: 200; margin-bottom: 32px; }
  .cards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .card { display: block; background: var(--bg-card); border-radius: 8px; overflow: hidden; transition: transform 0.25s, box-shadow 0.25s; }
  .card:hover { transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,0.5); }
  .card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
  .card-body { padding: 16px; }
  .card-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
  .tag { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 3px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
  .tag-solid { background: var(--tag-solid-bg); color: var(--tag-solid-text); }
  .tag-outline { background: transparent; color: var(--tag-outline-text); border: 1px solid var(--tag-outline-border); }
  .card-title { font-size: 16px; font-weight: 700; margin-bottom: 8px; line-height: 1.3; }
  .card-price { display: flex; align-items: baseline; gap: 1px; }
  .price-dollar, .price-cents { font-size: 14px; font-weight: 700; }
  .price-int { font-size: 22px; font-weight: 700; line-height: 1; }

  /* ─── EA PLAY ─── */
  .ea-play-section { background: var(--bg-ea-play); padding: 64px 80px; }
  .ea-play-inner { max-width: 1392px; margin: 0 auto; }
  .ea-play-grid { display: grid; grid-template-columns: 1.68fr 1fr; align-items: center; gap: 64px; }
  .ea-play-heading { font-size: 28px; font-weight: 700; line-height: 1.2; margin-bottom: 16px; }
  .ea-play-body { font-size: 16px; color: var(--text-muted); line-height: 1.65; margin-bottom: 24px; }

  /* ─── LOCAL FOOTER ─── */
  .local-footer { background: var(--bg-local-footer); padding: 40px 80px 32px; }
  .local-footer-inner { max-width: 1392px; margin: 0 auto; }
  .footer-top-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; }
  .footer-social { display: flex; gap: 8px; }
  .footer-right-row { display: flex; align-items: center; gap: 12px; }
  .footer-lang-btn, .footer-backtop-btn { display: flex; align-items: center; gap: 6px; font-size: 13px; color: rgba(255,255,255,0.7); border: 1px solid var(--border-icon-btn); border-radius: 4px; padding: 7px 14px; transition: border-color 0.2s; }
  .footer-lang-btn:hover, .footer-backtop-btn:hover { border-color: rgba(255,255,255,0.7); color: var(--text-primary); }
  .footer-logo-row { display: flex; align-items: center; gap: 24px; margin-bottom: 28px; padding-bottom: 28px; border-bottom: 1px solid var(--divider-footer); }
  .footer-logo-row .esrb-badge { margin-left: auto; display: flex; align-items: center; gap: 12px; }
  .esrb-text { font-size: 11px; color: var(--esrb-text); max-width: 200px; line-height: 1.4; }
  .footer-nav-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
  .footer-nav-links a { font-size: 14px; color: var(--text-footer-link); transition: color 0.2s; }
  .footer-nav-links a:hover { color: var(--text-primary); }

  /* ─── NETWORK FOOTER ─── */
  .network-footer { background: var(--bg-network-footer); padding: 24px 80px 20px; border-top: 1px solid var(--divider-nf); }
  .network-footer-inner { max-width: 1392px; margin: 0 auto; }
  .nf-links { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
  .nf-links a, .nf-links button { font-size: 13px; color: var(--text-nf-link); padding: 4px 14px; border-right: 1px solid var(--divider-nf-link); transition: color 0.2s; display: flex; align-items: center; gap: 4px; }
  .nf-links a:first-child, .nf-links button:first-child { padding-left: 0; }
  .nf-links a:last-child { border-right: none; }
  .nf-links a:hover, .nf-links button:hover { color: rgba(255,255,255,0.9); }
  .privacy-badge { display: inline-flex; align-items: center; gap: 5px; background: var(--privacy-badge-bg); color: var(--text-primary); font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 3px; }
  .footer-vat { font-size: 12px; color: var(--text-faint); margin-bottom: 16px; line-height: 1.5; }
  .footer-copyright-bar { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; border-top: 1px solid var(--divider-nf); }
  .footer-copyright { font-size: 13px; color: var(--text-faint); }

  /* ─── RESPONSIVE ─── */
  @media (max-width: 1024px) {
    .editorial-section, .media-heroes-wrapper, .row-section, .ea-play-section, .local-footer, .network-footer { padding-left: 40px; padding-right: 40px; }
    .cards-grid { grid-template-columns: repeat(2, 1fr); }
  }
  
@media (max-width: 1024px) { .divider-wrap { padding: 0 40px; } }
@media (max-width: 768px)  { .divider-wrap { padding: 0 20px; } }

  @media (max-width: 768px) {
    .editorial-section, .media-hero-grid, .ea-play-grid { grid-template-columns: 1fr; }
    .cards-grid { grid-template-columns: 1fr 1fr; }
    .editorial-section, .media-heroes-wrapper, .row-section, .ea-play-section, .local-footer, .network-footer { padding-left: 20px; padding-right: 20px; }
    .editorial-title { font-size: 32px; }
  }
 
/* ─── MOBILE FIX RESPONSIVE ─── */
 @media (max-width: 768px) {
  .footer-top-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .footer-social {
    flex-wrap: wrap;
  }
  .footer-right-row {
    width: 100%;
  }
  .footer-lang-btn,
  .footer-backtop-btn {
    flex: 1;
    justify-content: center;
    min-width: 120px;
  }
}

/* LOGO EFFECTS */

@keyframes corrupt {
  0%,91%,100% {
    clip-path: none;
    transform: translate(0) skewX(0deg);
    filter: none;
  }
  92% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transform: translate(-12px, 0) skewX(-3deg);
    filter: brightness(0.4);
  }
  93% {
    clip-path: polygon(0 42%, 100% 42%, 100% 61%, 0 61%);
    transform: translate(14px, 0) skewX(4deg);
    filter: brightness(2.5);
  }
  94% {
    clip-path: polygon(0 8%, 100% 8%, 100% 22%, 0 22%);
    transform: translate(-8px, 0) skewX(-2deg);
    filter: brightness(4) saturate(0);
  }
  95% {
    clip-path: polygon(0 70%, 100% 70%, 100% 88%, 0 88%);
    transform: translate(10px, 0) skewX(2deg);
    filter: brightness(3);
  }
  96% {
    clip-path: none;
    transform: translate(-4px, 0) skewX(0deg);
    filter: brightness(1.2);
  }
  97% {
    transform: translate(0);
    filter: none;
  }
}
.hero-logo {
  width: 100%;
  opacity: 1;
  animation: corrupt 5s step-end infinite 2s;
}

/* LOGO EFFECTS */