/* ═══════════════════════════════════════════════════════════════
   MCX Game Detail Pages — Full Design System
   Loaded by all 47 game pages. Each page sets --accent via inline style.
   ═══════════════════════════════════════════════════════════════ */
:root{--mcx-gold:#fff0b6;--mcx-green:#73ffd6;}
html{scroll-behavior:smooth;}

/* Background uses --accent set per-page */
.mcx-bg{
  background:
    radial-gradient(circle at 50% 12%,rgba(var(--accent-rgb,120,232,255),.13),transparent 32%),
    radial-gradient(circle at 15% 18%,rgba(var(--accent-rgb,120,232,255),.09),transparent 28%),
    linear-gradient(180deg,#030c0a 0%,#020605 52%,#000 100%);
}

/* Sub-nav */
.game-subnav{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:clamp(18px,3vw,34px) auto 0;width:min(1120px,100%);}
.game-pill{display:inline-flex;align-items:center;padding:11px 16px;border-radius:999px;border:1px solid rgba(var(--accent-rgb,120,232,255),.24);background:rgba(1,10,9,.72);color:rgba(235,255,250,.86);font-weight:950;text-transform:uppercase;letter-spacing:.09em;text-decoration:none;transition:.18s ease;}
.game-pill:hover{border-color:rgba(var(--accent-rgb,120,232,255),.6);color:#fff;transform:translateY(-1px);}
.game-hero-note{max-width:850px;margin:16px auto 0;text-align:center;color:rgba(235,255,250,.68);line-height:1.6;font-size:.96rem;}

/* Stats */
.gt-stat-row{width:min(1120px,100%);margin:0 auto 32px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;}
.gt-stat{padding:16px 14px;border:1px solid rgba(var(--accent-rgb,120,232,255),.18);border-radius:16px;background:linear-gradient(180deg,rgba(2,22,22,.84),rgba(0,5,5,.72));text-align:center;}
.gt-stat strong{display:block;color:#fff1bf;font-size:1.3rem;font-weight:950;letter-spacing:-.02em;}
.gt-stat span{display:block;margin-top:4px;color:rgba(235,255,250,.5);font-size:.75rem;font-weight:800;text-transform:uppercase;letter-spacing:.08em;}

/* News grid */
.gt-news-grid{width:min(1120px,100%);margin:0 auto 32px;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:14px;align-items:start;}
.gt-news-card{position:relative;padding:20px;border:1px solid rgba(var(--accent-rgb,120,232,255),.16);border-radius:18px;background:linear-gradient(180deg,rgba(2,22,22,.84),rgba(0,5,5,.72));text-decoration:none;display:grid;gap:9px;align-content:start;overflow:hidden;transition:transform .18s ease,border-color .18s ease;}
.gt-news-card::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 0,rgba(var(--accent-rgb,120,232,255),.07),transparent 55%);pointer-events:none;}
.gt-news-card>*{position:relative;}
.gt-news-card:hover{transform:translateY(-4px);border-color:rgba(var(--accent-rgb,120,232,255),.36);}
.gt-news-card--featured{border-color:rgba(var(--accent-rgb,120,232,255),.28);}
.gt-news-tag{display:inline-flex;width:max-content;min-height:24px;align-items:center;padding:0 10px;border:1px solid rgba(var(--accent-rgb,120,232,255),.28);border-radius:999px;background:rgba(0,0,0,.38);color:var(--accent,#78e8ff);font-size:.65rem;font-weight:950;letter-spacing:.12em;text-transform:uppercase;}
.gt-news-card strong{display:block;color:#fff5cf;font-size:.98rem;font-weight:950;line-height:1.3;}
.gt-news-card--featured strong{font-size:1.06rem;}
.gt-news-card p{margin:0;color:rgba(235,255,250,.62);font-size:.88rem;line-height:1.5;}
.gt-news-card b{color:var(--accent,#78e8ff);font-size:.82rem;text-transform:uppercase;letter-spacing:.08em;}

/* Class / feature cards grid */
.gt-class-grid{width:min(1120px,100%);margin:0 auto 32px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
.gt-class-card{padding:18px;border:1px solid rgba(var(--accent-rgb,120,232,255),.14);border-radius:18px;background:linear-gradient(180deg,rgba(2,18,22,.7),rgba(0,5,8,.6));display:grid;gap:8px;transition:border-color .18s,transform .18s;}
.gt-class-card:hover{border-color:rgba(var(--accent-rgb,120,232,255),.36);transform:translateY(-2px);}
.gt-class-card strong{color:var(--accent,#78e8ff);font-size:1rem;font-weight:950;}
.gt-class-role{display:inline-flex;width:max-content;min-height:22px;align-items:center;padding:0 9px;border-radius:999px;font-size:.68rem;font-weight:950;letter-spacing:.08em;text-transform:uppercase;}
.gt-class-role--tank  {border:1px solid rgba(120,216,255,.3);background:rgba(4,20,32,.5);color:#82d8ff;}
.gt-class-role--support{border:1px solid rgba(255,193,64,.3);background:rgba(36,26,2,.5);color:#ffc140;}
.gt-class-role--ranged {border:1px solid rgba(80,220,120,.3);background:rgba(4,24,10,.5);color:#50dc78;}
.gt-class-role--melee  {border:1px solid rgba(255,80,60,.3);background:rgba(38,8,4,.5);color:#ff7060;}
.gt-class-role--caster {border:1px solid rgba(180,100,255,.3);background:rgba(20,5,40,.5);color:#c080ff;}
.gt-class-role--hybrid {border:1px solid rgba(255,193,64,.24);background:rgba(30,20,2,.5);color:#ffca60;}
.gt-class-card p{margin:0;color:rgba(235,255,250,.58);font-size:.85rem;line-height:1.45;}

/* Endgame grid */
.gt-endgame-grid{width:min(1120px,100%);margin:0 auto 32px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
.gt-endgame-card{padding:22px;border:1px solid rgba(var(--accent-rgb,120,232,255),.16);border-radius:18px;background:linear-gradient(180deg,rgba(2,22,22,.84),rgba(0,5,5,.72));display:grid;gap:9px;align-content:start;transition:border-color .18s,transform .18s;}
.gt-endgame-card:hover{border-color:rgba(var(--accent-rgb,120,232,255),.34);transform:translateY(-2px);}
.gt-endgame-icon{font-size:1.6rem;}
.gt-endgame-card strong{display:block;color:#fff7c4;font-size:1rem;font-weight:950;}
.gt-endgame-card p{margin:0;color:rgba(235,255,250,.60);font-size:.88rem;line-height:1.5;}
.gt-endgame-card a{color:var(--accent,#78e8ff);font-size:.82rem;font-weight:900;text-decoration:none;text-transform:uppercase;letter-spacing:.08em;}
.gt-endgame-card a:hover{color:#fff;}

/* Feature / tools grid */
.gt-feature-grid{width:min(1120px,100%);margin:0 auto 32px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;}
.gt-feature-card{padding:22px;border:1px solid rgba(var(--accent-rgb,120,232,255),.14);border-radius:18px;background:linear-gradient(180deg,rgba(2,18,22,.7),rgba(0,5,8,.6));display:grid;gap:9px;align-content:start;}
a.gt-feature-card{text-decoration:none;transition:border-color .18s,transform .18s;}
a.gt-feature-card:hover{border-color:rgba(var(--accent-rgb,120,232,255),.42);transform:translateY(-3px);}
.gt-feature-icon{font-size:1.8rem;}
.gt-feature-card strong{display:block;color:#fff5cf;font-size:1rem;font-weight:950;}
.gt-feature-card p{margin:0;color:rgba(235,255,250,.60);font-size:.88rem;line-height:1.5;}
.gt-feature-card b{color:var(--accent,#78e8ff);font-size:.82rem;font-weight:900;text-transform:uppercase;letter-spacing:.08em;}

/* Responsive */
@media(max-width:1080px){
  .gt-stat-row{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gt-news-grid{grid-template-columns:1fr 1fr}
  .gt-class-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gt-endgame-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gt-feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .gt-stat-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gt-news-grid,.gt-class-grid,.gt-endgame-grid,.gt-feature-grid{grid-template-columns:1fr}
}