/*
Theme Name: GameGG Midnight
Theme URI: https://game-gg.com/
Author: GameGG
Description: Midnight Arcade theme for GameGG gaming news, codes, reviews, and PC/mobile specs.
Version: 1.0.15
Text Domain: gamegg-midnight
*/
:root{
      --bg:#17131f;
      --deep:#090d20;
      --card:#111a35;
      --card2:#172143;
      --line:#314277;
      --line2:#6c35d8;
      --ink:#f5f1fb;
      --muted:#b3a9c6;
      --faint:#7f8bae;
      --coral:#ff6472;
      --pink:#ff43c5;
      --blue:#5b93ff;
      --cyan:#1ed4ff;
      --active:#3ad99f;
      --gold:#ffc24b;
      --purple:#7d4cff;
      --body:"IBM Plex Sans Thai",system-ui,sans-serif;
      --head:"Chakra Petch","IBM Plex Sans Thai",system-ui,sans-serif;
      --mono:"JetBrains Mono",ui-monospace,monospace;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth}
    body{
      margin:0;
      color:var(--ink);
      font-family:var(--body);
      line-height:1.55;
      background:
        radial-gradient(900px 540px at 52% 0%,rgba(91,147,255,.18),transparent 62%),
        radial-gradient(680px 420px at 100% 18%,rgba(255,67,197,.16),transparent 60%),
        radial-gradient(760px 460px at 0% 28%,rgba(30,212,255,.10),transparent 66%),
        linear-gradient(180deg,#050817 0%,#07102a 48%,#090814 100%);
    }

    a{color:inherit;text-decoration:none}
    img{max-width:100%;display:block}
    .page{max-width:1480px;margin:0 auto}
    .site-page h1,.site-page h2,.site-page h3,.site-page h4,.site-page h5{color:var(--ink);margin:0}

    .topnav{
      position:sticky;
      top:0;
      z-index:20;
      display:grid;
      grid-template-columns:auto 1fr auto auto;
      align-items:center;
      gap:26px;
      min-height:74px;
      padding:0 36px;
      background:rgba(4,8,25,.82);
      border-bottom:1px solid rgba(91,147,255,.18);
      backdrop-filter:blur(18px);
      box-shadow:0 18px 54px rgba(0,0,0,.35);
    }

    .brand{
      display:flex;
      align-items:center;
      gap:12px;
      min-width:max-content;
      font-family:var(--head);
      font-size:25px;
      font-weight:700;
      font-style:italic;
      letter-spacing:.01em;
      color:#fff;
    }
    .brand-mark{
      width:52px;
      height:42px;
      flex:none;
      display:block;
      filter:drop-shadow(0 0 10px rgba(255,67,197,.8)) drop-shadow(0 0 14px rgba(91,147,255,.38));
    }
    .brand-word{
      display:inline-flex;
      align-items:baseline;
      gap:0;
      line-height:1;
      transform:skewX(-8deg);
      text-shadow:0 0 12px rgba(255,255,255,.26);
    }
    .brand-word .game{
      color:#fff;
      font-weight:700;
    }
    .brand-word .gg{
      color:#ff1fb8;
      font-weight:800;
      text-shadow:0 0 14px rgba(255,31,184,.6),0 0 24px rgba(255,31,184,.28);
    }
    .pulse{
      width:42px;
      height:26px;
      flex:none;
      filter:drop-shadow(0 0 10px rgba(255,67,197,.7));
    }
    .pulse svg{
      width:42px;
      height:26px;
      display:block;
    }
    .brand span{color:#fff}
    .brand b{color:var(--pink)}

    .menu{
      justify-self:center;
      display:flex;
      gap:28px;
      color:#e7ecff;
      font-size:15px;
      font-weight:600;
      white-space:nowrap;
    }
    .menu a{
      position:relative;
      padding:28px 0 25px;
      color:#ecf2ff;
    }
    .menu a.is-active::after{
      content:"";
      position:absolute;
      left:0;
      right:0;
      bottom:0;
      height:3px;
      border-radius:3px 3px 0 0;
      background:linear-gradient(90deg,var(--cyan),var(--purple));
      box-shadow:0 0 18px rgba(30,212,255,.75);
    }

    .search{
      display:flex;
      align-items:center;
      gap:9px;
      min-width:320px;
      height:40px;
      padding:0 16px;
      color:#9ba8d4;
      font-size:13px;
      border:1px solid rgba(91,147,255,.35);
      border-radius:999px;
      background:rgba(11,15,43,.72);
      box-shadow:inset 0 0 18px rgba(91,147,255,.08);
    }
    .avatar{
      width:38px;
      height:38px;
      display:grid;
      place-items:center;
      border-radius:50%;
      color:#dbcaff;
      border:1px solid rgba(125,76,255,.55);
      background:rgba(27,18,64,.8);
      box-shadow:0 0 22px rgba(125,76,255,.22);
    }

    .hero-wrap{
      position:relative;
      display:grid;
      grid-template-columns:minmax(0,1.14fr) minmax(430px,.78fr);
      gap:24px;
      padding:36px 34px 22px;
      overflow:hidden;
      min-height:332px;
    }
    .hero-wrap::before{
      content:"";
      position:absolute;
      inset:0 36% 0 0;
      background:
        linear-gradient(90deg,rgba(6,13,33,.12),rgba(6,13,33,.9) 74%,rgba(6,13,33,0)),
        url("https://images.unsplash.com/photo-1542751371-adc38448a05e?auto=format&fit=crop&w=1200&q=80") center/cover;
      opacity:.42;
      mask-image:linear-gradient(90deg,#000 0%,#000 66%,transparent 100%);
      pointer-events:none;
    }
    .hero-copy{
      position:relative;
      z-index:1;
      padding:32px 0 0 18px;
    }
    .hero-copy h1{
      max-width:13ch;
      margin:0;
      font-family:var(--head);
      font-size:clamp(42px,5vw,70px);
      line-height:1.1;
      letter-spacing:-.02em;
      text-shadow:0 0 26px rgba(91,147,255,.18);
    }
    .hero-copy p{
      max-width:680px;
      margin:16px 0 28px;
      color:#e6ecff;
      font-size:17px;
    }

    .quick{
      display:flex;
      flex-wrap:nowrap;
      gap:12px;
      overflow-x:auto;
      max-width:100%;
      padding:8px 0 10px;
      scrollbar-width:thin;
      scrollbar-color:rgba(91,147,255,.45) transparent;
    }
    .quick a{
      position:relative;
      flex:0 0 72px;
      width:72px;
      min-height:76px;
      display:grid;
      grid-template-rows:32px auto;
      place-items:center;
      gap:4px;
      padding:10px 8px;
      font-size:11px;
      color:#e9f3ff;
      border:1px solid rgba(91,147,255,.45);
      border-radius:9px;
      background:linear-gradient(180deg,rgba(18,30,66,.72),rgba(8,15,38,.76));
      box-shadow:0 0 20px rgba(30,212,255,.08), inset 0 0 18px rgba(91,147,255,.06);
      isolation:isolate;
      overflow:hidden;
      transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,background .18s ease;
      animation:quickGlow 4.8s ease-in-out infinite;
    }
    .quick a::before{
      content:"";
      position:absolute;
      inset:-1px;
      z-index:-1;
      border-radius:inherit;
      background:
        radial-gradient(circle at 50% 0%,rgba(30,212,255,.32),transparent 42%),
        linear-gradient(135deg,rgba(30,212,255,.34),rgba(255,67,197,.20),rgba(255,220,106,.16));
      opacity:.18;
      transition:opacity .18s ease;
    }
    .quick a::after{
      content:"";
      position:absolute;
      top:-28%;
      bottom:-28%;
      left:-90%;
      width:48%;
      z-index:1;
      background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
      transform:skewX(-18deg);
      animation:quickSweep 5.6s ease-in-out infinite;
      pointer-events:none;
    }
    .quick a:hover{
      transform:none;
      border-color:rgba(30,212,255,.9);
      background:linear-gradient(180deg,rgba(25,43,92,.92),rgba(10,19,48,.95));
      box-shadow:0 0 0 1px rgba(30,212,255,.32),0 0 28px rgba(30,212,255,.22),0 0 26px rgba(255,67,197,.16),inset 0 0 28px rgba(91,147,255,.14);
    }
    .quick a:hover::before{opacity:.42}
    .quick a:nth-child(2){animation-delay:.2s}
    .quick a:nth-child(3){animation-delay:.4s}
    .quick a:nth-child(4){animation-delay:.6s}
    .quick a:nth-child(5){animation-delay:.8s}
    .quick a:nth-child(6){animation-delay:1s}
    .quick a:nth-child(7){animation-delay:1.2s}
    .quick a:nth-child(8){animation-delay:1.4s}
    .quick a:nth-child(9){animation-delay:1.6s}
    .quick a:nth-child(2)::after{animation-delay:.45s}
    .quick a:nth-child(3)::after{animation-delay:.9s}
    .quick a:nth-child(4)::after{animation-delay:1.35s}
    .quick a:nth-child(5)::after{animation-delay:1.8s}
    .quick a:nth-child(6)::after{animation-delay:2.25s}
    .quick a:nth-child(7)::after{animation-delay:2.7s}
    .quick a:nth-child(8)::after{animation-delay:3.15s}
    .quick a:nth-child(9)::after{animation-delay:3.6s}
    @keyframes quickGlow{
      0%,100%{box-shadow:0 0 18px rgba(30,212,255,.08),inset 0 0 18px rgba(91,147,255,.06)}
      50%{box-shadow:0 0 26px rgba(30,212,255,.18),0 0 18px rgba(255,67,197,.10),inset 0 0 22px rgba(91,147,255,.11)}
    }
    @keyframes quickSweep{
      0%,58%{left:-90%;opacity:0}
      66%{opacity:.95}
      84%{left:142%;opacity:0}
      100%{left:142%;opacity:0}
    }
    .quick .icon{
      width:30px;
      height:30px;
      display:grid;
      place-items:center;
      color:var(--cyan);
      filter:drop-shadow(0 0 8px rgba(30,212,255,.6));
      transition:transform .18s ease,filter .18s ease;
      animation:iconFloat 3.6s ease-in-out infinite;
    }
    .quick .icon svg{
      width:26px;
      height:26px;
      stroke:currentColor;
      stroke-width:2;
      stroke-linecap:round;
      stroke-linejoin:round;
      fill:none;
    }
    .quick .icon .fill-accent{fill:currentColor;stroke:none}
    .quick a:hover .icon{transform:scale(1.13) translateY(-1px);filter:drop-shadow(0 0 12px currentColor)}
    .quick a:nth-child(2n) .icon{color:#ff7bf1}
    .quick a:nth-child(3n) .icon{color:#ffdc6a}
    .quick a:nth-child(2n) .icon{animation-delay:.35s}
    .quick a:nth-child(3n) .icon{animation-delay:.7s}
    @keyframes iconFloat{
      0%,100%{translate:0 0}
      50%{translate:0 -2px}
    }
    @media (prefers-reduced-motion:reduce){
      .quick a,.quick a::after,.quick .icon{animation:none}
      .quick a{transition:none}
    }

    .hero-slider{
      position:relative;
      z-index:1;
      align-self:center;
      min-height:304px;
      overflow:hidden;
      border:1px solid rgba(125,76,255,.9);
      border-radius:12px;
      background:#080e24;
      box-shadow:0 0 34px rgba(125,76,255,.26), inset 0 0 42px rgba(30,212,255,.09);
      touch-action:pan-y;
    }
    .hero-slides{position:absolute;inset:0}
    .feature{
      position:absolute;
      inset:0;
      z-index:0;
      min-height:100%;
      overflow:hidden;
      background:
        linear-gradient(90deg,rgba(5,9,24,.96) 0 30%,rgba(5,9,24,.36) 68%,rgba(5,9,24,.72)),
        url("https://images.unsplash.com/photo-1511512578047-dfb367046420?auto=format&fit=crop&w=1100&q=80") center/cover;
      opacity:0;
      visibility:hidden;
      transform:scale(1.018);
      transition:opacity .55s ease,transform .75s ease,visibility 0s linear .55s;
      pointer-events:none;
    }
    .feature.is-active{
      z-index:1;
      opacity:1;
      visibility:visible;
      transform:scale(1);
      transition-delay:0s;
      pointer-events:auto;
    }
    .feature-body{
      position:absolute;
      left:22px;
      right:22px;
      bottom:22px;
    }
    .pill{
      display:inline-flex;
      align-items:center;
      min-height:28px;
      padding:4px 12px;
      border-radius:5px;
      font-size:13px;
      font-weight:700;
      color:#fff;
      background:linear-gradient(135deg,#ff43c5,#a945ff);
      box-shadow:0 0 20px rgba(255,67,197,.34);
    }
    .feature h2{
      max-width:560px;
      margin:14px 0 8px;
      font-family:var(--head);
      font-size:23px;
      line-height:1.3;
    }
    .feature h2 a{color:inherit}
    .feature p{
      max-width:640px;
      margin:0 0 14px;
      color:#dce5ff;
      font-size:14px;
    }
    .meta{
      display:flex;
      align-items:center;
      flex-wrap:wrap;
      gap:10px;
      color:#c7d1f4;
      font-size:13px;
    }
    .dots{
      position:absolute;
      z-index:4;
      right:26px;
      bottom:24px;
      display:flex;
      gap:10px;
    }
    .dot{
      width:9px;
      height:9px;
      padding:0;
      border:0;
      border-radius:50%;
      background:#657091;
      cursor:pointer;
      transition:width .2s ease,background .2s ease,box-shadow .2s ease;
    }
    .dot.on{width:24px;border-radius:8px;background:linear-gradient(135deg,var(--cyan),var(--pink));box-shadow:0 0 14px rgba(255,67,197,.75)}
    .dot:focus-visible,.arrow:focus-visible{outline:2px solid #fff;outline-offset:3px}
    .arrow{
      position:absolute;
      z-index:4;
      top:50%;
      translate:0 -50%;
      width:36px;
      height:36px;
      display:grid;
      place-items:center;
      border-radius:50%;
      color:#fff;
      border:1px solid rgba(255,255,255,.28);
      background:rgba(4,8,22,.46);
      font-size:27px;
      line-height:1;
      cursor:pointer;
      opacity:0;
      transition:opacity .2s ease,background .2s ease,border-color .2s ease;
    }
    .hero-slider:hover .arrow,.hero-slider:focus-within .arrow{opacity:1}
    .arrow:hover{border-color:rgba(255,255,255,.72);background:rgba(4,8,22,.78)}
    .arrow.left{left:18px}
    .arrow.right{right:18px}

    .content{
      display:grid;
      grid-template-columns:minmax(0,1fr) 410px;
      gap:26px;
      padding:0 34px 32px;
    }
    .main{min-width:0}
    .section{margin-top:24px}
    .section-head{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:18px;
      margin:0 0 14px;
    }
    .section-head h2{
      margin:0;
      display:flex;
      align-items:center;
      gap:12px;
      font-family:var(--head);
      font-size:25px;
      line-height:1.2;
    }
    .section-head h2::before{
      content:"";
      width:4px;
      height:23px;
      border-radius:4px;
      background:linear-gradient(180deg,var(--pink),var(--cyan));
      box-shadow:0 0 16px rgba(255,67,197,.72);
    }
    .section-head a{
      color:var(--blue);
      font-size:14px;
      font-weight:600;
      white-space:nowrap;
    }

    .cards{
      display:grid;
      grid-template-columns:repeat(4,minmax(0,1fr));
      gap:14px;
    }
    .wide-cards{grid-template-columns:repeat(5,minmax(0,1fr))}
    .spec-cards{grid-template-columns:repeat(4,minmax(0,1fr))}
    .article-cards{grid-template-columns:repeat(4,minmax(0,1fr))}
    .card{
      min-height:100%;
      overflow:hidden;
      border:1px solid rgba(91,147,255,.43);
      border-radius:8px;
      background:linear-gradient(180deg,rgba(19,31,67,.92),rgba(8,17,42,.96));
      box-shadow:0 0 22px rgba(30,212,255,.07);
    }
    .card:hover{border-color:rgba(30,212,255,.8);box-shadow:0 0 30px rgba(30,212,255,.14)}
    .poster{
      position:relative;
      height:156px;
      overflow:hidden;
      background:var(--art),linear-gradient(135deg,#24335f,#0a1029);
    }
    .poster::before{
      content:"";
      position:absolute;
      inset:0;
      background:
        radial-gradient(circle at 72% 20%,rgba(255,255,255,.22),transparent 12%),
        linear-gradient(180deg,transparent 35%,rgba(4,8,22,.94) 100%);
    }
    .poster::after{
      content:attr(data-art);
      position:absolute;
      right:12px;
      bottom:8px;
      color:rgba(255,255,255,.74);
      font-family:var(--head);
      font-size:30px;
      font-weight:700;
      line-height:1;
      letter-spacing:.02em;
      text-shadow:0 0 20px rgba(0,0,0,.8);
    }
    .tag{
      position:absolute;
      top:10px;
      left:10px;
      z-index:2;
      display:inline-flex;
      min-height:23px;
      align-items:center;
      padding:3px 8px;
      border-radius:5px;
      font-size:11px;
      font-weight:700;
      color:#fff;
      background:linear-gradient(135deg,#874cff,#ff43c5);
      box-shadow:0 0 14px rgba(125,76,255,.56);
    }
    .card-body{padding:13px 13px 15px}
    .card h3{
      margin:0;
      min-height:3.15em;
      font-size:16px;
      line-height:1.36;
      font-weight:700;
    }
    .card p{
      margin:8px 0 0;
      min-height:4.5em;
      color:#aebbe2;
      font-size:12px;
      line-height:1.5;
    }
    .date{margin-top:9px;color:#bdc7e7;font-size:12px}
    .platforms{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}
    .platforms span{
      border:1px solid rgba(151,172,230,.5);
      border-radius:5px;
      padding:2px 8px;
      color:#d5defc;
      font-family:var(--mono);
      font-size:10px;
    }
    .carousel-dots{
      display:flex;
      justify-content:center;
      gap:8px;
      margin-top:11px;
    }

    .side{min-width:0}
    .trending{
      position:sticky;
      top:94px;
      margin-top:0;
      padding:22px;
      border:1px solid rgba(255,67,197,.85);
      border-radius:24px;
      background:
        linear-gradient(180deg,rgba(18,24,57,.93),rgba(8,14,36,.94)),
        radial-gradient(circle at top right,rgba(255,67,197,.20),transparent 44%);
      box-shadow:0 0 38px rgba(255,67,197,.22), inset 0 0 44px rgba(91,147,255,.08);
    }
    .trending h2{
      margin:0 0 18px;
      font-family:var(--head);
      font-size:25px;
    }
    .rank{
      display:grid;
      grid-template-columns:36px 128px 1fr;
      gap:12px;
      align-items:center;
      min-height:92px;
      padding:8px 0;
      border-top:1px solid rgba(91,147,255,.16);
    }
    .rank:first-of-type{border-top:none}
    .num{
      width:32px;
      height:32px;
      display:grid;
      place-items:center;
      align-self:start;
      border-radius:5px;
      color:#fff;
      font-family:var(--mono);
      font-weight:700;
      background:linear-gradient(135deg,#1599ff,#8b43ff);
      box-shadow:0 0 16px rgba(91,147,255,.36);
    }
    .rank:nth-of-type(1) .num,
    .rank:nth-of-type(2) .num,
    .rank:nth-of-type(3) .num{background:linear-gradient(135deg,#ff6fcf,#874cff)}
    .rank-pic{
      height:78px;
      border:1px solid rgba(91,147,255,.36);
      border-radius:6px;
      background:var(--art),linear-gradient(135deg,#253567,#0a1029);
      background-size:cover;
      position:relative;
      overflow:hidden;
    }
    .rank-pic::after{
      content:attr(data-art);
      position:absolute;
      right:8px;
      bottom:5px;
      color:#fff;
      font-family:var(--head);
      font-size:20px;
      font-weight:700;
      opacity:.78;
      text-shadow:0 0 12px rgba(0,0,0,.82);
    }
    .rank h3{
      margin:0;
      font-size:14px;
      line-height:1.35;
    }
    .rank p{
      margin:5px 0 0;
      color:#9fadcf;
      font-size:12px;
      line-height:1.45;
    }
    .rank-copy{min-width:0}
    .rank-metrics{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:6px;color:#aeb9dd;font-size:11px}
    .rank-metrics .view-count{padding-left:7px;border-left:1px solid rgba(91,147,255,.3)}
    .gamegg-stars{position:relative;display:inline-block;width:68px;height:16px;color:#526184;font-size:14px;line-height:16px;letter-spacing:0;white-space:nowrap}
    .gamegg-stars .stars-base,.gamegg-stars .stars-fill{position:absolute;inset:0;display:block;overflow:hidden}
    .gamegg-stars .stars-fill{width:var(--rating-width,0%);color:#ffc24b;text-shadow:0 0 10px rgba(255,194,75,.36)}

    .spec .poster{height:116px}
    .spec .card h3{min-height:auto}
    .spec-hero{
      display:grid;
      grid-template-columns:1.05fr .95fr;
      gap:14px;
      margin-bottom:14px;
    }
    .spec-checker{
      position:relative;
      min-height:214px;
      overflow:hidden;
      padding:20px;
      border:1px solid rgba(255,67,197,.58);
      border-radius:12px;
      background:
        linear-gradient(135deg,rgba(15,26,60,.96),rgba(36,20,62,.94)),
        radial-gradient(circle at 86% 18%,rgba(255,67,197,.24),transparent 34%);
      box-shadow:0 0 30px rgba(255,67,197,.12),inset 0 0 28px rgba(91,147,255,.08);
    }
    .spec-checker::after{display:none}
    .spec-checker .badge{
      position:relative;
      display:inline-flex;
      align-items:center;
      padding:4px 10px;
      border-radius:6px;
      color:#fff;
      font-size:12px;
      font-weight:700;
      background:linear-gradient(135deg,#ff43c5,#874cff);
      box-shadow:0 0 16px rgba(255,67,197,.28);
      z-index:1;
    }
    .spec-checker h3{
      position:relative;
      z-index:1;
      max-width:520px;
      margin:12px 0 8px;
      font-family:var(--head);
      font-size:28px;
      line-height:1.2;
    }
    .spec-checker p{
      position:relative;
      z-index:1;
      max-width:560px;
      margin:0 0 16px;
      color:#cbd6f6;
      font-size:13px;
    }
    .spec-actions{
      position:relative;
      z-index:1;
      display:flex;
      gap:10px;
      flex-wrap:wrap;
    }
    .spec-actions a{
      display:inline-flex;
      align-items:center;
      min-height:34px;
      padding:7px 12px;
      border-radius:8px;
      font-size:13px;
      font-weight:700;
      border:1px solid rgba(91,147,255,.36);
      background:rgba(10,18,46,.68);
    }
    .spec-actions a:first-child{
      border-color:rgba(30,212,255,.75);
      background:linear-gradient(135deg,rgba(30,212,255,.22),rgba(125,76,255,.28));
      box-shadow:0 0 22px rgba(30,212,255,.14);
    }
    .spec-hot{
      display:grid;
      gap:10px;
    }
    .spec-row{
      display:grid;
      grid-template-columns:54px minmax(0,1fr) auto;
      gap:10px;
      align-items:center;
      padding:12px;
      border:1px solid rgba(91,147,255,.35);
      border-radius:11px;
      background:linear-gradient(180deg,rgba(19,31,67,.84),rgba(8,17,42,.94));
    }
    .spec-icon{
      width:54px;
      height:54px;
      display:grid;
      place-items:center;
      border-radius:9px;
      overflow:hidden;
      color:#fff;
      font-family:var(--mono);
      font-size:12px;
      font-weight:700;
      background:linear-gradient(135deg,#ff43c5,#5b93ff);
      border:1px solid rgba(91,147,255,.52);
      box-shadow:0 0 16px rgba(30,212,255,.12);
    }
    .spec-icon.has-photo{background:#080e24}
    .spec-icon.has-photo img{width:100%;height:100%;object-fit:cover;object-position:center}
    .spec-row b{display:block;font-size:14px}
    .spec-row span{display:block;color:#9fadcf;font-size:12px}
    .spec-tier{
      color:var(--active);
      font-family:var(--mono);
      font-size:11px;
      font-weight:700;
      white-space:nowrap;
    }
    .spec-list{
      margin:8px 0 0;
      padding:0;
      list-style:none;
      color:#c8d3ef;
      font-size:12px;
    }
    .spec-list li{display:grid;grid-template-columns:20px 54px 1fr;gap:5px;padding:1px 0}
    .spec-list b{color:#fff;font-family:var(--mono);font-size:10px}
    .spec-cards.spec-count-1{grid-template-columns:minmax(0,1fr)}
    .spec-cards.spec-count-2{grid-template-columns:repeat(2,minmax(0,1fr))}
    .spec-cards.spec-count-3{grid-template-columns:repeat(3,minmax(0,1fr))}
    .spec-card .poster.has-photo::before{
      background:linear-gradient(180deg,rgba(4,8,22,.02) 20%,rgba(4,8,22,.82) 100%);
    }
    .spec-card .spec-list span:first-child{color:#7f9fff}

    footer{
      margin-top:8px;
      padding:24px 34px 26px;
      display:grid;
      grid-template-columns:1.15fr repeat(4,1fr);
      gap:28px;
      border-top:1px solid rgba(91,147,255,.28);
      background:linear-gradient(180deg,rgba(5,10,27,.6),rgba(4,7,20,.95));
      color:#aeb9dd;
      font-size:13px;
    }
    footer h3,footer h4{margin:0 0 10px;color:#fff;font-family:var(--head)}
    footer ul{list-style:none;margin:0;padding:0}
    footer li{margin:5px 0}
    .social{display:flex;gap:8px;margin-top:12px}
    .social span{
      width:26px;
      height:26px;
      display:grid;
      place-items:center;
      border:1px solid rgba(91,147,255,.4);
      border-radius:5px;
      color:#e7edff;
    }

    @media(max-width:1220px){
      .topnav{grid-template-columns:auto 1fr auto;padding:0 22px}
      .menu{display:none}
      .search{min-width:260px}
      .hero-wrap{grid-template-columns:1fr;padding-inline:22px}
      .hero-slider{min-height:280px}
      .content{grid-template-columns:1fr;padding-inline:22px}
      .trending{position:static}
      .rank{grid-template-columns:38px 150px 1fr}
      footer{grid-template-columns:1fr 1fr}
    }
    @media(max-width:760px){
      .topnav{grid-template-columns:1fr auto;min-height:66px}
      .search{display:none}
      .brand{font-size:20px}
      .hero-copy{padding:18px 0 0}
      .hero-copy h1{font-size:40px;max-width:14ch}
      .hero-wrap{gap:20px}
      .quick{flex-wrap:wrap;overflow-x:visible;padding:0}
      .quick a{width:calc(25% - 11px)}
      .cards,.wide-cards,.spec-cards,.article-cards{grid-template-columns:1fr 1fr}
      .spec-cards.spec-count-1{grid-template-columns:1fr}
      .spec-cards.spec-count-2,.spec-cards.spec-count-3{grid-template-columns:1fr 1fr}
      .spec-hero{grid-template-columns:1fr}
      .rank{grid-template-columns:34px 116px 1fr}
      footer{grid-template-columns:1fr}
    }
    @media(max-width:520px){
      .topnav{padding-inline:16px}
      .hero-wrap,.content,footer{padding-inline:16px}
      .hero-copy h1{font-size:34px}
      .quick a{width:calc(50% - 7px)}
      .cards,.wide-cards,.spec-cards,.article-cards{grid-template-columns:1fr}
      .spec-cards.spec-count-1,.spec-cards.spec-count-2,.spec-cards.spec-count-3{grid-template-columns:1fr}
      .rank{grid-template-columns:34px 96px 1fr}
      .hero-slider{min-height:330px}
      .feature-body{left:18px;right:18px;bottom:46px}
      .feature h2{font-size:20px}
      .feature p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
      .dots{right:auto;left:50%;bottom:18px;translate:-50% 0}
      .arrow{opacity:1;width:32px;height:32px;font-size:23px}
      .arrow.left{left:10px}.arrow.right{right:10px}
    }

    @media(prefers-reduced-motion:reduce){
      .feature,.dot,.arrow{transition:none}
    }

    .article-hero{
      position:relative;
      max-width:1480px;
      margin:0 auto;
      padding:46px 34px 28px;
      border-bottom:1px solid rgba(91,147,255,.18);
      background:
        radial-gradient(circle at 78% 20%,rgba(255,67,197,.16),transparent 32%),
        radial-gradient(circle at 44% 0%,rgba(30,212,255,.12),transparent 36%),
        linear-gradient(180deg,rgba(5,9,27,.75),rgba(5,9,27,.16));
    }
    .article-hero .crumb{
      display:flex;
      gap:8px;
      align-items:center;
      margin-bottom:14px;
      color:#aeb9dd;
      font-family:var(--mono);
      font-size:12px;
    }
    .tag-row{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      margin-bottom:16px;
    }
    .article-hero h1{
      max-width:1080px;
      margin:0;
      font-family:var(--head);
      font-size:clamp(38px,5vw,70px);
      line-height:1.08;
      letter-spacing:0;
      text-shadow:0 0 26px rgba(91,147,255,.18);
    }
    .article-hero .lead{
      max-width:920px;
      margin:16px 0 0;
      color:#dce5ff;
      font-size:18px;
    }
    .byline{
      display:flex;
      flex-wrap:wrap;
      gap:10px 14px;
      align-items:center;
      margin-top:18px;
      color:#aeb9dd;
      font-size:13px;
    }
    .gamegg-rating{
      display:flex;align-items:center;gap:18px;flex-wrap:wrap;max-width:920px;margin-top:18px;padding:12px 14px;
      border:1px solid rgba(91,147,255,.34);border-radius:12px;background:rgba(8,15,38,.68);
      box-shadow:inset 0 0 18px rgba(91,147,255,.06);
    }
    .rating-summary{display:flex;align-items:center;gap:9px;flex-wrap:wrap;color:#b9c5e8;font-size:13px}
    .rating-summary>span:first-child{color:#fff;font-family:var(--head);font-weight:700}
    .rating-summary strong{color:#ffc24b;font-family:var(--mono)}
    .rating-actions{display:flex;align-items:center;gap:3px;margin-left:auto;color:#aeb9dd;font-size:13px}
    .rating-actions button{
      width:30px;height:30px;padding:0;border:0;background:transparent;color:#536184;font-size:23px;line-height:1;
      cursor:pointer;transition:color .16s ease,transform .16s ease,text-shadow .16s ease;
    }
    .rating-actions button:hover,.rating-actions button:focus-visible,.rating-actions button.is-selected{color:#ffc24b;transform:translateY(-1px);text-shadow:0 0 12px rgba(255,194,75,.48)}
    .rating-actions button:disabled{cursor:default;opacity:.72}
    .rating-message{flex-basis:100%;min-height:1.2em;margin:0;color:#8fe7c5;font-size:12px}
    .avatar-mini{
      width:28px;
      height:28px;
      border-radius:50%;
      border:1px solid rgba(125,76,255,.55);
      background:linear-gradient(135deg,#ff43c5,#5b93ff);
      box-shadow:0 0 16px rgba(125,76,255,.28);
    }
    .article-layout{
      display:grid;
      grid-template-columns:minmax(0,1fr) 410px;
      gap:24px;
      justify-content:center;
      max-width:1480px;
      margin:0 auto;
      padding:28px 34px 34px;
      align-items:start;
    }
    .article-shell{
      min-width:0;
      border:1px solid rgba(91,147,255,.36);
      border-radius:16px;
      padding:22px;
      background:linear-gradient(180deg,rgba(19,31,67,.9),rgba(8,17,42,.96));
      box-shadow:0 0 24px rgba(30,212,255,.08);
    }
    .post-cover{
      margin:0 0 24px;
    }
    .post-cover img{
      width:100%;
      height:auto;
      aspect-ratio:16/9;
      object-fit:cover;
      object-position:center;
      border-radius:14px;
      border:1px solid rgba(91,147,255,.44);
      box-shadow:0 0 34px rgba(30,212,255,.10);
    }
    .post-cover figcaption{
      margin:8px 0 0;
      color:#9fadcf;
      font-size:12px;
    }
    .entry-content{
      color:#e6ecff;
      font-size:17px;
      line-height:1.78;
    }
    .entry-content p{margin:0 0 18px}
    .entry-content h2{
      margin:34px 0 14px;
      padding-left:14px;
      border-left:3px solid var(--purple);
      font-family:var(--head);
      font-size:28px;
      line-height:1.25;
      color:#fff;
    }
    .entry-content h3{
      margin:24px 0 10px;
      font-family:var(--head);
      font-size:21px;
      color:#fff;
    }
    .entry-content ul,.entry-content ol{
      margin:0 0 20px;
      padding-left:24px;
    }
    .entry-content li{margin:7px 0}
    .entry-content a{
      color:#83cfff;
      text-decoration:underline;
      text-underline-offset:3px;
    }
    .entry-content strong,
    .entry-content b{
      font-weight:800;
      color:#fff;
    }
    .entry-content mark,
    .entry-content .gg-highlight{
      display:inline;
      padding:0 .24em .04em;
      border-radius:5px;
      color:#fff;
      font-weight:800;
      background:linear-gradient(90deg,rgba(255,67,197,.72),rgba(125,76,255,.68),rgba(30,212,255,.44));
      box-shadow:0 0 18px rgba(255,67,197,.26);
      -webkit-box-decoration-break:clone;
      box-decoration-break:clone;
    }
    .entry-content .gg-keyword{
      color:#ffdf6e;
      font-weight:900;
      text-shadow:0 0 14px rgba(255,194,75,.34);
    }
    .entry-content .gg-keyword-sub{
      color:#4de6ff;
      font-weight:850;
      text-shadow:0 0 14px rgba(30,212,255,.34);
    }
    .entry-content .gg-cyan{
      color:#4de6ff;
      font-weight:800;
      text-shadow:0 0 14px rgba(30,212,255,.36);
    }
    .entry-content .gg-pink{
      color:#ff68d4;
      font-weight:800;
      text-shadow:0 0 14px rgba(255,67,197,.36);
    }
    .entry-content table{
      width:100%;
      margin:18px 0 24px;
      border-collapse:collapse;
      overflow:hidden;
      border:1px solid rgba(91,147,255,.34);
      border-radius:12px;
      background:rgba(7,14,36,.75);
    }
    .entry-content th,.entry-content td{
      padding:12px 14px;
      border-bottom:1px solid rgba(91,147,255,.2);
      text-align:left;
      vertical-align:top;
    }
    .entry-content th{
      color:#fff;
      background:rgba(91,147,255,.12);
      font-family:var(--head);
    }
    @media(max-width:760px){
      .entry-content table.gamegg-mobile-cards{
        display:block;
        width:100%;
        max-width:100%;
        margin:16px 0 24px;
        overflow:visible;
        border:0;
        border-radius:0;
        background:transparent;
      }
      .entry-content table.gamegg-mobile-cards thead,
      .entry-content table.gamegg-mobile-cards colgroup,
      .entry-content table.gamegg-mobile-cards .gamegg-table-header-row{
        display:none;
      }
      .entry-content table.gamegg-mobile-cards tbody{
        display:grid;
        gap:12px;
        width:100%;
      }
      .entry-content table.gamegg-mobile-cards tbody tr{
        display:block;
        width:100%;
        overflow:hidden;
        border:1px solid rgba(91,147,255,.38);
        border-radius:12px;
        background:linear-gradient(180deg,rgba(18,29,63,.96),rgba(7,14,36,.98));
        box-shadow:0 0 18px rgba(30,212,255,.06);
      }
      .entry-content table.gamegg-mobile-cards tbody td,
      .entry-content table.gamegg-mobile-cards tbody th{
        width:100%;
        min-width:0;
        max-width:none;
        display:grid;
        grid-template-columns:minmax(88px,32%) minmax(0,1fr);
        gap:10px;
        padding:10px 12px;
        border:0;
        border-bottom:1px solid rgba(91,147,255,.16);
        background:transparent;
        box-shadow:none;
        white-space:normal;
        word-break:normal;
        overflow-wrap:anywhere;
        font-size:14px;
        line-height:1.55;
      }
      .entry-content table.gamegg-mobile-cards tbody td::before,
      .entry-content table.gamegg-mobile-cards tbody th::before{
        content:attr(data-label);
        color:#8fdfff;
        font-family:var(--head);
        font-size:12px;
        font-weight:700;
      }
      .entry-content table.gamegg-mobile-cards tbody td:first-child,
      .entry-content table.gamegg-mobile-cards tbody th:first-child{
        display:block;
        padding:11px 12px;
        color:#fff;
        background:linear-gradient(90deg,rgba(125,76,255,.26),rgba(30,212,255,.08));
        font-family:var(--head);
        font-size:15px;
        font-weight:700;
      }
      .entry-content table.gamegg-mobile-cards tbody td:first-child::before,
      .entry-content table.gamegg-mobile-cards tbody th:first-child::before{
        display:none;
      }
      .entry-content table.gamegg-mobile-cards tbody td:last-child,
      .entry-content table.gamegg-mobile-cards tbody th:last-child{
        border-bottom:0;
      }
    }
    .entry-content figure{
      margin:24px 0;
    }
    .entry-content figure img{
      width:100%;
      height:auto;
      object-fit:contain;
      border-radius:12px;
    }
    .entry-content figcaption{
      margin:8px 4px 0;
      color:#9fadcf;
      font-size:13px;
    }
    .gamegg-faq{
      display:grid;
      gap:12px;
      margin:18px 0 28px;
    }
    .gamegg-faq details{
      overflow:hidden;
      border:1px solid rgba(91,147,255,.38);
      border-radius:12px;
      background:linear-gradient(180deg,rgba(16,28,61,.88),rgba(7,14,36,.94));
      box-shadow:0 0 18px rgba(30,212,255,.06);
    }
    .gamegg-faq summary{
      position:relative;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
      min-height:54px;
      padding:14px 48px 14px 16px;
      color:#fff;
      font-family:var(--head);
      font-size:17px;
      font-weight:700;
      cursor:pointer;
      list-style:none;
    }
    .gamegg-faq summary::-webkit-details-marker{display:none}
    .gamegg-faq summary::after{
      content:"";
      position:absolute;
      right:16px;
      top:50%;
      width:24px;
      height:24px;
      transform:translateY(-50%);
      border-radius:6px;
      color:#fff;
      background:linear-gradient(135deg,#ff43c5,#7d4cff);
      box-shadow:0 0 14px rgba(255,67,197,.28);
    }
    .gamegg-faq summary::before{
      content:"";
      position:absolute;
      right:22px;
      top:50%;
      z-index:1;
      width:12px;
      height:2px;
      transform:translateY(-50%);
      border-radius:2px;
      background:#fff;
      box-shadow:0 0 8px rgba(255,255,255,.45);
    }
    .gamegg-faq details[open] summary{
      border-bottom:1px solid rgba(91,147,255,.22);
    }
    .gamegg-faq summary::before{
      display:none;
    }
    .gamegg-faq summary::after{
      content:"";
      width:24px;
      height:24px;
      background:
        linear-gradient(#fff,#fff) center/12px 2px no-repeat,
        linear-gradient(#fff,#fff) center/2px 12px no-repeat,
        linear-gradient(135deg,#ff43c5,#7d4cff);
    }
    .gamegg-faq details[open] summary::after{
      background:
        linear-gradient(#fff,#fff) center/12px 2px no-repeat,
        linear-gradient(135deg,#ff43c5,#7d4cff);
    }
    .gamegg-faq .faq-answer{
      padding:14px 16px 16px;
      color:#dce5ff;
    }
    .gamegg-faq .faq-answer p:last-child{margin-bottom:0}
    .article-layout .side{
      position:sticky;
      top:94px;
      align-self:start;
      display:flex;
      flex-direction:column;
      gap:16px;
    }
    .side-box{
      position:relative;
      border:1px solid rgba(91,147,255,.42);
      border-radius:16px;
      padding:18px;
      background:linear-gradient(180deg,rgba(18,24,57,.93),rgba(8,14,36,.94)),radial-gradient(circle at top right,rgba(255,67,197,.18),transparent 44%);
      box-shadow:0 0 22px rgba(30,212,255,.07);
    }
    .side-box h2,.side-box h3{
      margin:0 0 12px;
      font-family:var(--head);
      font-size:21px;
    }
    .toc{display:grid;gap:9px}
    .toc a{color:#cbd6f6;font-size:14px}
    .toc a:hover{color:#fff}
    .side-list{display:grid;gap:10px}
    .side-link{
      display:grid;
      grid-template-columns:48px 1fr;
      gap:10px;
      align-items:center;
    }
    .side-icon{
      width:48px;
      height:42px;
      display:grid;
      place-items:center;
      border-radius:9px;
      color:#fff;
      font-family:var(--mono);
      font-size:10px;
      font-weight:700;
      background:linear-gradient(135deg,#ff43c5,#5b93ff);
    }
    .side-link b{display:block;font-size:13px}
    .side-link span span{display:block;color:#9fadcf;font-size:11px}

    .gamegg-official-media{
      margin:24px 0;
      padding:12px;
      width:100%;
      border:1px solid rgba(91,147,255,.36);
      border-radius:14px;
      background:linear-gradient(180deg,rgba(19,31,67,.9),rgba(8,17,42,.95));
      box-shadow:0 0 22px rgba(30,212,255,.08);
    }
    .gamegg-official-media img{
      width:100%;
      height:auto;
      max-height:560px;
      object-fit:contain;
      object-position:center;
      border-radius:10px;
      border:1px solid rgba(91,147,255,.36);
      background:#050817;
    }
    .gamegg-official-media figcaption,
    .gamegg-official-media p{
      margin:9px 4px 0;
      color:#aeb9dd;
      font-size:13px;
    }
    .gamegg-official-media a{color:#83cfff}
    .gamegg-embed{
      position:relative;
      overflow:hidden;
      width:100%;
      max-width:100%;
      min-height:360px;
      aspect-ratio:16/9;
      border-radius:10px;
      background:#050817;
    }
    .gamegg-embed iframe{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      border:0;
    }
    @media(max-width:760px){
      .gamegg-embed{min-height:210px}
      .article-hero{padding:32px 18px 22px}
      .article-layout{grid-template-columns:1fr;padding:20px 18px 28px}
      .article-shell{padding:16px}
      .article-layout .side{position:static}
      .entry-content{font-size:16px}
      .entry-content h2{font-size:24px}
      .rating-actions{width:100%;margin-left:0}
    }

    /* ---- Category / archive pages ---- */
    .poster.has-photo,.thumb.has-photo{background:#0a1029}
    .poster.has-photo img,.thumb.has-photo img{
      position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    }
    .poster.has-photo::after,.thumb.has-photo::after{display:none}

    .cat-hero{
      position:relative;padding:44px 34px 24px;overflow:hidden;
      border-bottom:1px solid rgba(91,147,255,.18);
    }
    .cat-hero::before{
      content:"";position:absolute;inset:0;
      background:
        linear-gradient(90deg,rgba(5,8,23,.92) 0 34%,rgba(5,8,23,.72)),
        radial-gradient(circle at 72% 36%,rgba(255,67,197,.18),transparent 30%),
        radial-gradient(circle at 46% 24%,rgba(30,212,255,.17),transparent 32%);
      pointer-events:none;
    }
    .cat-hero .hero-inner{
      position:relative;z-index:1;display:grid;
      grid-template-columns:minmax(0,1fr) 360px;gap:28px;align-items:end;
    }
    .cat-hero .crumb{
      display:flex;gap:8px;color:#aeb9dd;font-family:var(--mono);font-size:12px;margin-bottom:14px;
    }
    .cat-hero .crumb a{color:#aeb9dd}
    .cat-hero .crumb b{color:#fff}
    .cat-hero h1{
      margin:0;font-family:var(--head);font-size:clamp(38px,5.4vw,64px);line-height:1.08;letter-spacing:-.02em;
    }
    .cat-hero .lead{max-width:760px;margin:14px 0 0;color:#dce5ff;font-size:16px}
    .cat-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
    .cat-stats .stat{
      min-height:88px;padding:14px;border:1px solid rgba(91,147,255,.42);border-radius:12px;
      background:linear-gradient(180deg,rgba(18,30,66,.76),rgba(8,15,38,.82));
      box-shadow:inset 0 0 24px rgba(91,147,255,.08),0 0 22px rgba(30,212,255,.07);
    }
    .cat-stats .stat b{display:block;font-family:var(--head);font-size:24px;line-height:1;color:#fff}
    .cat-stats .stat span{display:block;margin-top:7px;color:#aeb9dd;font-size:12px}
    .filters{
      position:relative;z-index:1;margin-top:24px;display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;
    }
    .filters a{
      flex:0 0 auto;padding:9px 15px;border:1px solid rgba(91,147,255,.38);border-radius:999px;
      background:rgba(11,18,46,.72);color:#dce5ff;font-size:14px;font-weight:600;
    }
    .filters a.is-active{
      border-color:rgba(255,67,197,.9);
      background:linear-gradient(135deg,rgba(255,67,197,.88),rgba(125,76,255,.88));
      color:#fff;box-shadow:0 0 24px rgba(255,67,197,.22);
    }

    .archive-layout{
      display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:26px;padding:28px 34px 40px;
    }
    .archive-layout .main{min-width:0}

    .featured-grid{display:grid;grid-template-columns:1.18fr .82fr;gap:14px;margin-bottom:28px}
    .feature-card{
      position:relative;min-height:340px;display:flex;align-items:flex-end;overflow:hidden;
      border-radius:14px;border:1px solid rgba(91,147,255,.42);
      background:linear-gradient(135deg,#54348e,#1e4f88 48%,#101427);
      box-shadow:0 0 22px rgba(30,212,255,.07);
    }
    .feature-card a{display:block;width:100%;height:100%;min-height:340px;position:relative}
    .feature-card .feature-photo{
      position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
    }
    .feature-card .feature-body{
      position:absolute;left:0;right:0;bottom:0;z-index:1;padding:22px;
      background:linear-gradient(180deg,transparent,rgba(4,8,22,.96) 78%);
    }
    .feature-card .badge{
      display:inline-flex;align-items:center;min-height:26px;padding:4px 10px;border-radius:6px;
      color:#fff;font-size:12px;font-weight:700;background:linear-gradient(135deg,#ff43c5,#874cff);
      box-shadow:0 0 16px rgba(255,67,197,.28);
    }
    .feature-card h2{max-width:720px;margin:12px 0 8px;font-family:var(--head);font-size:29px;line-height:1.22}
    .feature-card .meta{display:flex;flex-wrap:wrap;gap:10px;color:#c7d1f4;font-size:13px}
    .mini-stack{display:grid;gap:14px}
    .mini-feature{
      position:relative;min-height:163px;overflow:hidden;border-radius:12px;
      border:1px solid rgba(91,147,255,.42);
      background:linear-gradient(135deg,#361a5d,#18254b 48%,#081126);
      box-shadow:0 0 22px rgba(30,212,255,.07);
    }
    .mini-feature a{display:block;width:100%;height:100%;min-height:163px;position:relative}
    .mini-feature .mini-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
    .mini-feature .mini-body{
      position:absolute;left:15px;right:15px;bottom:14px;z-index:1;
    }
    .mini-feature .badge{
      display:inline-flex;align-items:center;min-height:23px;padding:3px 9px;border-radius:6px;
      color:#fff;font-size:11px;font-weight:700;background:linear-gradient(135deg,#874cff,#ff43c5);
    }
    .mini-feature h3{margin:8px 0 0;font-family:var(--head);font-size:17px;line-height:1.28;color:#fff}

    .article-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
    .article-grid .article{
      overflow:hidden;border-radius:10px;border:1px solid rgba(91,147,255,.43);
      background:linear-gradient(180deg,rgba(19,31,67,.92),rgba(8,17,42,.96));
      transition:border-color .18s ease,box-shadow .18s ease;
    }
    .article-grid .article:hover{border-color:rgba(30,212,255,.88);box-shadow:0 0 28px rgba(30,212,255,.16)}
    .article-grid .thumb{position:relative;height:150px;overflow:hidden}
    .article-body{padding:13px 13px 15px}
    .article-body h3{margin:0;min-height:3.1em;font-size:16px;line-height:1.36}
    .article-body p{margin:8px 0 0;min-height:4.2em;color:#aebbe2;font-size:12px;line-height:1.5}
    .article-body .date{margin-top:9px;color:#bdc7e7;font-size:12px}

    .pagination{display:flex;justify-content:center;gap:8px;margin:26px 0 0}
    .pagination a,.pagination span.current{
      min-width:36px;height:36px;display:inline-grid;place-items:center;padding:0 6px;
      border:1px solid rgba(91,147,255,.42);border-radius:8px;background:rgba(11,18,46,.72);
      color:#dce5ff;font-family:var(--mono);font-size:13px;
    }
    .pagination span.current{
      border-color:rgba(255,67,197,.88);background:linear-gradient(135deg,#ff43c5,#7d4cff);color:#fff;
    }

    .side-box.hot{border-color:rgba(255,67,197,.8);box-shadow:0 0 30px rgba(255,67,197,.16)}
    .trend-row{
      display:grid;grid-template-columns:28px 1fr;gap:12px;padding:11px 0;
      border-top:1px solid rgba(91,147,255,.18);
    }
    .trend-row:first-of-type{border-top:none;padding-top:0}
    .trend-num{
      width:28px;height:28px;display:grid;place-items:center;border-radius:6px;color:#fff;
      font-family:var(--mono);font-weight:700;background:linear-gradient(135deg,#1599ff,#8b43ff);
    }
    .trend-row:nth-of-type(1) .trend-num,
    .trend-row:nth-of-type(2) .trend-num,
    .trend-row:nth-of-type(3) .trend-num{background:linear-gradient(135deg,#ff6fcf,#874cff)}
    .trend-info b{display:block;font-size:14px;line-height:1.35;font-weight:700;color:var(--ink)}
    .trend-info span{display:block;margin-top:4px;color:#9fadcf;font-size:12px}

    .code-list{display:grid;gap:10px}
    .code-item{
      display:grid;grid-template-columns:42px 1fr;gap:10px;align-items:center;padding:10px;
      border:1px solid rgba(91,147,255,.24);border-radius:10px;background:rgba(9,17,42,.68);
    }
    .code-logo{
      width:42px;height:42px;display:grid;place-items:center;border-radius:9px;color:#fff;
      font-family:var(--mono);font-weight:700;background:linear-gradient(135deg,#ff43c5,#5b93ff);
    }
    .code-text b{display:block;font-size:13px}
    .code-text span{color:#9fadcf;font-size:11px}

    .chip-cloud{display:flex;flex-wrap:wrap;gap:8px}
    .chip-cloud a{
      padding:7px 10px;border:1px solid rgba(91,147,255,.36);border-radius:999px;
      color:#dce5ff;background:rgba(11,18,46,.58);font-size:12px;
    }

    .empty-state{
      margin:40px 34px;padding:40px;text-align:center;color:#aeb9dd;
      border:1px dashed rgba(91,147,255,.4);border-radius:16px;
    }

    @media(max-width:1180px){
      .cat-hero .hero-inner{grid-template-columns:1fr}
      .cat-stats{max-width:520px}
      .archive-layout{grid-template-columns:1fr}
      .side{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
    }
    @media(max-width:820px){
      .cat-hero,.archive-layout{padding-inline:18px}
      .featured-grid{grid-template-columns:1fr}
      .article-grid{grid-template-columns:1fr 1fr}
      .side{grid-template-columns:1fr}
      .cat-stats{grid-template-columns:1fr 1fr 1fr}
    }
    @media(max-width:560px){
      .cat-stats{grid-template-columns:1fr}
      .article-grid{grid-template-columns:1fr}
    }

    /* ---- Home page real content ---- */
    .feature.has-photo{
      background:
        linear-gradient(90deg,rgba(5,9,24,.96) 0 30%,rgba(5,9,24,.36) 68%,rgba(5,9,24,.72)),
        var(--feature-img) center/cover;
    }
    .feature h2 a{color:inherit}
    .rank-pic.has-photo{background:#0a1029}
    .rank-pic.has-photo img{
      position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
    }
    .rank-pic.has-photo::after{display:none}
    .quick .icon{font-size:22px;line-height:1}
    footer ul li a{color:#aeb9dd}
    footer ul li a:hover{color:#fff}

    .nav-tools{display:flex;align-items:center;gap:14px}
    .search-box{display:flex;align-items:center}
    .search-box input{
      width:300px;
      height:42px;
      padding:0 18px;
      color:#e7edff;
      font-family:var(--body);
      font-size:13px;
      border:1px solid rgba(30,212,255,.4);
      border-radius:999px;
      background:rgba(11,15,43,.78);
      box-shadow:0 0 0 1px rgba(30,212,255,.12),0 0 20px rgba(30,212,255,.22),inset 0 0 14px rgba(30,212,255,.08);
      outline:none;
      transition:border-color .18s ease,box-shadow .18s ease;
    }
    .search-box input::placeholder{color:#8f9dc9}
    .search-box input:focus{
      border-color:rgba(30,212,255,.85);
      box-shadow:0 0 0 1px rgba(30,212,255,.3),0 0 28px rgba(30,212,255,.38),inset 0 0 16px rgba(30,212,255,.12);
    }
    @media(max-width:1220px){.search-box input{width:220px}}
    @media(max-width:760px){.search-box{display:none}}