/* =============================================
   ONE1GAME — Avant-Garde Gaming Redux v4.0.1
   DNA: Steam × Riot × Blizzard × IGN × Polygon
   ============================================= */

:root {
  --bg: #040408;
  --bg-elevated: #08080f;
  --surface: rgba(6, 6, 12, 0.88);
  --surface-hover: rgba(10, 10, 18, 0.94);
  --text: #edeff5;
  --text-dim: #9090aa;
  --text-faint: #555570;

  /* Neon palette */
  --cyan:    #00e5ff;
  --magenta: #ff2d7b;
  --gold:    #ffd740;
  --lime:    #39ff14;
  --purple:  #b36bff;
  --coral:   #ff6e40;

  --border: rgba(255,255,255,0.05);
  --border-active: rgba(0, 229, 255, 0.30);
  --glow-cyan: 0 0 30px rgba(0, 229, 255, 0.20);
  --glow-magenta: 0 0 30px rgba(255, 45, 123, 0.25);
  --glow-gold: 0 0 20px rgba(255, 215, 64, 0.15);
  --radius: 14px;
  --radius-sm: 8px;
  --radius-lg: 22px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
}

/* =============================================
   RESET & BASE
   ============================================= */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;font-size:16px}
body{
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,Oxygen,Ubuntu,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.65;
  min-height:100vh;
  overflow-x:hidden;
  isolation:isolate;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
/* Matrix rain backdrop (canvas, injected by script.js) */
#matrix-bg{position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:0.5}
@media (prefers-reduced-motion: reduce){#matrix-bg{display:none}}

/* =============================================
   ACCESSIBILITY — SKIP LINK + FOCUS
   ============================================= */
.skip-link{
  position:absolute;top:-100px;left:16px;z-index:999;
  padding:10px 20px;border-radius:6px;
  background:var(--cyan);color:#000;font-weight:700;
  text-decoration:none;font-size:0.88rem;
}
.skip-link:focus{top:16px}

:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:3px;
  border-radius:4px;
}
a:focus-visible,button:focus-visible,.cat-pill:focus-visible{
  outline:2px solid var(--cyan);
  outline-offset:2px;
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:0.01ms !important;
    transition-duration:0.01ms !important;
  }
}

/* =============================================
   SKELETON LOADER
   ============================================= */
.skeleton-card{
  background:var(--surface);border-radius:var(--radius);
  border:1px solid var(--border);min-height:200px;
  position:relative;overflow:hidden;
  animation:skeleton-pulse 1.6s ease-in-out infinite;
}
.skeleton-card::before{
  content:'';
  position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,0.04),transparent);
  animation:skeleton-shimmer 2s ease-in-out infinite;
}
@keyframes skeleton-pulse{
  0%,100%{opacity:0.5}50%{opacity:0.8}
}
@keyframes skeleton-shimmer{
  0%{transform:translateX(-100%)}100%{transform:translateX(100%)}
}

/* =============================================
   LAYOUT
   ============================================= */
.container{
  position:relative;z-index:1;
  max-width:1260px;margin:0 auto;padding:0 28px;
}

/* =============================================
   NAV — GLASS MORPHISM STICKY
   ============================================= */
.site-nav{
  position:sticky;top:0;z-index:200;
  backdrop-filter:blur(28px) saturate(200%);
  -webkit-backdrop-filter:blur(28px) saturate(200%);
  background:rgba(6,6,13,0.72);
  border-bottom:1px solid var(--border);
  padding:0 28px;
  transition:background 0.3s;
}
.nav-inner{
  max-width:1260px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  height:50px;
}
.nav-logo{
  font-family:ui-monospace,'Cascadia Code','Fira Code',Consolas,monospace;
  font-size:1.15rem;font-weight:900;letter-spacing:0.14em;
  color:#fff;text-decoration:none;text-transform:uppercase;
  position:relative;
  transition:color 0.3s;
}
.nav-logo:hover{color:var(--cyan)}
.nav-logo::after{
  content:'';position:absolute;bottom:-3px;left:0;
  width:100%;height:2px;border-radius:1px;
  background:linear-gradient(90deg,var(--cyan),var(--magenta),var(--purple));
}
.nav-links{display:flex;gap:4px;align-items:center}
.nav-link{
  color:var(--text-dim);text-decoration:none;
  padding:8px 18px;border-radius:50px;
  font-size:0.88rem;font-weight:500;
  transition:all var(--ease-out);
  border:1px solid transparent;
  position:relative;
}
.nav-link:hover{color:#fff;background:rgba(255,255,255,0.04)}
.nav-link.active{
  color:var(--cyan);
  background:rgba(0,229,255,0.07);
  border-color:rgba(0,229,255,0.22);
}
.nav-social{
  display:flex;gap:14px;align-items:center;
  margin-left:18px;padding-left:18px;
  border-left:1px solid var(--border);
}
.nav-social a{color:var(--text-dim);font-size:1.15rem;transition:color 0.25s}
.nav-social a:hover{color:#fff}

/* =============================================
   HERO — IMMERSIVE
   ============================================= */
.hero{
  padding:20px 0 24px;
  text-align:center;
  position:relative;
}
.hero-badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 16px;
  background:rgba(0,229,255,0.06);
  border:1px solid rgba(0,229,255,0.25);
  border-radius:50px;
  color:var(--cyan);
  font-size:0.7rem;font-weight:700;letter-spacing:0.08em;
  text-transform:uppercase;
  margin-bottom:16px;
  animation:pulse-badge 3s ease-in-out infinite;
}
@keyframes pulse-badge{
  0%,100%{box-shadow:0 0 0 0 rgba(0,229,255,0.25)}
  50%{box-shadow:0 0 24px 4px rgba(0,229,255,0.12)}
}
.hero-badge::before{
  content:'';width:8px;height:8px;
  background:var(--lime);border-radius:50%;
  box-shadow:0 0 8px var(--lime);
  animation:blink 1.5s ease-in-out infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.hero h1{
  font-family:ui-monospace,'Cascadia Code','Fira Code',Consolas,monospace;
  font-size:clamp(2rem,5vw,3.2rem);
  font-weight:900;letter-spacing:0.04em;
  color:#fff;line-height:1.1;
  margin-bottom:10px;
  text-shadow:0 0 40px rgba(0,229,255,0.10);
}
.hero h1 .highlight{
  background:linear-gradient(135deg,var(--cyan) 0%,var(--magenta) 50%,var(--purple) 100%);
  background-size:200% auto;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  animation:gradient-shift 4s ease infinite;
}
@keyframes gradient-shift{
  0%,100%{background-position:0% center}
  50%{background-position:100% center}
}
.hero-sub{
  font-size:0.95rem;color:var(--text-dim);
  max-width:560px;margin:0 auto 20px;
  line-height:1.6;
}
.hero-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.hero .radio-section{margin:0 auto 22px}

/* =============================================
   AD BANNER
   ============================================= */
.ad-banner-wrap{margin:0 0 28px}
.ad-banner-wrap a{display:block;border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);transition:border-color 0.3s,box-shadow 0.3s}
.ad-banner-wrap a:hover{border-color:var(--border-active);box-shadow:var(--glow-cyan)}
.ad-banner-wrap img{width:100%;height:auto;display:block;filter:brightness(0.55) saturate(0.75);transition:filter 0.35s ease}
.ad-banner-wrap a:hover img{filter:brightness(1.05) saturate(1)}

/* =============================================
   AD VPS (AdminVPS sponsor card)
   ============================================= */
.ad-vps-wrap{margin:0 0 28px}
.articles-grid .ad-vps-wrap{display:flex;margin:0;grid-column:1/-1}
.articles-grid .ad-vps-card{width:100%}
.ad-vps-card{
  display:block;
  background:linear-gradient(160deg, rgba(14,14,30,0.65), rgba(20,20,42,0.5));
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:22px 26px;
  text-decoration:none;
  transition:border-color .3s,box-shadow .3s;
  position:relative;overflow:hidden;
}
.ad-vps-card::before{content:'';position:absolute;top:-60%;right:-30%;width:240px;height:240px;background:radial-gradient(circle,rgba(255,215,64,0.07),transparent 70%);pointer-events:none}
.ad-vps-card:hover{border-color:rgba(255,215,64,0.45);box-shadow:0 8px 30px rgba(255,215,64,0.10)}
.ad-vps-header{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.ad-vps-badge{
  font-family:ui-monospace,'Cascadia Code',monospace;
  font-size:.66rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  background:rgba(255,215,64,0.12);color:var(--gold);
  padding:4px 10px;border-radius:50px;border:1px solid rgba(255,215,64,0.3);
}
.ad-vps-title{font-family:ui-monospace,'Cascadia Code',monospace;font-size:1.08rem;font-weight:700;color:#fff;margin:0}
.ad-vps-desc{font-size:.88rem;color:var(--text-dim);margin:0 0 12px;line-height:1.55}
.ad-vps-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.ad-vps-tag{font-size:.7rem;font-weight:500;background:rgba(255,255,255,0.04);color:var(--text-dim);padding:3px 10px;border-radius:50px;border:1px solid var(--border)}
.ad-vps-cta{
  display:block;text-align:center;
  font-family:ui-monospace,'Cascadia Code',monospace;
  font-size:.8rem;font-weight:700;
  background:linear-gradient(135deg,var(--gold),#ff9d00);color:#000;
  padding:10px 16px;border-radius:50px;
  transition:transform .18s,box-shadow .18s;
}
.ad-vps-card:hover .ad-vps-cta{transform:translateY(-1px);box-shadow:0 6px 20px rgba(255,215,64,0.25)}

/* =============================================
   FEATURED BANNER (Pinned Card)
   ============================================= */
.featured-banner{margin:0 0 24px}
.featured-link{text-decoration:none;color:inherit}
.featured-card{display:flex;gap:24px;align-items:center;background:var(--surface);border:1px solid rgba(255,215,64,0.25);border-radius:var(--radius);padding:20px;transition:all 0.35s var(--ease-out);position:relative;overflow:hidden}
.featured-card::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 50%,rgba(255,215,64,0.06),transparent 70%);pointer-events:none}
.featured-card:hover{transform:translateY(-4px);border-color:rgba(255,215,64,0.5);box-shadow:0 8px 32px rgba(255,215,64,0.12)}
.featured-image{flex:0 0 280px;border-radius:var(--radius-sm);overflow:hidden}
.featured-image img{width:100%;height:auto;display:block}
.featured-info{flex:1;min-width:0}
.featured-badge{display:inline-block;padding:3px 12px;background:rgba(255,215,64,0.12);border:1px solid rgba(255,215,64,0.3);border-radius:50px;color:var(--gold);font-size:0.7rem;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;margin-bottom:10px}
.featured-title{font-family:ui-monospace,'Cascadia Code',monospace;font-size:1.25rem;font-weight:700;color:#fff;margin-bottom:8px;line-height:1.3}
.featured-desc{font-size:0.9rem;color:var(--text-dim);margin-bottom:12px;line-height:1.5}
.featured-cta{display:inline-flex;align-items:center;gap:8px;color:var(--gold);font-size:0.88rem;font-weight:650;transition:gap 0.2s}
.featured-card:hover .featured-cta{gap:12px}
@media(max-width:768px){
  .featured-card{flex-direction:column;padding:16px}
  .featured-image{flex:0 0 auto;width:100%}
}

/* =============================================
   BUTTONS
   ============================================= */
.btn{
  display:inline-flex;align-items:center;gap:9px;
  padding:13px 30px;border-radius:50px;
  font-weight:650;font-size:0.93rem;
  text-decoration:none;transition:all var(--ease-out);
  border:none;cursor:pointer;
  position:relative;overflow:hidden;
}
.btn-primary{
  background:linear-gradient(135deg,var(--cyan),#008fb3);
  color:#000;font-weight:700;
  box-shadow:0 4px 24px rgba(0,229,255,0.30);
}
.btn-primary:hover{
  transform:translateY(-3px);
  box-shadow:0 8px 35px rgba(0,229,255,0.45);
}
.btn-outline{
  background:transparent;
  border:2px solid rgba(255,255,255,0.18);
  color:#fff;
}
.btn-outline:hover{
  border-color:var(--magenta);
  background:rgba(255,45,123,0.07);
  box-shadow:0 0 25px rgba(255,45,123,0.12);
}
.btn-ghost{
  background:rgba(255,255,255,0.03);
  border:1px solid var(--border);
  color:var(--text-dim);padding:10px 20px;font-size:0.85rem;
}
.btn-ghost:hover{color:#fff;background:rgba(255,255,255,0.07);border-color:rgba(255,255,255,0.2)}

/* =============================================
   CATEGORIES ROW — DYNAMIC FROM ARTICLES
   ============================================= */
.categories-row{
  display:flex;justify-content:center;gap:10px;flex-wrap:wrap;
  padding:20px 0;margin:20px 0 36px;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.categories-row .cat-pill{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 18px;border-radius:50px;
  font-size:0.82rem;font-weight:600;
  text-decoration:none;
  transition:all var(--ease-out);
  cursor:pointer;
  border:1px solid transparent;
}
.categories-row .cat-pill .cat-count{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:22px;padding:0 6px;
  border-radius:50px;
  font-size:0.72rem;font-weight:700;
  background:rgba(255,255,255,0.1);
  color:#fff;
}
.categories-row .cat-tech{background:rgba(0,229,255,0.06);color:var(--cyan);border-color:rgba(0,229,255,0.2)}
.categories-row .cat-tech:hover{background:rgba(0,229,255,0.14);border-color:var(--cyan);box-shadow:var(--glow-cyan)}
.categories-row .cat-tech .cat-count{background:rgba(0,229,255,0.15);color:var(--cyan)}
.categories-row .cat-guides{background:rgba(57,255,20,0.05);color:var(--lime);border-color:rgba(57,255,20,0.2)}
.categories-row .cat-guides:hover{background:rgba(57,255,20,0.12);border-color:var(--lime);box-shadow:0 0 16px rgba(57,255,20,0.15)}
.categories-row .cat-guides .cat-count{background:rgba(57,255,20,0.12);color:var(--lime)}
.categories-row .cat-consoles{background:rgba(255,45,123,0.05);color:var(--magenta);border-color:rgba(255,45,123,0.2)}
.categories-row .cat-consoles:hover{background:rgba(255,45,123,0.12);border-color:var(--magenta);box-shadow:0 0 16px rgba(255,45,123,0.15)}
.categories-row .cat-consoles .cat-count{background:rgba(255,45,123,0.12);color:var(--magenta)}
.categories-row .cat-analytics{background:rgba(255,215,64,0.05);color:var(--gold);border-color:rgba(255,215,64,0.2)}
.categories-row .cat-analytics:hover{background:rgba(255,215,64,0.12);border-color:var(--gold);box-shadow:0 0 16px rgba(255,215,64,0.15)}
.categories-row .cat-analytics .cat-count{background:rgba(255,215,64,0.12);color:var(--gold)}
.categories-row .cat-trends{background:rgba(179,107,255,0.05);color:var(--purple);border-color:rgba(179,107,255,0.2)}
.categories-row .cat-trends:hover{background:rgba(179,107,255,0.12);border-color:var(--purple);box-shadow:0 0 16px rgba(179,107,255,0.15)}
.categories-row .cat-trends .cat-count{background:rgba(179,107,255,0.12);color:var(--purple)}
.categories-row .cat-dev{background:rgba(255,110,64,0.05);color:var(--coral);border-color:rgba(255,110,64,0.2)}
.categories-row .cat-dev:hover{background:rgba(255,110,64,0.12);border-color:var(--coral);box-shadow:0 0 16px rgba(255,110,64,0.15)}
.categories-row .cat-dev .cat-count{background:rgba(255,110,64,0.12);color:var(--coral)}
.categories-row .cat-opinion{background:rgba(255,171,64,0.05);color:#ffab40;border-color:rgba(255,171,64,0.2)}
.categories-row .cat-opinion:hover{background:rgba(255,171,64,0.12);border-color:#ffab40;box-shadow:0 0 16px rgba(255,171,64,0.15)}
.categories-row .cat-opinion .cat-count{background:rgba(255,171,64,0.12);color:#ffab40}
.categories-row .cat-movies{background:rgba(0,229,255,0.06);color:var(--cyan);border-color:rgba(0,229,255,0.2)}
.categories-row .cat-movies:hover{background:rgba(0,229,255,0.14);border-color:var(--cyan);box-shadow:var(--glow-cyan)}
.categories-row .cat-movies .cat-count{background:rgba(0,229,255,0.15);color:var(--cyan)}
.categories-row .cat-play{background:rgba(46,255,178,0.05);color:#2effb2;border-color:rgba(46,255,178,0.2)}
.categories-row .cat-play:hover{background:rgba(46,255,178,0.12);border-color:#2effb2;box-shadow:0 0 16px rgba(46,255,178,0.15)}
.categories-row .cat-play .cat-count{background:rgba(46,255,178,0.12);color:#2effb2}

/* =============================================
   SECTION HEADERS
   ============================================= */
.section-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:30px;flex-wrap:wrap;gap:14px;
}
.section-title{
  font-family:ui-monospace,'Cascadia Code','Fira Code',Consolas,monospace;
  font-size:1.55rem;font-weight:700;color:#fff;
  position:relative;padding-left:18px;
}
.section-title::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:5px;height:28px;border-radius:3px;
  background:var(--cyan);
  box-shadow:0 0 12px var(--cyan);
}
.section-badge{
  font-family:ui-monospace,'Cascadia Code','Fira Code',Consolas,monospace;
  font-size:0.72rem;font-weight:900;
  padding:4px 12px;border-radius:50px;
  background:rgba(57,255,20,0.12);
  color:var(--lime);border:1px solid rgba(57,255,20,0.25);
  letter-spacing:0.08em;
}

/* =============================================
   TODAY IN GAMING HISTORY
   ============================================= */
#today-in-history{
  margin-bottom:38px;
}
.gh-card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:24px;
  overflow:hidden;
  transition:border 0.3s;
}
.gh-card::before{
  content:'';
  position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,var(--cyan),var(--magenta));
  opacity:0.6;
}
.gh-card:hover{
  border-color:rgba(255,255,255,0.12);
}
.gh-label{
  display:inline-block;
  font-size:0.62rem;font-weight:700;text-transform:uppercase;
  letter-spacing:0.12em;
  color:var(--text-faint);
  margin-top:14px;
  padding:4px 12px;border-radius:50px;
  background:rgba(255,255,255,0.03);
  border:1px solid var(--border);
}
.gh-date{
  font-size:0.75rem;font-weight:600;
  text-transform:uppercase;letter-spacing:0.08em;
  color:var(--cyan);
  margin-bottom:6px;
}
.gh-year{
  font-size:3rem;font-weight:900;line-height:1;
  background:linear-gradient(135deg,var(--cyan),var(--magenta));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
  margin-bottom:10px;
  font-family:ui-monospace,'Cascadia Code','Fira Code',Consolas,monospace;
}
.gh-title{
  font-size:1.05rem;font-weight:750;
  color:#fff;
  margin-bottom:8px;
  line-height:1.3;
}
.gh-desc{
  font-size:0.85rem;color:var(--text-faint);
  line-height:1.65;
}

/* =============================================
   ARTICLES GRID — 3D CARDS
   ============================================= */
.articles-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(350px,1fr));
  gap:22px;
  margin-bottom:52px;
}
.article-card{
  position:relative;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:28px;
  text-decoration:none;color:inherit;
  transition:all 0.35s var(--ease-out);
  overflow:hidden;
  transform:translateY(0);
}
.article-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  opacity:0;transition:opacity 0.35s;
}
.article-card::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(600px circle at var(--mouse-x,50%) var(--mouse-y,50%),rgba(0,229,255,0.06),transparent 40%);
  opacity:0;transition:opacity 0.35s;
  pointer-events:none;
}
.article-card:hover{transform:translateY(-6px);border-color:var(--border-active);box-shadow:var(--glow-cyan)}
.article-card:hover::before{opacity:1}
.article-card:hover::after{opacity:1}
.article-card:hover h3{color:var(--cyan)}

.card-image{
  width:100%;height:180px;overflow:hidden;
  border-radius:8px;margin-bottom:16px;
}
.card-image img{
  width:100%;height:100%;object-fit:cover;
  transition:transform 0.5s var(--ease-out);
}
.article-card:hover .card-image img{transform:scale(1.05)}

.card-category{
  display:inline-block;padding:4px 12px;border-radius:4px;
  font-size:0.7rem;font-weight:750;text-transform:uppercase;
  letter-spacing:0.06em;margin-bottom:14px;
}
.cat-tech{background:rgba(0,229,255,0.10);color:var(--cyan);border:1px solid rgba(0,229,255,0.2)}
.cat-guides{background:rgba(57,255,20,0.08);color:var(--lime);border:1px solid rgba(57,255,20,0.2)}
.cat-consoles{background:rgba(255,45,123,0.08);color:var(--magenta);border:1px solid rgba(255,45,123,0.2)}
.cat-analytics{background:rgba(255,215,64,0.08);color:var(--gold);border:1px solid rgba(255,215,64,0.2)}
.cat-trends{background:rgba(179,107,255,0.08);color:var(--purple);border:1px solid rgba(179,107,255,0.2)}
.cat-dev{background:rgba(255,110,64,0.08);color:var(--coral);border:1px solid rgba(255,110,64,0.2)}
.cat-opinion{background:rgba(255,171,64,0.08);color:#ffab40;border:1px solid rgba(255,171,64,0.2)}
.cat-movies{background:rgba(0,229,255,0.10);color:var(--cyan);border:1px solid rgba(0,229,255,0.2)}
.cat-play{background:rgba(46,255,178,0.08);color:#2effb2;border:1px solid rgba(46,255,178,0.2)}

.article-card h3{
  font-size:1.18rem;font-weight:700;line-height:1.4;
  color:#fff;margin-bottom:10px;transition:color 0.3s;
}
.card-excerpt{
  font-size:0.9rem;color:var(--text-dim);line-height:1.55;
  margin-bottom:18px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;
}
.card-meta{display:flex;gap:16px;font-size:0.78rem;color:var(--text-faint)}
.card-meta span{display:inline-flex;align-items:center;gap:5px}

/* Featured card */
.article-card.featured{
  grid-column:1/-1;padding:36px;
  border-color:rgba(0,229,255,0.10);
}
.article-card.featured h3{font-size:1.55rem}
.article-card.featured .card-excerpt{-webkit-line-clamp:3}
.article-card.featured::before{opacity:0.5}

/* Top article под радио — растягивается на всю ширину */
#top-article{
  width:100%;
}
#top-article .article-card{
  width:100%;
  max-width:100%;
  flex-direction:row;
  align-items:center;
  gap:30px;
  padding:36px;
}
#top-article .article-card .card-image{
  flex:0 0 52%;
  margin-bottom:0;
}
#top-article .article-card h3{font-size:1.7rem}
@media(max-width:768px){
  #top-article .article-card{flex-direction:column;gap:16px;padding:24px}
  #top-article .article-card .card-image{flex:1 1 auto;width:100%;margin-bottom:0}
}

/* =============================================
   RADIO — FAB PLAY BUTTON
   ============================================= */
.radio-section{
  display:flex;justify-content:center;align-items:center;
  margin:0 auto 22px;
}
.radio-toggle{
  width:60px;height:60px;border-radius:50%;
  border:none;cursor:pointer;
  background:linear-gradient(135deg,var(--cyan),var(--magenta));
  color:#000;font-size:1.15rem;
  display:flex;align-items:center;justify-content:center;
  padding-left:3px;
  transition:transform 0.18s ease,box-shadow 0.18s ease;
  box-shadow:0 0 22px rgba(0,229,255,0.35);
  -webkit-tap-highlight-color:transparent;
  user-select:none;
}
.radio-toggle:hover{transform:scale(1.06)}
.radio-toggle:active{transform:scale(0.94)}
.radio-toggle.playing{
  background:linear-gradient(135deg,#00ff88,#00c9a7);
  animation:radio-pulse 1.1s ease-in-out infinite;
}
@keyframes radio-pulse{
  0%,100%{transform:scale(1);box-shadow:0 0 14px rgba(0,255,160,0.35)}
  50%{transform:scale(1.12);box-shadow:0 0 34px rgba(0,255,160,0.8)}
}
@media(max-width:420px){
  .radio-toggle{width:54px;height:54px;font-size:1.05rem}
}

/* =============================================
   SOCIAL SECTION — YT + VK
   ============================================= */
.social-section{
  display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;
  max-width:640px;margin:0 auto 52px;
}
.social-btn{
  display:flex;align-items:center;justify-content:center;gap:10px;
  padding:15px;border-radius:var(--radius);
  border:1px solid var(--border);
  background:var(--surface);
  color:#fff;text-decoration:none;
  font-weight:650;font-size:0.92rem;
  transition:all var(--ease-out);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.social-btn.yt:hover{border-color:#ff0000;background:rgba(255,0,0,0.08);color:#ff4444;box-shadow:0 0 25px rgba(255,0,0,0.2)}
.social-btn.vk:hover{border-color:#0077ff;background:rgba(0,119,255,0.08);color:#3399ff;box-shadow:0 0 25px rgba(0,119,255,0.2)}
.social-btn.tg:hover{border-color:#2AABEE;background:rgba(42,171,238,0.08);color:#2AABEE;box-shadow:0 0 25px rgba(42,171,238,0.2)}

/* =============================================
   CONTENT ROW — MAIN + SIDEBAR
   ============================================= */
.content-row {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  margin-bottom: 52px;
}
.content-main {
  flex: 1 1 0;
  min-width: 0;
}
.content-sidebar {
  flex: 0 0 300px;
  position: sticky;
  top: 72px;
}

/* =============================================
   VK FEED WIDGET — SIDEBAR
   ============================================= */
.vk-feed-widget {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  margin-bottom: 20px;
}
.vk-feed-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  font-size: 0.95rem;
  color: #fff;
}
.vk-feed-header .fab {
  color: #0077ff;
  font-size: 1.25rem;
}
.vk-feed-header .vk-subscribe {
  margin-left: auto;
  padding: 5px 14px;
  border-radius: 50px;
  background: #0077ff;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s;
}
.vk-feed-header .vk-subscribe:hover {
  background: #3399ff;
}
.vk-feed-body {
  min-height: 400px;
}

/* =============================================
   YT FEED WIDGET — SIDEBAR
   ============================================= */
.yt-feed-widget {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.yt-feed-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  font-size: 0.95rem;
  color: #fff;
}
.yt-feed-header .fab {
  color: #ff0000;
  font-size: 1.25rem;
}
.yt-feed-header .yt-subscribe {
  margin-left: auto;
  padding: 5px 14px;
  border-radius: 50px;
  background: #ff0000;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.2s;
}
.yt-feed-header .yt-subscribe:hover {
  background: #ff4444;
}
.yt-feed-body {
  padding: 6px;
}
.yt-card {
  display: flex;
  gap: 10px;
  padding: 8px;
  border-radius: 8px;
  text-decoration: none;
  color: inherit;
  transition: background 0.2s;
}
.yt-card:hover {
  background: rgba(255,255,255,0.04);
}
.yt-card:hover .yt-title {
  color: #ff4444;
}
.yt-thumb {
  flex: 0 0 120px;
  height: 68px;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
  background: #000;
}
.yt-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.yt-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.3);
  opacity: 0;
  transition: opacity 0.2s;
}
.yt-play .fab {
  font-size: 1.4rem;
  color: #ff0000;
}
.yt-card:hover .yt-play {
  opacity: 1;
}
.yt-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.yt-title {
  font-size: 0.78rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.2s;
  margin-bottom: 4px;
}
.yt-date {
  font-size: 0.7rem;
  color: var(--text-faint);
}
.yt-loading, .yt-empty, .yt-error {
  padding: 24px;
  text-align: center;
  color: var(--text-faint);
  font-size: 0.82rem;
}

/* =============================================
   FOOTER
   ============================================= */
.site-footer{
  border-top:1px solid var(--border);
  padding:36px 0;margin-top:56px;text-align:center;
}
.footer-content{
  display:flex;align-items:center;justify-content:center;
  gap:28px;flex-wrap:wrap;font-size:0.84rem;color:var(--text-faint);
}
.footer-links{display:flex;gap:22px}
.footer-links a{color:var(--text-dim);text-decoration:none;transition:color 0.25s}
.footer-links a:hover{color:#fff}

/* =============================================
   ARTICLE PAGE
   ============================================= */
.article-page{
  max-width:820px;margin:0 auto;padding:44px 0;
}
.article-back{
  display:inline-flex;align-items:center;gap:6px;
  color:var(--text-dim);text-decoration:none;
  font-size:0.86rem;margin-bottom:28px;transition:color 0.25s;
}
.article-back:hover{color:#fff}
.article-header{
  text-align:center;margin-bottom:44px;
  padding-bottom:32px;
  border-bottom:1px solid var(--border);
}
.article-header .article-category{
  display:inline-block;padding:5px 16px;border-radius:50px;
  font-size:0.74rem;font-weight:700;text-transform:uppercase;
  letter-spacing:0.06em;margin-bottom:18px;
}
.article-header h1{
  font-size:clamp(1.7rem,4.5vw,2.6rem);
  font-weight:850;color:#fff;
  line-height:1.25;margin-bottom:18px;
  letter-spacing:-0.01em;
}
.article-meta{display:flex;justify-content:center;gap:24px;font-size:0.84rem;color:var(--text-faint)}

/* Article body */
.article-body{
  font-size:1.15rem;line-height:1.9;color:var(--text);
  max-width:68ch;margin:0 auto;
}
.article-body h2{
  font-size:1.55rem;font-weight:700;color:var(--cyan);
  margin:42px 0 16px;padding-left:18px;
  border-left:4px solid var(--cyan);
  letter-spacing:-0.01em;
}
.article-body h3{font-size:1.2rem;font-weight:650;color:#fff;margin:28px 0 10px}
.article-body p{margin-bottom:24px}
.article-body blockquote{
  background:rgba(0,229,255,0.04);
  border-left:4px solid var(--cyan);
  padding:22px 26px;margin:30px 0;
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  font-style:italic;color:var(--text-dim);
}
.article-body ul,.article-body ol{margin:16px 0 16px 28px}
.article-body li{margin-bottom:10px;line-height:1.75}
.article-body a{color:var(--cyan);border-bottom:1px solid transparent;transition:border-color 0.2s}
.article-body a:hover{border-bottom-color:var(--cyan)}
.article-body table.article-table{
  width:100%;border-collapse:collapse;
  margin:24px 0 32px;
  font-size:0.9rem;
}
.article-body table.article-table thead th{
  background:var(--surface);color:var(--text-faint);
  font-weight:600;text-align:left;padding:10px 14px;
  border-bottom:2px solid var(--border);
  font-size:0.78rem;text-transform:uppercase;letter-spacing:0.04em;
}
.article-body table.article-table tbody td{
  padding:10px 14px;
  border-bottom:1px solid rgba(255,255,255,0.04);
  color:var(--text);
}
.article-body table.article-table tbody tr:hover td{
  background:rgba(0,229,255,0.03);
}
.article-body table.article-table tbody td:first-child{
  color:var(--text-faint);
}

/* Share section */
.share-section{
  margin:44px 0;padding:26px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.share-section h4{
  font-size:0.82rem;text-transform:uppercase;letter-spacing:0.06em;
  color:var(--cyan);margin-bottom:4px;
}
.share-hint{
  font-size:0.75rem;color:var(--text-faint);
  margin-bottom:14px;line-height:1.4;
}
.share-buttons{display:flex;gap:10px;flex-wrap:wrap}
.share-btn{
  padding:9px 20px;border-radius:6px;
  border:1px solid var(--border);
  background:rgba(255,255,255,0.03);
  color:var(--text-dim);text-decoration:none;
  font-size:0.85rem;transition:all var(--ease-out);
}
.share-btn:hover{color:#fff;border-color:rgba(255,255,255,0.25);background:rgba(255,255,255,0.05)}

/* Related */
.related-section{margin:44px 0 64px}
.related-section h4{font-size:1rem;color:var(--cyan);margin-bottom:18px;font-weight:650}
.related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.related-card{
  display:block;padding:20px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius-sm);text-decoration:none;
  color:inherit;transition:all var(--ease-out);
}
.related-card:hover{border-color:var(--border-active);background:rgba(0,229,255,0.04);transform:translateY(-3px)}
.related-img{width:100%;height:130px;overflow:hidden;border-radius:4px;margin-bottom:12px}
.related-img img{width:100%;height:100%;object-fit:cover}
.related-info .related-cat{display:inline-block;font-size:0.7rem;text-transform:uppercase;letter-spacing:0.5px;padding:2px 8px;border-radius:3px;margin-bottom:8px;font-weight:600}
.related-info h5{font-size:0.88rem;color:#fff;margin:0;line-height:1.35;font-weight:600}

/* =============================================
   SEARCH BAR
   ============================================= */
.search-bar{position:relative;margin-bottom:30px}
.search-bar input{
  width:100%;padding:15px 22px 15px 50px;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);color:#fff;font-size:1rem;
  outline:none;transition:all var(--ease-out);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.search-bar input:focus{border-color:var(--border-active);box-shadow:0 0 0 4px rgba(0,229,255,0.06)}
.search-bar input::placeholder{color:var(--text-faint)}
.search-icon{position:absolute;left:18px;top:50%;transform:translateY(-50%);color:var(--cyan);font-size:1.15rem}

/* =============================================
   CATEGORY FILTERS
   ============================================= */
.category-filters{display:flex;gap:9px;margin-bottom:28px;flex-wrap:wrap}
.cat-pill{
  padding:8px 20px;border-radius:50px;
  border:1px solid var(--border);
  background:transparent;color:var(--text-dim);
  font-size:0.82rem;cursor:pointer;
  font-weight:500;transition:all var(--ease-out);
}
.cat-pill:hover{color:#fff;border-color:rgba(255,255,255,0.25)}
.cat-pill.active{background:rgba(0,229,255,0.10);border-color:var(--cyan);color:var(--cyan)}

/* =============================================
   PAGINATION
   ============================================= */
.pagination{display:flex;justify-content:center;gap:8px;margin:36px 0}
.page-btn{
  width:42px;height:42px;border-radius:var(--radius-sm);
  border:1px solid var(--border);background:var(--surface);
  color:var(--text-dim);cursor:pointer;
  font-size:0.85rem;font-weight:500;
  transition:all var(--ease-out);
  display:flex;align-items:center;justify-content:center;
}
.page-btn:hover{border-color:rgba(255,255,255,0.25);color:#fff}
.page-btn.active{background:var(--cyan);border-color:var(--cyan);color:#000;font-weight:700}

/* =============================================
   404 PAGE
   ============================================= */
.error-page{text-align:center;padding:90px 20px}
.error-code{
  font-family:ui-monospace,'Cascadia Code','Fira Code',Consolas,monospace;
  font-size:clamp(5rem,15vw,10rem);font-weight:900;line-height:1;
  background:linear-gradient(135deg,var(--cyan),var(--magenta));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
.error-page h2{font-size:1.5rem;color:#fff;margin:16px 0 10px}
.error-page p{color:var(--text-dim);margin-bottom:28px}

/* =============================================
   EMPTY STATE
   ============================================= */
.empty-state{text-align:center;padding:64px 20px;color:var(--text-faint)}
.empty-icon{font-size:3.2rem;margin-bottom:18px;opacity:0.3}
.empty-state h3{color:var(--text-dim);margin-bottom:8px;font-size:1.1rem}

/* =============================================
   PRIVACY / TERMS / ADVERTISING PAGES
   ============================================= */
.page-content{max-width:780px;margin:0 auto;padding:44px 0}
.page-content h1{font-size:2rem;font-weight:800;color:#fff;margin-bottom:14px}
.page-content h2{font-size:1.25rem;color:var(--cyan);margin:32px 0 12px}
.page-content p{color:var(--text-dim);margin-bottom:14px;line-height:1.75}
.page-content .last-updated{font-size:0.82rem;color:var(--text-faint);margin-bottom:36px}

/* =============================================
   ANIMATIONS
   ============================================= */
@keyframes fadeInUp{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:translateY(0)}
}
.article-card{animation:fadeInUp 0.55s var(--ease-out) forwards;opacity:0}
.article-card:nth-child(2){animation-delay:0.06s}
.article-card:nth-child(3){animation-delay:0.12s}
.article-card:nth-child(4){animation-delay:0.18s}
.article-card:nth-child(5){animation-delay:0.24s}

/* Home page — gentle entrance animations */
.page-home .hero{animation:fadeInUp 0.7s var(--ease-out) forwards}
.page-home .featured-banner{animation:fadeInUp 0.7s var(--ease-out) 0.15s both}
.page-home .categories-row{animation:fadeInUp 0.7s var(--ease-out) 0.25s both}
.page-home .content-main .section-header{animation:fadeInUp 0.7s var(--ease-out) 0.35s both}
.page-home .articles-grid{animation:fadeInUp 0.7s var(--ease-out) 0.4s both}
.page-home .ad-vps-wrap,.page-home .ad-banner-wrap{animation:fadeInUp 0.7s var(--ease-out) 0.5s both}
.page-home #today-in-history{animation:fadeInUp 0.7s var(--ease-out) 0.6s both}
.page-home .content-sidebar > *{animation:fadeInUp 0.7s var(--ease-out) 0.45s both}

@media (prefers-reduced-motion: reduce){
  .page-home .hero,
  .page-home .featured-banner,
  .page-home .categories-row,
  .page-home .content-main .section-header,
  .page-home .articles-grid,
  .page-home .ad-vps-wrap,
  .page-home .ad-banner-wrap,
  .page-home #today-in-history,
  .page-home .content-sidebar > *{animation:none}
}

@keyframes fadeIn{
  from{opacity:0}to{opacity:1}
}

/* =============================================
   SCROLLBAR
   ============================================= */
::-webkit-scrollbar{width:7px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.08);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,0.15)}

/* =============================================
   SELECTION
   ============================================= */
::selection{background:rgba(0,229,255,0.3);color:#fff}

/* =============================================
   RESPONSIVE
   ============================================= */
@media(max-width:900px){
  .container{padding:0 18px}
  .hero{padding:18px 0 20px}
  .hero h1{font-size:1.9rem}
  .hero-sub{font-size:0.88rem}
  .articles-grid{grid-template-columns:1fr;gap:16px}
  .categories-row{gap:7px}
  .categories-row .cat-pill{padding:7px 14px;font-size:0.78rem}
  .nav-inner{height:auto;flex-direction:column;gap:8px;padding:10px 0}
  .nav-links{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px}
  .nav-links::-webkit-scrollbar{display:none}
  .nav-link{padding:6px 14px;font-size:0.8rem;white-space:nowrap;flex-shrink:0}
  .nav-social{display:none}
  .radio-section{flex-direction:column;text-align:center}
  .social-section{grid-template-columns:1fr;max-width:100%}
  .article-body{font-size:1.05rem}
  .category-filters{gap:6px}
  .cat-pill{padding:6px 15px;font-size:0.76rem}
  .content-row{flex-direction:column}
  .content-sidebar{display:none}
}

@media(max-width:480px){
  .hero{padding:14px 0 16px}
  .hero h1{font-size:1.7rem}
  .section-header{flex-direction:column;align-items:flex-start}
  .footer-content{flex-direction:column;gap:14px}
  .hero-actions{flex-direction:column;align-items:center}
  .btn{width:100%;justify-content:center}
  .categories-row{gap:5px}
  .categories-row .cat-pill{padding:6px 10px;font-size:0.72rem}
  .article-body{font-size:1rem}
}

/* Cookie-баннер */
/* Cookie banner — стили в HTML inline для каждой страницы */

/* Подписка (Newsletter) */
.newsletter-box {
  margin: 30px 0;
  padding: 22px;
  background: linear-gradient(135deg, rgba(0, 200, 255, 0.08), rgba(180, 80, 255, 0.08));
  border: 1px solid rgba(0, 200, 255, 0.2);
  border-radius: 8px;
}
.newsletter-box h4 { margin: 0 0 8px; font-size: 17px; }
.newsletter-box p { margin: 0 0 14px; font-size: 14px; color: var(--text-dim); }
.newsletter-form { display: flex; gap: 10px; flex-wrap: wrap; }
.newsletter-form input {
  flex: 1;
  min-width: 200px;
  padding: 10px 14px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  color: var(--text-base);
  font-size: 14px;
}
.newsletter-form input:focus { outline: none; border-color: var(--cyan); }
.newsletter-form input.error { border-color: #f44336; }
.newsletter-form button {
  padding: 10px 20px;
  background: var(--cyan);
  color: #000;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.2s;
}
.newsletter-form button:hover { opacity: 0.85; }
.newsletter-form button:disabled { opacity: 0.5; cursor: not-allowed; }
.newsletter-msg {
  margin-top: 10px;
  font-size: 13px;
  padding: 8px 12px;
  border-radius: 4px;
  display: none;
}
.newsletter-msg.success { display: block; background: rgba(76, 175, 80, 0.15); color: #4caf50; }
.newsletter-msg.error { display: block; background: rgba(244, 67, 54, 0.15); color: #f44336; }

/* Comments (utterances) */
.comments-section {
  margin: 40px auto 20px;
  padding-top: 30px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}
.comments-section h4 {
  margin: 0 0 16px;
  font-size: 17px;
  color: var(--text-base);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.comments-section h4 i {
  color: var(--cyan);
}
.comments-container {
  max-width: 720px;
  margin: 0 auto;
  overflow: hidden;
}