:root{
  --bg:#ffffff;
  --text:#0b0f17;
  --muted:#5b677a;
  --border:rgba(12,18,28,.10);
  --shadow:0 18px 60px rgba(10,15,25,.12);
  --shadow-soft:0 10px 30px rgba(10,15,25,.10);

  --hero:#07090e;
  --hero2:#0b0f17;

  --gold:#eab260;
  --gold2:#ffcb7a;

  --radius:18px;
  --radius2:26px;
  --container:1180px;
}

*{box-sizing:border-box}
html,body{padding:0;margin:0}
body{
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.5;
}

/* Layout */
.container{max-width:var(--container); margin:0 auto; padding:0 18px;}
.container--narrow{max-width:880px}
.site-main{min-height:55vh}

/* Header */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--border);
}
.site-header__inner{
  max-width:var(--container);
  margin:0 auto;
  padding:14px 18px;
  display:flex;
  align-items:center;
  /* Keep the logo at the left and push the search/buttons to the right */
  justify-content:flex-start;
  gap:14px;
}

/* Legacy header menu is unused (we use the search + account buttons instead). */
.site-nav{display:none;}

/* We don't use the legacy menu here (keeps the header clean) */
.site-nav{display:none;}
.site-brand__text{font-weight:800; letter-spacing:.2px; text-decoration:none; color:var(--text); font-size:18px;}
.site-nav__menu{list-style:none; display:flex; gap:16px; padding:0; margin:0; align-items:center;}
.site-nav__menu a{color:var(--text); text-decoration:none; font-weight:600; font-size:14px; opacity:.9}
.site-nav__menu a:hover{opacity:1}
.nav-toggle{display:none; background:transparent; border:0; padding:10px; cursor:pointer}
.nav-toggle span{display:block; width:22px; height:2px; background:var(--text); margin:5px 0; opacity:.8}

/* Hero */
.hero{
  background: radial-gradient(1200px 600px at 20% 10%, rgba(234,178,96,.18), transparent 60%),
              radial-gradient(900px 520px at 80% 30%, rgba(255,203,122,.10), transparent 55%),
              linear-gradient(180deg, var(--hero) 0%, var(--hero2) 100%);
  color:#fff;
  padding:34px 0 34px;
}
.hero__top{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:18px;
  margin-bottom:18px;
}
.kicker{
  font-size:12px;
  letter-spacing:.24em;
  text-transform:uppercase;
  opacity:.85;
}
.hero__title{
  margin:6px 0 0;
  font-size:28px;
  line-height:1.12;
  letter-spacing:-.02em;
  max-width:720px;
}
.hero-search{
  display:flex;
  gap:10px;
  align-items:center;
}
.hero-search__input{
  width:320px;
  padding:12px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);
  color:#fff;
  outline:none;
}
.hero-search__input::placeholder{color:rgba(255,255,255,.65)}

.btn{
  border-radius:999px;
  border:1px solid transparent;
  padding:11px 16px;
  font-weight:800;
  cursor:pointer;
}
.btn--gold{
  background:linear-gradient(180deg, var(--gold2), var(--gold));
  color:#1b1206;
  box-shadow: 0 12px 30px rgba(234,178,96,.22);
}

.hero-grid{
  display:grid;
  grid-template-columns: 1.2fr 1.2fr .9fr .9fr;
  gap:14px;
}
.hero-card{
  position:relative;
  border-radius: var(--radius2);
  overflow:hidden;
  min-height: 250px;
  text-decoration:none;
  color:#fff;
  box-shadow: 0 18px 80px rgba(0,0,0,.35);
  transform: translateZ(0);
}
.hero-card--lg{min-height: 360px}
.hero-card__bg{
  position:absolute; inset:0;
  background-size:cover;
  background-position:center;
  filter:saturate(1.05) contrast(1.02);
  transform:scale(1.01);
}
.hero-card__overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.86) 100%);
}
.hero-card__content{
  position:absolute;
  left:16px; right:16px; bottom:16px;
}
.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.14);
  font-weight:800;
  font-size:12px;
  letter-spacing:.02em;
}
.hero-card__title{
  margin:10px 0 8px;
  font-size:18px;
  line-height:1.15;
  letter-spacing:-.01em;
  text-shadow: 0 10px 28px rgba(0,0,0,.55);
}
.hero-card--lg .hero-card__title{font-size:22px}
.hero-card__meta{
  display:flex; align-items:center; gap:8px;
  font-size:12px;
  opacity:.85;
}
.dot{opacity:.6}
.hero-card:hover .hero-card__bg{transform:scale(1.06); transition:transform .35s ease}
.hero-card .hero-card__bg{transition:transform .35s ease}

/* Separation between black hero and white content */
.hero-sep{
  position:relative;
  background:var(--hero2);
  padding:0;
}
.hero-sep__line{
  height:1px;
  background:linear-gradient(90deg, transparent, rgba(234,178,96,.60), transparent);
}
.hero-sep__glow{
  height:22px;
  background: radial-gradient(600px 20px at 50% 0%, rgba(234,178,96,.45), transparent 70%);
}

/* White content */
.content{background:#fff; padding:26px 0 54px}
.content-grid{
  display:grid;
  grid-template-columns: 1fr 380px;
  gap:18px;
}
.panel{
  background:#fff;
  border:1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  overflow:hidden;
}
.panel__head{
  padding:18px 18px 14px;
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid var(--border);
  background:linear-gradient(180deg, rgba(10,15,25,.02), transparent);
}
.panel__head--stack{flex-direction:column; align-items:flex-start}
.panel--sticky{position:relative; top:auto; align-self:stretch}
.panel--full{grid-column:1 / -1}
.panel--page{padding-bottom:10px}

.h1{font-size:32px; margin:0; letter-spacing:-.02em}
.h2{font-size:18px; margin:0; letter-spacing:-.01em}
.h3{font-size:16px; margin:0; letter-spacing:-.01em}
.meta{font-size:12px; color:var(--muted)}
.link{font-weight:800; font-size:13px; text-decoration:none; color:var(--text); opacity:.8}
.link:hover{opacity:1; text-decoration:underline}
.kicker--dark{color:var(--muted); opacity:1}

.cards{
  padding:16px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
}
.cards--archive{grid-template-columns:repeat(3, minmax(0, 1fr))}
.card{
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  box-shadow: 0 12px 30px rgba(10,15,25,.06);
}
.card__img{position:relative; display:block; aspect-ratio: 16 / 9; overflow:hidden}
.card__img img{width:100%; height:100%; object-fit:cover; display:block}
.card__badge{
  position:absolute; left:12px; top:12px;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(11,15,23,.75);
  color:#fff;
  font-weight:800;
  font-size:12px;
  border:1px solid rgba(255,255,255,.14);
}
.card__body{padding:12px 12px 14px}
.card a{text-decoration:none; color:inherit}
.card:hover{transform:translateY(-2px); transition:transform .15s ease}
.card{transition:transform .15s ease}

.release-card{padding:10px 14px 14px}
.release-list{list-style:none; margin:0; padding:0}
.release-item{
  display:flex;
  gap:12px;
  padding:12px 8px;
  border-bottom:1px solid var(--border);
}
.release-item:last-child{border-bottom:0}
.release-date{
  min-width:76px;
  font-weight:900;
  font-size:12px;
  color:#1b1206;
  background:linear-gradient(180deg, rgba(255,203,122,.75), rgba(234,178,96,.65));
  border:1px solid rgba(234,178,96,.45);
  border-radius:12px;
  padding:9px 10px;
  text-align:center;
}
.release-title{font-weight:900; text-decoration:none; color:var(--text); display:inline-block}
.release-sub{font-size:12px; color:var(--muted); margin-top:4px; display:flex; gap:8px; align-items:center}
.release-main{min-width:0}
.release-title:hover{text-decoration:underline}

.news-list{padding:8px 16px 18px}
.news-row{
  display:grid;
  grid-template-columns: 110px 1fr;
  gap:14px;
  padding:14px 0;
  border-bottom:1px solid var(--border);
}
.news-row:last-child{border-bottom:0}
.news-row__thumb{border-radius:14px; overflow:hidden; display:block; border:1px solid var(--border)}
.news-row__thumb img{width:100%; height:100%; object-fit:cover; display:block}
.excerpt{color:var(--muted); font-size:13px; margin-top:6px}

.prose{padding:18px}
.prose p{margin:0 0 14px}
.prose h2,.prose h3{margin:18px 0 10px}

/* =====================================================
   TGNN Quote styling (Gutenberg Quote / Blockquote)
   ===================================================== */
.prose blockquote,
.prose .wp-block-quote{
  margin:18px 0;
  padding:16px 18px 16px 18px;
  background: rgba(0,0,0,.06);
  border-left:4px solid var(--accent);
  border-radius:12px;
  position:relative;
  color: var(--text);
}

.prose blockquote:before,
.prose .wp-block-quote:before{
  content:"❝";
  position:absolute;
  left:12px;
  top:8px;
  font-size:28px;
  line-height:1;
  color: var(--accent);
  opacity:.55;
}

.prose blockquote p,
.prose .wp-block-quote p{
  margin:0 0 10px;
  font-style:italic;
}

.prose blockquote p:last-child,
.prose .wp-block-quote p:last-child{
  margin-bottom:0;
}

.prose blockquote cite,
.prose .wp-block-quote cite,
.prose blockquote .wp-block-quote__citation,
.prose .wp-block-quote .wp-block-quote__citation{
  display:block;
  margin-top:10px;
  font-style:normal;
  font-weight:700;
  color: var(--muted);
  opacity:.95;
}

/* Large quote style */
.prose .wp-block-quote.is-style-large{
  padding:18px 20px;
  border-left-width:6px;
}

/* Pullquote */
.prose .wp-block-pullquote{
  margin:22px 0;
  padding:18px 18px;
  background: rgba(0,0,0,.06);
  border-top:2px solid rgba(234,178,96,.55);
  border-bottom:2px solid rgba(234,178,96,.55);
  border-left:0;
  border-right:0;
  border-radius:12px;
}

.prose .wp-block-pullquote blockquote{
  margin:0;
  padding:0;
  background: transparent;
  border:0;
}

.prose .wp-block-pullquote blockquote:before{
  display:none;
}

.featured{margin:0 18px 18px; border-radius:18px; overflow:hidden; border:1px solid var(--border)}
.featured img{width:100%; height:auto; display:block}

.pagination{padding:16px 0 0}
.pagination .nav-links{display:flex; gap:10px; flex-wrap:wrap}
.pagination a, .pagination span{
  padding:8px 12px;
  border-radius:999px;
  border:1px solid var(--border);
  text-decoration:none;
  color:var(--text);
  font-weight:700;
  font-size:13px;
}
.pagination .current{background:rgba(10,15,25,.04)}

.empty{padding:16px; color:var(--muted)}

/* Footer */
.site-footer{
  border-top:1px solid var(--border);
  background:#fff;
  padding:22px 0;
}
.site-footer__inner{
  max-width:var(--container);
  margin:0 auto;
  padding:0 18px;
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:16px;
  align-items:start;
}
.footer-brand{font-weight:900}
.footer-note{color:var(--muted); font-size:13px; margin-top:6px}
.footer-nav{list-style:none; margin:0; padding:0; display:flex; gap:12px; flex-wrap:wrap}
.footer-nav a{text-decoration:none; color:var(--text); opacity:.85; font-weight:700; font-size:13px}
.footer-nav a:hover{opacity:1; text-decoration:underline}
.footer-right{display:flex; justify-content:flex-end}
.footer-small{color:var(--muted); font-size:13px}

/* Responsive */
@media (max-width: 1060px){
  .hero-grid{grid-template-columns:1fr 1fr; }
  .hero-card--sm{min-height:260px}
  .content-grid{grid-template-columns:1fr}
  .panel--sticky{position:relative; top:auto; align-self:stretch}
}
@media (max-width: 720px){
  .hero__top{flex-direction:column; align-items:flex-start}
  .hero-search{width:100%}
  .hero-search__input{width:100%}
  .cards{grid-template-columns:1fr}
  .news-row{grid-template-columns: 90px 1fr}
  .site-nav{display:none}
  .nav-toggle{display:block}
  .site-footer__inner{grid-template-columns:1fr}
  .footer-right{justify-content:flex-start}
}


/* Utilities */
.sr-only{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

/* Rating badge on cards */
.card__rating{
  position:absolute;
  right:12px; top:12px;
  padding:7px 10px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,203,122,.95), rgba(234,178,96,.90));
  border:1px solid rgba(234,178,96,.55);
  color:#1b1206;
  font-weight:950;
  font-size:12px;
  letter-spacing:.02em;
  box-shadow: 0 12px 30px rgba(234,178,96,.22);
}
.card__rating span{opacity:.75; font-weight:900}

/* Release header actions + filter */
.release-head-actions{
  display:flex;
  align-items:center;
  gap:10px;
}
.release-filter select{
  appearance:none;
  border-radius:999px;
  border:1px solid var(--border);
  padding:8px 34px 8px 12px;
  font-weight:800;
  font-size:13px;
  background:
    linear-gradient(180deg, rgba(10,15,25,.02), rgba(10,15,25,.00)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230b0f17' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 10px center;
  background-size:auto, 18px 18px;
}

/* "This week" highlight */
.release-item{position:relative}
.week-pill{
  position:absolute;
  right:10px; top:10px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(234,178,96,.14);
  border:1px solid rgba(234,178,96,.35);
  color:#5a3b12;
  font-weight:900;
  font-size:12px;
}
.release-item.is-this-week{
  background:linear-gradient(180deg, rgba(255,203,122,.10), transparent);
  border-radius:14px;
}


/* === Hero cards v1.2: new premium shape + styling === */
.hero-card{
  border-radius: 28px;
  /* cut-corner look */
  -webkit-clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
  border:1px solid rgba(255,255,255,.10);
  box-shadow:
    0 22px 90px rgba(0,0,0,.42),
    0 0 0 1px rgba(234,178,96,.14) inset;
}

.hero-card::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(135deg, rgba(234,178,96,.28), transparent 40%, rgba(255,203,122,.10) 70%, transparent);
  opacity:.45;
  pointer-events:none;
  mix-blend-mode: screen;
}

.hero-card::after{
  /* subtle glass stroke */
  content:"";
  position:absolute; inset:1px;
  border-radius: 26px;
  -webkit-clip-path: inherit;
  clip-path: inherit;
  border:1px solid rgba(255,255,255,.10);
  opacity:.7;
  pointer-events:none;
}

.hero-card__overlay{
  background:
    radial-gradient(700px 260px at 25% 20%, rgba(255,203,122,.18), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.90) 100%);
}

.hero-card__content{
  left:18px; right:18px; bottom:18px;
}

.badge{
  background: rgba(7,9,14,.58);
  border:1px solid rgba(234,178,96,.30);
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}

.hero-card--lg .badge{font-size:12px; padding:8px 12px}
.hero-card__title{letter-spacing:-.02em}
.hero-card--lg .hero-card__title{font-size:24px}

.hero-card__meta{
  opacity:.9;
  gap:10px;
}

.hero-card:hover{
  transform: translateY(-3px);
}
.hero-card:hover .hero-card__bg{
  transform: scale(1.075);
}

/* more “magazine” spacing on hero grid */
.hero-grid{gap:16px}
@media (max-width: 1060px){
  .hero-grid{gap:14px}
}


/* === Hero layout v1.3: 2 large top, 2 small bottom === */
.hero-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "lg1 lg2"
    "sm1 sm2";
  gap:22px;
}

.hero-card--lg:nth-of-type(1){grid-area:lg1}
.hero-card--lg:nth-of-type(2){grid-area:lg2}
.hero-card--sm:nth-of-type(3){grid-area:sm1}
.hero-card--sm:nth-of-type(4){grid-area:sm2}

.hero-card--lg{min-height:420px}
.hero-card--sm{min-height:280px}

/* extra breathing room */
.hero{padding-bottom:44px}

@media (max-width: 1060px){
  .hero-grid{
    grid-template-columns:1fr;
    grid-template-areas:
      "lg1"
      "lg2"
      "sm1"
      "sm2";
    gap:18px;
  }
  .hero-card--lg{min-height:360px}
  .hero-card--sm{min-height:260px}
}


/* === Hero v1.4: only 2 large cards === */
.hero-grid{
  grid-template-columns: 1fr 1fr;
  gap:26px;
}
.hero-card--lg{min-height:460px}

/* Featured small cards section */
.cards--featured{
  grid-template-columns: repeat(2, minmax(0,1fr));
}

@media (max-width: 720px){
  .cards--featured{grid-template-columns:1fr}
}


/* === Release calendar cover art (v1.7) === */
.release-item{
  display:grid;
  grid-template-columns: 64px 1fr;
  gap:12px;
  align-items:center;
}

.release-thumb{
  position:relative;
  width:64px;
  height:64px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--border);
  flex-shrink:0;
}
.release-thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.release-date-badge{
  position:absolute;
  left:6px;
  bottom:6px;
  padding:4px 6px;
  border-radius:8px;
  background:rgba(0,0,0,.65);
  color:#fff;
  font-size:10px;
  font-weight:800;
  line-height:1.1;
}

.release-main{padding-right:6px}


/* === Release calendar: "Popular games" strip style (v1.8) === */
.release-card{
  padding:0;
  overflow:hidden;
  border-radius: var(--radius);
  background: linear-gradient(180deg, #0b0f17, #07090e);
  border-top: 0;
}

.release-strip{
  list-style:none;
  margin:0;
  padding:0;
}

.release-strip__item{
  border-top:1px solid rgba(255,255,255,.08);
}

.release-strip__item:first-child{
  border-top:0;
}

.release-strip__row{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 14px;
  text-decoration:none;
  color:#fff;
  background-size:cover;
  background-position:center;
  min-height:66px;
}

.release-strip__row::before{
  content:"";
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(7,9,14,.92) 0%, rgba(7,9,14,.70) 45%, rgba(7,9,14,.35) 100%);
}

.release-strip__row::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,.04), transparent);
  opacity:.55;
}

.release-strip__num{
  position:relative;
  width:34px; height:34px;
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.18);
  border-radius:10px;
  font-weight:950;
  font-size:13px;
  color:#fff;
  background: rgba(0,0,0,.25);
  flex: 0 0 auto;
}

.release-strip__content{
  position:relative;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.release-strip__title{
  font-weight:900;
  font-size:14px;
  line-height:1.2;
  letter-spacing:-.01em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.release-strip__meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  font-size:12px;
  color: rgba(255,255,255,.78);
}

.release-strip__date{
  color: rgba(255,255,255,.88);
  font-weight:800;
}

.release-strip__item.is-this-week .release-strip__num{
  border-color: rgba(234,178,96,.55);
  box-shadow: 0 0 0 1px rgba(234,178,96,.18) inset;
}

.release-strip__item.is-this-week .release-strip__row::before{
  background:
    linear-gradient(90deg, rgba(7,9,14,.92) 0%, rgba(7,9,14,.62) 45%, rgba(234,178,96,.12) 100%);
}

.release-strip__row:hover{
  transform: translateX(2px);
}
.release-strip__row{
  transition: transform .15s ease;
}

/* CTA bar */
.release-strip__cta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 14px;
  text-decoration:none;
  font-weight:950;
  color:#fff;
  background: linear-gradient(180deg, rgba(234,178,96,.16), rgba(234,178,96,.08));
  border-top:1px solid rgba(255,255,255,.10);
}
.release-strip__cta span{
  font-size:18px;
  opacity:.9;
}

/* Make header look like screenshot (dark panel head) */
.panel--sticky .panel__head{
  background: linear-gradient(180deg, rgba(7,9,14,.96), rgba(7,9,14,.86));
  border-bottom:1px solid rgba(255,255,255,.10);
}
.panel--sticky .panel__head .h2{
  color:#fff;
}
.panel--sticky .panel__head .link{
  color: rgba(255,255,255,.88);
}
.panel--sticky .panel__head .link:hover{color:#fff}
.panel--sticky{
  border:1px solid rgba(12,18,28,.10);
}

/* Filter select on dark head */
.panel--sticky .release-filter select{
  border-color: rgba(255,255,255,.14);
  color:#fff;
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 10px center;
  background-size:auto, 18px 18px;
}



/* === Calendar v1.8.1: square cover corners + scroll list === */
.panel--calendar{
  /* make the calendar panel square (so background images are not clipped rounded) */
  border-radius: 0;
}

.panel--calendar .release-card{
  border-radius: 0;
}

/* Scroll area (only the list scrolls; CTA stays visible) */
.panel--calendar .release-scroll{
  max-height: 360px;
  overflow: auto;
}

/* Optional: nicer scrollbar (WebKit) */
.panel--calendar .release-scroll::-webkit-scrollbar{width:10px}
.panel--calendar .release-scroll::-webkit-scrollbar-track{background:rgba(255,255,255,.06)}
.panel--calendar .release-scroll::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.18);
  border-radius:999px;
  border:2px solid rgba(0,0,0,0);
  background-clip:padding-box;
}
.panel--calendar .release-scroll::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.26)}

@media (max-width: 1060px){
  .panel--calendar .release-scroll{max-height: 320px;}
}


/* === Calendar v1.8.2: vertical scrollbar only if >6 items === */
.panel--calendar .release-scroll{
  overflow-y: hidden;
}

.panel--calendar .release-scroll.is-scrollable{
  max-height: 396px; /* ~6 items */
  overflow-y: auto;
  overflow-x: hidden;
}

/* Force vertical scrollbar styling */
.panel--calendar .release-scroll.is-scrollable::-webkit-scrollbar{
  width: 10px;
}


/* === Calendar v1.8.3: hint scroll by cutting the last visible item === */
.panel--calendar .release-scroll.is-scrollable{
  /* show ~5.6 items so the 6th is partially visible */
  max-height: 372px; /* previously 396px (~6 items); adjust to create a "peek" */
  position: relative;
  padding-bottom: 8px; /* room for fade overlay */
}

/* subtle fade at the bottom to suggest more content */
.panel--calendar .release-scroll.is-scrollable::after{
  content:"";
  position: sticky;
  bottom: 0;
  display:block;
  height: 34px;
  margin-top: -34px;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(7,9,14,0), rgba(7,9,14,.95));
}


/* === Calendar v1.8.4: fix horizontal scroll + ensure bottom items reachable === */
.panel--calendar .release-scroll.is-scrollable{
  overflow-y: auto !important;
  overflow-x: hidden !important; /* prevent sideways scrolling */
  max-height: 372px; /* keep the "peek" */
  position: relative;
  padding-bottom: 8px;
}

/* Make sure rows don't create extra width */
.panel--calendar .release-strip__row{
  width: 100%;
}
.panel--calendar .release-strip__content{
  min-width: 0;
}

/* Bottom fade overlay without affecting scroll height */
.panel--calendar .release-scroll.is-scrollable::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: 34px;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(7,9,14,0), rgba(7,9,14,.95));
}


/* === Calendar v1.8.5: correct scroll activation + no sideways scroll === */
.panel--calendar .release-scroll{
  max-height: none;
  overflow: visible; /* no scrollbar by default */
}

.panel--calendar .release-scroll.is-scrollable{
  max-height: 372px;       /* show ~5.6 items */
  overflow-y: auto !important;
  overflow-x: hidden !important;
  position: relative;
  padding-bottom: 8px;
}

/* keep fade hint */
.panel--calendar .release-scroll.is-scrollable::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height: 34px;
  pointer-events:none;
  background: linear-gradient(180deg, rgba(7,9,14,0), rgba(7,9,14,.95));
}


/* === Calendar v1.8.6: remove half-cut item, keep clean scroll === */
.panel--calendar .release-scroll.is-scrollable{
  max-height: 420px; /* full 6 items visible */
  padding-bottom: 0;
}

.panel--calendar .release-scroll.is-scrollable::after{
  display:none;
}


/* === Reviews & Previews strip (v1.8.7) === */
.review-strip{
  list-style:none;
  margin:0;
  padding:0;
}

.review-strip__item{
  border-top:1px solid var(--border);
}
.review-strip__item:first-child{border-top:0}

.review-strip__row{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px;
  min-height:74px;
  color:var(--text);
  text-decoration:none;
  background-size:cover;
  background-position:center;
}
.review-strip__row::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.85) 45%, rgba(255,255,255,.55) 100%);
}
.review-strip__row::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.04), transparent);
}

.review-strip__num{
  position:relative;
  width:34px; height:34px;
  display:grid; place-items:center;
  border:1px solid var(--border);
  border-radius:10px;
  font-weight:900;
  font-size:13px;
  background:#fff;
}

.review-strip__content{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}

.review-strip__title{
  font-weight:900;
  font-size:15px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.review-strip__meta{
  font-size:12px;
  color:var(--muted);
  display:flex;
  gap:8px;
  align-items:center;
}

.review-strip__row:hover{
  transform:translateX(2px);
}
.review-strip__row{transition:transform .15s ease}


/* === Split layout: Reviews & Calendar side by side (v1.8.8) === */
.panel-group--split{
  display:grid;
  grid-template-columns: 1.3fr 1fr;
  gap:18px;
  grid-column:1 / -1;
}

@media (max-width: 1060px){
  .panel-group--split{
    grid-template-columns:1fr;
  }
}


/* === v1.8.9: ensure side-by-side actually works === */
.panel-group--split > .panel,
.panel-group--split > aside{
  width:100%;
  max-width:100%;
}

.panel-group--split{
  align-items:stretch;
}


/* === v1.9.0: square corners for Reviews & Previews strip === */
.review-strip__row,
.review-strip__num{
  border-radius: 0;
}

.review-strip__row::before,
.review-strip__row::after{
  border-radius: 0;
}


/* === v1.9.1: make the Reviews & Previews panel itself square === */
.panel--reviewsstrip{
  border-radius: 0 !important;
}
.panel--reviewsstrip .panel__head{
  border-radius: 0 !important;
}
.panel--reviewsstrip .review-strip__row{
  border-radius: 0 !important;
}


/* === v1.9.2: make review/previews strip images sharper (less overlay) === */
.review-strip__row{
  background-size: cover;
  background-position: center;
}

.review-strip__row::before{
  /* was very strong white overlay; reduce so cover art is more visible */
  background: linear-gradient(90deg, rgba(255,255,255,.80) 0%, rgba(255,255,255,.62) 45%, rgba(255,255,255,.28) 100%);
}

.review-strip__row::after{
  /* remove extra haze */
  opacity: .22;
}

.review-strip__title{
  text-shadow: 0 10px 22px rgba(0,0,0,.10);
}


/* === v1.9.3: even less gradient on review/preview strips === */
.review-strip__row::before{
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.68) 0%,
    rgba(255,255,255,.48) 45%,
    rgba(255,255,255,.18) 100%
  );
}

.review-strip__row::after{
  opacity: .12;
}


/* === Editorial Lead Hero (v2.0.0) === */
.hero-editorial{padding: 34px 0 22px; background:#0b0f17;}
.hero-editorial .kicker{color: rgba(255,255,255,.82);}
.hero-editorial__title{
  color:#fff;
  font-weight:950;
  letter-spacing:-.02em;
  line-height:1.1;
  margin:6px 0 0;
}
.hero-editorial__top{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}
.hero-editorial .hero-search__input{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);
  color:#fff;
}
.hero-editorial .hero-search__input::placeholder{color:rgba(255,255,255,.60)}

.hero-editorial__grid{
  display:grid;
  grid-template-columns: 1.6fr 1fr;
  gap:18px;
}

.hero-label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  font-size:12px;
  font-weight:900;
  border:1px solid rgba(255,255,255,.16);
  background: rgba(7,9,14,.72);
  color:#fff;
}
.hero-label--score{
  border-color: rgba(234,178,96,.35);
  background: rgba(234,178,96,.12);
}

.hero-lead{
  position:relative;
  min-height: 420px;
  background-size:cover;
  background-position:center;
  border:1px solid rgba(255,255,255,.10);
  box-shadow: 0 22px 90px rgba(0,0,0,.45);
}
.hero-lead a{display:block; height:100%; text-decoration:none; color:#fff;}
.hero-lead__overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(800px 360px at 25% 10%, rgba(234,178,96,.16), transparent 55%),
    linear-gradient(180deg, rgba(0,0,0,.08) 0%, rgba(0,0,0,.55) 55%, rgba(0,0,0,.90) 100%);
}
.hero-lead__content{
  position:absolute;
  left:22px; right:22px; bottom:22px;
}
.hero-lead__meta{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:10px;}
.hero-lead__headline{
  font-size:32px;
  font-weight:950;
  letter-spacing:-.02em;
  line-height:1.12;
  margin:0 0 10px;
}
.hero-lead__excerpt{
  color: rgba(255,255,255,.82);
  margin:0;
  max-width: 720px;
}

.hero-strip{
  list-style:none;
  margin:0;
  padding:0;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(7,9,14,.55);
}
.hero-strip__item{border-top:1px solid rgba(255,255,255,.10);}
.hero-strip__item:first-child{border-top:0;}

.hero-strip__row{
  position:relative;
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px;
  min-height:106px;
  text-decoration:none;
  color:#fff;
  background-size:cover;
  background-position:center;
  overflow:hidden;
}
.hero-strip__row::before{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(7,9,14,.94) 0%, rgba(7,9,14,.78) 55%, rgba(7,9,14,.30) 100%);
}
.hero-strip__num{
  position:relative;
  width:34px; height:34px;
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.18);
  font-weight:950;
  background: rgba(0,0,0,.22);
}
.hero-strip__content{
  position:relative;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.hero-strip__meta{display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
.hero-strip__headline{
  font-weight:950;
  letter-spacing:-.01em;
  line-height:1.2;
  font-size:15px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.hero-lead:hover{transform: translateY(-2px);}
.hero-strip__row:hover{transform: translateX(2px);}
.hero-lead, .hero-strip__row{transition: transform .15s ease;}

@media (max-width: 1060px){
  .hero-editorial__top{align-items:flex-start; flex-direction:column;}
  .hero-editorial__grid{grid-template-columns: 1fr;}
  .hero-lead{min-height: 360px;}
}


/* === v2.0.1: cleaner hero strips (no numbers, lighter gradient) === */
.hero-strip__row::before{
  background: linear-gradient(
    90deg,
    rgba(7,9,14,.86) 0%,
    rgba(7,9,14,.62) 55%,
    rgba(7,9,14,.22) 100%
  );
}


/* === v2.0.2: hero with 5 side strips === */
.hero-strip__row{
  min-height: 92px;
}


/* === Featured hero cards (v2.0.4) === */
.featured-hero-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:18px;
}

.hero-lead--compact{
  min-height: 260px;
}

@media (max-width: 900px){
  .featured-hero-grid{grid-template-columns:1fr;}
  .hero-lead--compact{min-height: 220px;}
}


/* === v2.0.5: square corners for hero & featured cards === */
.hero-lead,
.hero-lead::before,
.hero-lead__overlay,
.hero-strip,
.hero-strip__row,
.featured-hero-grid .hero-lead,
.featured-hero-grid .hero-lead__overlay{
  border-radius: 0 !important;
}


/* === v2.0.6: HARD square corners fix (panels + images) === */
.panel,
.panel__head,
.panel--full,
.featured-hero-grid,
.featured-hero-grid .hero-lead,
.featured-hero-grid .hero-lead *,
.featured-hero-grid img,
.hero-lead,
.hero-lead *,
.hero-lead img{
  border-radius: 0 !important;
}


/* === News strip (v2.0.7) === */
.news-strip{
  list-style:none;
  margin:0;
  padding:0;
}
.news-strip__item{
  border-top:1px solid var(--border);
}
.news-strip__item:first-child{border-top:0}

.news-strip__row{
  position:relative;
  display:block;
  padding:18px;
  min-height:110px;
  text-decoration:none;
  color:inherit;
  background-size:cover;
  background-position:center;
  overflow:hidden;
}
.news-strip__row::before{
  content:"";
  position:absolute; inset:0;
  /* keep it lighter than hero, similar to review strips (image-first) */
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.74) 0%,
    rgba(255,255,255,.56) 45%,
    rgba(255,255,255,.18) 100%
  );
}
.news-strip__row::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,.035), transparent);
  opacity:.12;
}

.news-strip__content{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:8px;
  max-width: 820px;
}
.news-strip__meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
}
.news-strip__title{
  font-weight:950;
  font-size:18px;
  letter-spacing:-.01em;
  line-height:1.2;
}
.news-strip__excerpt{
  color: rgba(0,0,0,.68);
  font-size:14px;
}

.news-strip__row:hover{transform: translateX(2px);}
.news-strip__row{transition: transform .15s ease;}

@media (max-width: 900px){
  .news-strip__row{min-height: 98px;}
  .news-strip__title{font-size:16px;}
}


/* === v2.0.8: more breathing room between news strips === */
.news-strip{
  display:flex;
  flex-direction:column;
  gap:14px; /* space between items */
}

.news-strip__item{
  border-top:none; /* remove divider, spacing does the separation */
}

.news-strip__row{
  padding:22px; /* slightly more internal padding */
}


/* === v2.0.9: stronger but clean gradient for news strips === */
.news-strip__row::before{
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.82) 0%,
    rgba(255,255,255,.64) 45%,
    rgba(255,255,255,.26) 100%
  );
}

.news-strip__row::after{
  opacity: .18;
}


/* === v2.1.0: more spacing between hero side strips === */
.hero-strip{
  display:flex;
  flex-direction:column;
  gap:10px; /* space between the 5 strips */
}

.hero-strip__item{
  border-top:none; /* spacing replaces divider */
}

.hero-strip__row{
  padding:18px 18px; /* slightly more breathing room */
}




/* Default calm state */
.hero-lead__headline,
.hero-lead .hero-label,
.hero-strip__headline,
.hero-strip__content .hero-label{
  opacity: .88;
  transition: opacity .2s ease, text-shadow .2s ease;
}

/* Hover: subtle emphasis */
.hero-lead:hover .hero-lead__headline,
.hero-lead:hover .hero-label,
.hero-strip__row:hover .hero-strip__headline,
.hero-strip__row:hover .hero-label{
  opacity: 1;
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
}


/* === Stronger micro fade (still premium) === */
.hero-lead__headline,
.hero-lead .hero-label,
.hero-strip__headline,
.hero-strip__content .hero-label{
  opacity: .78;
  transition:
    opacity .22s ease,
    text-shadow .22s ease,
    transform .22s ease;
}

.hero-lead:hover .hero-lead__headline,
.hero-lead:hover .hero-label,
.hero-strip__row:hover .hero-strip__headline,
.hero-strip__row:hover .hero-label{
  opacity: 1;
  text-shadow: 0 4px 18px rgba(0,0,0,.45);
  transform: translateY(-1px);
}


/* === Pagination === */
.pagination{
  display:flex;
  justify-content:center;
  margin:32px 0 0;
  gap:6px;
  font-weight:800;
}

.pagination a,
.pagination span{
  padding:8px 12px;
  border:1px solid var(--border);
  text-decoration:none;
  color:inherit;
  background:#fff;
}

.pagination .current{
  background:#000;
  color:#fff;
}


/* === Header search === */
.header-quick{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
}

.header-search{
  margin-left:0;
}
.header-search input{
  background:#fff;
  border:1px solid var(--border);
  padding:8px 12px;
  font-weight:600;
}

/* Hide the desktop "Games" button when the header account buttons are hidden.
   On mobile, the Games link remains available inside the hamburger menu. */
@media (max-width: 920px){
  .header-quick{display:none;}
}


/* === v2.1.0.5: remove legacy hero intro/search === */
.hero-intro,
.hero-intro__inner,
.hero-intro h1,
.hero-intro form{
  display:none !important;
}


/* === v2.1.0.6: remove hero title/search remnants === */
.hero-editorial__title,
.hero-search{
  display:none !important;
}


/* === Fresh label === */
.hero-label--fresh{
  background:#2ecc71;
  color:#fff;
}


/* === Special label === */
.hero-label--special{background:#9B59B6;border-color:#9B59B6;color:#fff;}

/* v2.1.0.9: Special label enabled in Reviews & Previews */


/* === Review/Preview labels (v2.1.0.11) === */
.hero-label--review{background:#2D9CDB;border-color:#2D9CDB;color:#fff;}
.hero-label--preview{background:#F2994A;border-color:#F2994A;color:#fff;}


/* === v2.1.0.11.2: colored labels based on badge text === */
.hero-label--review{background:#2D9CDB;border-color:#2D9CDB;color:#fff;}
.hero-label--preview{background:#F2994A;border-color:#F2994A;color:#fff;}
.hero-label--special{background:#9B59B6;border-color:#9B59B6;color:#fff;}


/* === v2.1.0.11.6: Mobile optimization (hero overflow + layout) === */
@media (max-width: 720px){
  html, body{overflow-x:hidden;}

  .container{
    padding-left:16px;
    padding-right:16px;
  }

  .hero-editorial{
    padding:22px 0 14px;
  }

  .hero-editorial__grid{
    grid-template-columns: 1fr;
    gap:12px;
    min-width:0;
  }

  .hero-lead,
  .hero-strip,
  .hero-strip__row{
    min-width:0;
  }

  .hero-lead{
    min-height: 320px;
  }

  .hero-lead__content{
    padding:18px;
  }

  .hero-strip{
    margin-top:12px;
  }

  .hero-strip__row{
    min-height: 86px;
    padding:14px;
    gap:12px;
  }

  /* Avoid accidental horizontal push on touch devices */
  .hero-strip__row:hover{transform:none;}
}


/* === v2.1.0.11.7: Fix hero horizontal overflow on mobile === */
@media (max-width: 720px){
  .hero-editorial{overflow:hidden;}
  .hero-editorial__grid{overflow:hidden;}
  .hero-lead{overflow:hidden; max-width:100%;}
  .hero-lead::after{inset:0 !important;} /* prevent pseudo-element bleeding */
  .hero-strip__row{max-width:100%;}
  .hero-strip__row::after{inset:0 !important;}
  /* Disable all transforms in hero on touch to avoid sticky :hover overflow */
  .hero-editorial *{transform:none !important;}
}

/* === v2.1.0.11.8: HARD mobile hero width clamp === */
@media (max-width: 720px){
  body{overflow-x:hidden;}

  .hero-editorial,
  .hero-editorial > *,
  .hero-editorial__grid,
  .hero-lead,
  .hero-strip,
  .hero-strip__row{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  .hero-editorial *,
  .hero-editorial *::before,
  .hero-editorial *::after{
    max-width:100% !important;
    box-sizing:border-box;
  }

  .hero-lead__media img,
  .hero-strip__thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
  }
}


/* === v2.1.0.11.9: iOS tiny overflow fix (safe-area + clip) === */
@media (max-width: 720px){
  body{overflow-x: clip;}
  .hero-editorial{overflow-x: clip;}

  /* iOS safe-area padding to avoid 1-2px cut-off */
  .container{
    padding-left: calc(16px + env(safe-area-inset-left));
    padding-right: calc(16px + env(safe-area-inset-right));
  }
}


/* === Single post (v2.1.1.0) === */
.tgnn-single .container--narrow{max-width: 860px;}

.single-hero{
  position: relative;
  min-height: 460px;
  background: #0b0f16;
  background-size: cover;
  background-position: center;
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}

.single-hero__overlay{
  position:absolute;
  inset:0;
  background:
    radial-gradient(80% 60% at 20% 20%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,.18) 100%);
}

.single-hero__inner{
  position: relative;
  height: 100%;
}

.single-hero__content{
  position:absolute;
  left:0; right:0;
  bottom: 0;
  padding: 26px 0 22px;
  color:#fff;
}

.single-hero__badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-bottom: 14px;
}

.single-hero__title{
  font-size: clamp(28px, 4.2vw, 54px);
  line-height: 1.05;
  margin: 0 0 10px;
  letter-spacing: -0.02em;
  text-shadow: 0 10px 30px rgba(0,0,0,.45);
}

.single-hero__meta{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  font-weight: 700;
  opacity: .95;
}

.single-hero__meta .dot{opacity:.75;}
.single-hero__cat{color:inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px;}

.single-body{
  margin-top: -18px;
  position: relative;
}

.single-body .prose{
  padding-top: 18px;
}

.related{
  margin-top: 22px;
}

@media (max-width: 720px){
  .single-hero{min-height: 360px;}
  .single-hero__content{padding: 18px 0 16px;}
  .single-body{margin-top: -10px;}
}


/* === v2.1.1.1: single hero content positioning fix === */
.single-hero__inner{
  min-height: inherit;
  display:flex;
  align-items:flex-end;
}

.single-hero__content{
  position: relative;
  left:auto;
  right:auto;
  bottom:auto;
  width:100%;
}


/* === v2.1.1.1.1: subtle single-hero polish (no centering) === */
.single-hero__content{
  padding: 30px 0 26px;
}

.single-hero__badges{
  margin-bottom: 12px;
}

.single-hero__meta{
  margin-top: 8px;
}

.single-hero__title{
  max-width: 22ch; /* keeps long titles readable */
}

@media (max-width: 720px){
  .single-hero__content{padding: 20px 0 18px;}
  .single-hero__title{max-width: none;}
}


/* === v2.1.1.1.2: YouTube embed frame styling === */
.prose .wp-block-embed.is-type-video,
.prose figure.wp-block-embed-youtube,
.prose .wp-block-embed-youtube,
.prose .wp-block-embed{
  margin: 22px 0;
}

.prose .wp-block-embed.is-type-video .wp-block-embed__wrapper,
.prose figure.wp-block-embed-youtube .wp-block-embed__wrapper,
.prose .wp-block-embed-youtube .wp-block-embed__wrapper,
.prose .wp-block-embed__wrapper{
  border: 1px solid var(--border);
  background: #fff;
  padding: 12px;
}

/* Make iframe responsive and framed */
.prose .wp-block-embed__wrapper iframe,
.prose iframe[src*="youtube.com"],
.prose iframe[src*="youtu.be"]{
  display:block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
}

/* Inner media surface */
.prose .wp-block-embed__wrapper iframe{
  background:#000;
}

/* Optional caption styling */
.prose .wp-block-embed figcaption{
  margin-top: 10px;
  font-weight: 700;
  opacity: .8;
}


/* === v2.1.1.1.3: Subtle premium YouTube frame === */
.prose .wp-block-embed.is-type-video .wp-block-embed__wrapper,
.prose figure.wp-block-embed-youtube .wp-block-embed__wrapper,
.prose .wp-block-embed-youtube .wp-block-embed__wrapper,
.prose .wp-block-embed__wrapper{
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 10px 26px rgba(0,0,0,.08);
  padding: 14px;
  border-radius: 0; /* matches your square panel language */
}

.prose .wp-block-embed__wrapper iframe{
  border-radius: 0;
}

/* Small top rule to feel more editorial */
.prose .wp-block-embed__wrapper{
  position: relative;
}

.prose .wp-block-embed__wrapper::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:2px;
  background:#000;
  opacity:.14;
}

/* Better spacing on mobile */
@media (max-width:720px){
  .prose .wp-block-embed__wrapper{
    padding: 12px;
  }
}


/* === Author card (v2.1.1.2.0) === */
.author-card{
  margin-top: 18px;
}

.author-card__inner{
  display:flex;
  gap:18px;
  padding: 16px;
  border: 1px solid var(--border);
  background:#fff;
}

.author-card__avatar img{
  width: 86px;
  height: 86px;
  object-fit: cover;
  display:block;
}

.author-card__body{
  flex:1;
  min-width:0;
}

.author-card__top{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
}

.author-card__name{
  margin:0;
  font-size: 18px;
  letter-spacing:-.01em;
}

.author-card__link{
  font-weight:800;
  text-decoration:none;
  border-bottom:2px solid rgba(0,0,0,.14);
  padding-bottom:2px;
}

.author-card__bio{
  margin:10px 0 12px;
  opacity:.9;
}

.author-card__socials{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.author-card__social{
  display:inline-flex;
  align-items:center;
  padding:8px 10px;
  border:1px solid var(--border);
  text-decoration:none;
  font-weight:800;
}

@media (max-width:720px){
  .author-card__inner{
    flex-direction:column;
    align-items:flex-start;
  }
  .author-card__avatar img{
    width:72px;
    height:72px;
  }
  .author-card__top{
    width:100%;
  }
}


/* === Author card icons + favorite game (v2.1.1.2.1) === */
.author-card__fav{
  margin: -4px 0 12px;
  opacity: .92;
}

.author-card__social{
  width: 40px;
  height: 40px;
  justify-content:center;
  padding:0;
}

.author-card__icon{
  display:inline-flex;
  width: 18px;
  height: 18px;
}
.author-card__icon svg{
  width: 18px;
  height: 18px;
  display:block;
  fill: currentColor;
}


/* === v2.1.1.2.2: Author card social icons polish === */
.author-card__socials{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  margin-top: 6px;
}

.author-card__social{
  width:40px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  background:#fff;
  text-decoration:none;
  color:#111;
}

.author-card__social:hover{
  background:#111;
  color:#fff;
}

.author-card__icon{
  width:18px;
  height:18px;
  display:inline-flex;
}

.author-card__icon svg{
  width:18px;
  height:18px;
  display:block;
  fill: currentColor;
}


/* === Author card head strip (v2.1.1.2.6) === */
.author-card__head{
  position: relative;
  height: 74px;
  background: #0b0f16;
  background-size: cover;
  background-position: center;
  border: 1px solid var(--border);
  border-bottom: 0;
}
.author-card__head-overlay{
  position:absolute;
  inset:0;
  background: linear-gradient(to right, rgba(0,0,0,.70), rgba(0,0,0,.25));
}
.author-card__head-inner{
  position:relative;
  height:100%;
  display:flex;
  align-items:flex-end;
  padding: 12px 16px;
}
.author-card__head-title{
  color:#fff;
  font-weight:900;
  letter-spacing:-.01em;
  text-transform: uppercase;
  font-size: 12px;
  opacity:.95;
}
.author-card__inner{
  border-top:0;
}
@media (max-width:720px){
  .author-card__head{height:64px;}
}


/* === Frontend auth/profile (v2.2.0.0) === */
.auth-panel .panel__head,
.profile-panel .panel__head{margin-bottom: 10px;}

.notice{
  border:1px solid var(--border);
  padding:12px 14px;
  margin: 12px 0 14px;
  font-weight: 800;
}
.notice--error{background:#fff6f6;}
.notice--success{background:#f4fff4;}

.auth-form label,
.profile-form label{
  display:block;
  font-weight: 900;
  margin: 12px 0;
}
.auth-form input,
.profile-form input,
.profile-form textarea{
  width:100%;
  margin-top:8px;
  border:1px solid var(--border);
  padding:12px 12px;
  font-weight: 700;
}

.auth-form__row{
  display:flex !important;
  align-items:center;
  gap:10px;
  font-weight: 800;
}
.auth-form__row input{width:auto; margin-top:0;}

.auth-form__help{margin-top: 12px; font-weight: 800;}

.profile-head__left{display:flex;align-items:center;gap:14px;}
.profile-head__avatar{width:56px;height:56px;object-fit:cover;border:1px solid var(--border);background:#fff;}

.grid-2{display:grid;grid-template-columns: 1fr 1fr;gap: 12px;}
@media (max-width: 720px){.grid-2{grid-template-columns:1fr;}}


/* === Header account links (v2.2.0.1) === */
.header-account{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left: 12px;
}
.header-account__link{
  display:inline-flex;
  align-items:center;
  padding:10px 12px;
  border:1px solid var(--border);
  text-decoration:none;
  font-weight:900;
  background:#fff;
  color:#111;
}
.header-account__link--muted{
  opacity:.75;
}
.header-account__link--pill{
  background:#111;
  color:#fff;
}
@media (max-width: 920px){
  .header-account{display:none;}
}

/* === Header: move Games to button near search, hide inline menu on desktop === */
@media (min-width: 721px){
  .site-nav__menu{display:none;}
}

.header-account__link--games{white-space:nowrap;}

/* === Author profile page (v2.2.0.1) === */
.author-hero__head{
  position:relative;
  background:#0b0f16;
  background-size:cover;
  background-position:center;
  border:1px solid var(--border);
}
.author-hero__overlay{position:absolute;inset:0;background:linear-gradient(to right, rgba(0,0,0,.75), rgba(0,0,0,.28));}
.author-hero__inner{
  position:relative;
  display:flex;
  gap:16px;
  padding: 18px;
  align-items:flex-end;
}
.author-hero__avatar img{
  width:84px;height:84px;object-fit:cover;border:1px solid rgba(255,255,255,.25);background:#111;
}
.author-hero__kicker{color:#fff;opacity:.9;font-weight:900;text-transform:uppercase;font-size:12px;}
.author-hero__name{color:#fff;margin:6px 0 0;font-size:28px;letter-spacing:-.02em;}
.author-hero__fav{color:#fff;opacity:.95;margin-top:8px;font-weight:800;}
.author-hero__socials{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;}
.author-hero__social{
  width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.25);
  color:#fff;text-decoration:none;background:rgba(0,0,0,.25);
}
.author-hero__social:hover{background:#fff;color:#111;}
.author-hero__social svg{width:18px;height:18px;fill:currentColor;}
.author-hero__bio{padding:14px 18px;border:1px solid var(--border);border-top:0;background:#fff;}
@media (max-width:720px){
  .author-hero__inner{align-items:flex-start;}
  .author-hero__name{font-size:22px;}
}


/* === Mobile account links in nav (v2.2.0.2) === */
.site-nav__account{
  display:none;
  padding: 12px 12px 6px;
  gap:10px;
  flex-wrap:wrap;
  border-top:1px solid var(--border);
}
.site-nav__account-link{
  display:inline-flex;
  align-items:center;
  padding:10px 12px;
  border:1px solid var(--border);
  text-decoration:none;
  font-weight:900;
  background:#fff;
  color:#111;
}
.site-nav__account-link--pill{
  background:#111;
  color:#fff;
}

/* only show the account links when the mobile nav is opened */
@media (max-width: 720px){
  .site-nav.is-open .site-nav__account{display:flex;}
}


/* === Author card links (v2.2.0.2) === */
.author-card__avatar-link{display:inline-block;}
.author-card__name-link{text-decoration:none;color:inherit;}
.author-card__name-link:hover{opacity:.85;}


/* === Profile page premium (v2.2.0.3) === */
.profile-card{overflow:hidden;}
.profile-card__head{
  position:relative;
  background:#0b0f16;
  background-size:cover;
  background-position:center;
  border:1px solid var(--border);
}
.profile-card__overlay{position:absolute;inset:0;background:linear-gradient(to right, rgba(0,0,0,.78), rgba(0,0,0,.28));}
.profile-card__inner{
  position:relative;
  display:flex;
  align-items:flex-end;
  gap:16px;
  padding:18px;
}
.profile-card__avatar img{
  width:84px;height:84px;object-fit:cover;
  border:1px solid rgba(255,255,255,.25);
  background:#111;
}
.profile-card__kicker{color:#fff;opacity:.9;font-weight:900;text-transform:uppercase;font-size:12px;}
.profile-card__name{color:#fff;margin:6px 0 0;font-size:28px;letter-spacing:-.02em;}
.profile-card__sub{color:#fff;opacity:.9;margin-top:6px;font-weight:800;}
.profile-card__logout{color:#fff;text-decoration:underline;}
.profile-card__fav{color:#fff;opacity:.95;margin-top:10px;font-weight:800;}

.profile-form--premium{
  padding: 10px 18px 18px;
}
.profile-form__section{
  border-top:1px solid var(--border);
  padding-top: 14px;
  margin-top: 10px;
}
.profile-form__section-title{
  font-weight: 900;
  text-transform: uppercase;
  font-size: 12px;
  opacity: .75;
  margin-bottom: 8px;
}
.profile-form__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.profile-form__hint{
  display:block;
  margin-top:8px;
  font-size:12px;
  opacity:.7;
  font-weight:800;
}
.profile-form__actions{
  border-top:1px solid var(--border);
  padding-top: 14px;
  margin-top: 14px;
}
@media (max-width: 720px){
  .profile-form__grid{grid-template-columns:1fr;}
  .profile-card__name{font-size:22px;}
}


/* === Auth pages premium (v2.2.0.4) === */
.auth-card{overflow:hidden;}
.auth-card__head{
  position:relative;
  background:#0b0f16;
  background-size:cover;
  background-position:center;
  border:1px solid var(--border);
}
.auth-card__overlay{
  position:absolute;
  inset:0;
  background: radial-gradient(900px 320px at 40% 30%, rgba(255,255,255,.14), rgba(0,0,0,0)),
              linear-gradient(to right, rgba(0,0,0,.78), rgba(0,0,0,.30));
}
.auth-card__inner{
  position:relative;
  padding: 22px 18px;
  color:#fff;
}
.auth-card__kicker{
  font-weight:900;
  text-transform:uppercase;
  font-size:12px;
  opacity:.9;
}
.auth-card__title{
  margin:6px 0 0;
  font-size:32px;
  letter-spacing:-.02em;
}
.auth-card__sub{
  margin-top:8px;
  font-weight:800;
  opacity:.92;
  max-width: 720px;
}

.auth-card__body{
  padding: 12px 18px 18px;
  border-top: 1px solid var(--border);
  background:#fff;
}

.auth-form--premium{
  margin-top: 6px;
}
.auth-form__grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.auth-form__grid--2{
  grid-template-columns: 1fr 1fr;
}
.auth-form__actions{
  border-top: 1px solid var(--border);
  padding-top: 14px;
  margin-top: 14px;
}
@media (max-width: 720px){
  .auth-card__title{font-size:24px;}
  .auth-form__grid--2{grid-template-columns:1fr;}
}


/* Extra safety: remove adminbar spacing for members (v2.2.0.6) */
body.tgnn-hide-adminbar { margin-top: 0 !important; }


/* === Header admin button (v2.2.0.7) === */
.header-account__link--admin{
  background: #111;
  color: #fff;
}
@media (max-width: 920px){
  .site-nav__account-link--admin{
    background:#111;
    color:#fff;
  }
}


/* === Comments (v2.2.1.0) === */
.comments-panel{margin-top: 16px;}
.comment-list{list-style:none;margin:0;padding:0;}
.comment-list .comment{border-top:1px solid var(--border);padding:14px 0;}
.comment-meta{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.comment-author .avatar{border:1px solid var(--border);background:#fff;}
.comment-author .fn{font-weight:900;}
.comment-metadata a{opacity:.7;text-decoration:none;font-weight:800;}
.comment-content{font-weight:700;line-height:1.55;}
.comment-content p{margin:0 0 10px;}
.reply a{font-weight:900;text-decoration:underline;}
.tgnn-comment-form{border-top:1px solid var(--border);padding-top:14px;margin-top:12px;}
.tgnn-comment-form textarea,
.tgnn-comment-form input[type="text"],
.tgnn-comment-form input[type="email"],
.tgnn-comment-form input[type="url"]{
  width:100%;
  border:1px solid var(--border);
  padding:12px;
  font-weight:700;
  margin-top:8px;
}
.comment-form__title{margin:0 0 8px;}


/* === Comments premium (v2.2.1.3) === */
.comments-panel{margin-top:16px;}
.comments-panel .panel__head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;}
.comment-list{list-style:none;margin:0;padding:0;}
.comment-list .comment{border-top:1px solid var(--border);padding:14px 0;}
.comment-meta{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.comment-author .avatar{border:1px solid var(--border);background:#fff;}
.comment-author .fn{font-weight:900;}
.comment-metadata a{opacity:.7;text-decoration:none;font-weight:800;}
.comment-content{font-weight:700;line-height:1.55;}
.comment-content p{margin:0 0 10px;}
.reply a{font-weight:900;text-decoration:underline;}

.comment-form-shell{border-top:1px solid var(--border);padding-top:14px;margin-top:12px;}
.comment-form-shell__meta{font-weight:800;opacity:.8;margin-bottom:10px;}
.comment-form-shell__meta a{text-decoration:underline;}

.tgnn-comment-form label{display:block;font-weight:900;margin:10px 0 0;}
.tgnn-comment-form textarea{
  width:100%;
  border:1px solid var(--border);
  padding:12px;
  font-weight:700;
  margin-top:8px;
  min-height:140px;
}
.tgnn-comment-form .form-submit{margin-top:12px;}


/* === Comments styling upgrade (v2.2.1.4) === */
.comments-panel{padding-bottom:18px;}
.comments-panel .comment-list,
.comments-panel .empty-state--comments,
.comments-panel .notice,
.comments-panel .comment-form-shell{padding-left:18px;padding-right:18px;}

.comments-panel .empty-state--comments{
  border-top:1px solid var(--border);
  padding-top:14px;
  padding-bottom:14px;
  font-weight:800;
  color: var(--muted);
}

.comment-form-shell{
  border-top:1px solid var(--border);
  margin-top:0;
  padding-top:14px;
}
.comment-form-shell__meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  border:1px solid var(--border);
  background: linear-gradient(180deg, rgba(10,15,25,.03), transparent);
  padding:10px 12px;
  font-weight:900;
  color: var(--text);
  margin-bottom:12px;
}
.comment-form-shell__meta a{
  color: inherit;
  opacity:.75;
  text-decoration:none;
  font-weight:900;
}
.comment-form-shell__meta a:hover{opacity:1;text-decoration:underline;}

.tgnn-comment-form .comment-form__title{
  margin: 0 0 8px;
  font-size: 18px;
}
.tgnn-comment-form label{
  font-size: 14px;
  opacity:.85;
  letter-spacing:.01em;
}
.tgnn-comment-form textarea{
  font-size:16px;
  background:#fff;
  box-shadow:none;
}
.tgnn-comment-form .form-submit{
  margin-top:12px;
}


/* === Comment cards with user strip + avatar (v2.2.1.5) === */
.comment-list{margin:0;padding:0;list-style:none;}
.comment-list > li{border-top:0;padding:0;}
.tgnn-comment{margin: 12px 0;}
.tgnn-comment__card{
  border:1px solid var(--border);
  background:#fff;
  overflow:hidden;
}
.tgnn-comment__strip{
  position:relative;
  height: 58px;
  background:#0b0f16;
  background-size:cover;
  background-position:center;
}
.tgnn-comment__strip-overlay{
  position:absolute; inset:0;
  background: linear-gradient(to right, rgba(0,0,0,.70), rgba(0,0,0,.25));
}
.tgnn-comment__body{
  display:flex;
  gap:12px;
  padding: 12px;
}
.tgnn-comment__avatar img{
  width:52px;height:52px;object-fit:cover;
  border:1px solid var(--border);
  background:#fff;
}
.tgnn-comment__content{flex:1; min-width:0;}
.tgnn-comment__meta{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.tgnn-comment__author{font-weight:900;}
.tgnn-comment__author a{color:inherit;text-decoration:none;}
.tgnn-comment__author a:hover{text-decoration:underline;}
.tgnn-comment__time{opacity:.7;font-weight:800;text-decoration:none;white-space:nowrap;}
.tgnn-comment__time:hover{text-decoration:underline;}
.tgnn-comment__text{font-weight:700;line-height:1.55;}
.tgnn-comment__text p{margin:0 0 10px;}
.tgnn-comment__actions a{font-weight:900;text-decoration:underline;}
@media (max-width: 720px){
  .tgnn-comment__meta{flex-direction:column;align-items:flex-start;}
  .tgnn-comment__time{white-space:normal;}
}


/* === Role badges + profile stats + activity (v2.2.2.0) === */
.role-badge{
  display:inline-flex;
  align-items:center;
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.25);
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  margin-left:10px;
  letter-spacing:.04em;
  vertical-align:middle;
}
.role-badge--member{background:rgba(255,255,255,.10); color:#fff;}
.role-badge--author{background:rgba(234,178,96,.18); color:#fff;}
.role-badge--editor{background:rgba(96,180,234,.18); color:#fff;}
.role-badge--admin{background:rgba(234,96,96,.18); color:#fff;}

.profile-stats, .author-stats{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:10px;
  color:#fff;
  opacity:.95;
  font-weight:800;
}
.profile-stats__item, .author-stats__item{
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(0,0,0,.18);
}
.profile-stats__item strong, .author-stats__item strong{font-weight:900;}

.profile-activity__grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.profile-activity__title{
  font-weight:900;
  text-transform:uppercase;
  font-size:12px;
  opacity:.75;
  margin-bottom:8px;
}
.profile-activity__list{list-style:none;margin:0;padding:0;}
.profile-activity__item{border-top:1px solid var(--border);}
.profile-activity__item a{
  display:block;
  padding: 12px 0;
  text-decoration:none;
  color:inherit;
}
.profile-activity__item-title{display:block;font-weight:900;}
.profile-activity__item-meta{display:block;opacity:.7;font-weight:800;margin-top:2px;}
.profile-activity__item-excerpt{display:block;opacity:.85;font-weight:700;margin-top:6px;line-height:1.45;}
.profile-activity__item a:hover .profile-activity__item-title{ text-decoration: underline; }

@media (max-width: 900px){
  .profile-activity__grid{grid-template-columns:1fr;}
  .role-badge{margin-left:8px; padding:5px 9px;}
}


/* === Activity cards polish (v2.2.2.1) === */
.profile-activity{margin-top:16px;}
.profile-activity .panel__head{display:flex;align-items:baseline;justify-content:space-between;}
.activity-card{
  border:1px solid var(--border);
  background:#fff;
  overflow:hidden;
}
.activity-card__head{
  font-weight:900;
  text-transform:uppercase;
  font-size:12px;
  letter-spacing:.06em;
  padding:12px;
  border-bottom:1px solid var(--border);
  background: linear-gradient(to bottom, rgba(0,0,0,.03), rgba(0,0,0,0));
}
.activity-card__body{padding: 0 12px;}
.profile-activity__grid{gap:16px;}
.profile-activity__item{border-top:1px solid var(--border);}
.profile-activity__item:first-child{border-top:0;}
.profile-activity__item a{
  padding: 14px 0;
}
.profile-activity__item-title{font-size:16px;line-height:1.25;}
.profile-activity__item-meta{
  display:inline-block;
  margin-top:8px;
  padding:6px 10px;
  border:1px solid var(--border);
  background:#f7f7f7;
  font-size:12px;
  font-weight:900;
  letter-spacing:.02em;
}
.profile-activity__item-excerpt{
  margin-top:10px;
  padding:10px 12px;
  border-left:3px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  border-radius: 2px;
}
.profile-activity__item a:hover{
  background: rgba(0,0,0,.02);
}
.profile-activity__item a:hover .profile-activity__item-meta{
  background:#fff;
}
@media (max-width: 900px){
  .activity-card__body{padding:0 10px;}
  .profile-activity__item a{padding:12px 0;}
}


/* === Comment count meta (v2.2.2.1.1) === */
.meta--comments{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(0,0,0,.18);
  font-weight:900;
  font-size:12px;
  letter-spacing:.02em;
}
.meta--comments:before{
  content:"💬";
  font-size:12px;
  line-height:1;
}


/* Hero comments label */
.hero-label--comments{opacity:.95;}

.muted{opacity:.75;font-weight:800;}


/* Header logo */
.site-brand__link{display:flex;align-items:center;gap:10px;text-decoration:none;}
.site-brand__img{height:34px;width:auto;display:block;filter: drop-shadow(0 8px 24px rgba(0,0,0,.25));}
@media (max-width: 900px){
  .site-brand__img{height:30px;}
}


/* Trending indicator */
.hero-label--trending{
  border-color: rgba(234,178,96,.55);
  background: rgba(234,178,96,.16);
  color: #fff;
}
.meta--comments.is-trending{
  border-color: rgba(234,178,96,.55);
  background: rgba(234,178,96,.16);
}

/* === Games archive filters (v2.3.1) === */
.archive-filters{width:100%;}
.archive-filters__row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}
.archive-filters select{
  appearance:none;
  border-radius:999px;
  border:1px solid var(--border);
  padding:10px 36px 10px 12px;
  font-weight:800;
  font-size:13px;
  background:
    linear-gradient(180deg, rgba(10,15,25,.02), rgba(10,15,25,.00)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230b0f17' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 10px center;
  background-size:auto, 18px 18px;
}
.archive-filters__reset{
  display:inline-flex;
  align-items:center;
  padding:10px 12px;
  border:1px solid var(--border);
  text-decoration:none;
  font-weight:900;
  background:#fff;
  color:#111;
}
.archive-filters__reset:hover{background:rgba(0,0,0,.02);}

@media (max-width: 720px){
  .archive-filters__row{width:100%;}
  .archive-filters select{flex:1 1 auto; min-width:160px;}
}

/* === Discord Banner (under hero, black fade) === */
.discord-strip-wrap{
  margin: 0;
  padding: 14px 0 18px;
  background: var(--hero2);
}

.discord-strip-wrap .container{
  display:flex;
  justify-content:center;
}

.discord-strip{
  position: relative;
  display: block;
  width: 100%;
  max-width: var(--container);
  background: #000;
  color: #fff;
  text-decoration: none;
  overflow: hidden;
}

.discord-strip__bg{
  position: absolute;
  inset: 0;
  background: url('../img/tgnn-discord.png') center / cover no-repeat;
  z-index: 0;
}

.discord-strip__bg::before,
.discord-strip__bg::after{
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  pointer-events: none;
  z-index: 1;
}

.discord-strip__bg::before{
  left: 0;
  background: linear-gradient(to right, #000 0%, rgba(0,0,0,0) 100%);
}

.discord-strip__bg::after{
  right: 0;
  background: linear-gradient(to left, #000 0%, rgba(0,0,0,0) 100%);
}

.discord-strip__content{
  position: relative;
  z-index: 2;
  max-width: 640px;
  margin: 0;
  padding: 26px 24px;
  text-align: left;
}

.discord-strip__kicker{
  display: block;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  opacity: .85;
  margin-bottom: 8px;
}

.discord-strip__title{
  display: block;
  font-size: 32px;
  font-weight: 900;
  margin-bottom: 10px;
}

.discord-strip__text{
  font-size: 15px;
  opacity: .9;
  margin-bottom: 14px;
}

.discord-strip__btn{
  display: inline-block;
  padding: 10px 16px;
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.25);
  font-weight: 800;
}

.discord-strip:hover .discord-strip__btn{ background: rgba(255,255,255,.25); }

@media (max-width: 768px){
  .discord-strip__title{ font-size: 26px; }
  .discord-strip__bg::before,
  .discord-strip__bg::after{ width: 60px; }
}

@media (max-width: 720px){
  .discord-strip-wrap{padding: 12px 0 14px;}
  .discord-strip__content{padding: 22px 18px;}
}


/* === Games archive strip (v2.3.1) === */
.game-strip{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:14px;
}

.game-strip__item{margin:0;}

.game-strip__row{
  display:flex;
  gap:16px;
  padding:18px;
  border:1px solid var(--border);
  background:#fff;
  box-shadow: var(--shadow-soft);
  text-decoration:none;
  color:inherit;
  overflow:hidden;
}

.game-strip__row:hover{transform: translateX(2px);}
.game-strip__row{transition: transform .15s ease;}

.game-strip__cover{
  position:relative;
  width:96px;
  height:96px;
  border:1px solid var(--border);
  overflow:hidden;
  background:#fff;
  flex:0 0 auto;
}

.game-strip__cover img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.game-strip__date{
  position:absolute;
  left:8px;
  bottom:8px;
  padding:6px 8px;
  border:1px solid rgba(255,255,255,.18);
  background: rgba(0,0,0,.70);
  color:#fff;
  font-size:11px;
  font-weight:900;
  letter-spacing:.02em;
}

.game-strip__content{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.game-strip__meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  color: var(--muted);
  font-weight:800;
  font-size:12px;
}

.game-strip__title{
  font-weight:950;
  font-size:18px;
  letter-spacing:-.01em;
  line-height:1.2;
}

.game-strip__excerpt{
  color: rgba(0,0,0,.68);
  font-size:14px;
  line-height:1.45;
}

@media (max-width: 900px){
  .game-strip__row{padding:16px;}
  .game-strip__cover{width:84px;height:84px;}
  .game-strip__title{font-size:16px;}
}

@media (max-width: 720px){
  .game-strip__cover{width:76px;height:76px;}
}

/* TGNN Review – score badge minder transparant / altijd leesbaar */
.tgnn-review-block .hero-label--score{
  background: linear-gradient(135deg,
    rgba(0,0,0,.78),
    rgba(10,10,10,.92)
  ) !important;

  border-color: rgba(6, 99, 250, 0.75) !important;

  box-shadow:
    0 10px 26px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,255,255,.06) !important;

  text-shadow: 0 2px 8px rgba(0,0,0,.85) !important;
}

/* Cijfer extra punch */
.tgnn-review-block .hero-label--score strong{
  color: #0ea2ff !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.9) !important;
}

/* =========================
   TGNN Review – Pros/Cons punch
   ========================= */

.tgnn-review-block .tgnn-review-block__lists{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}

@media (max-width: 800px){
  .tgnn-review-block .tgnn-review-block__lists{
    grid-template-columns: 1fr;
  }
}

/* Cards */
.tgnn-review-block .tgnn-review-block__col{
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(234,178,96,.18);
  border-radius: 0; /* vierkant */
  padding: 14px 14px 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}

/* Titles */
.tgnn-review-block .tgnn-review-block__head{
  margin: 0 0 10px !important;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  font-size: 12px;
  opacity: .95;
}

/* Lists */
.tgnn-review-block .tgnn-review-block__ul{
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.tgnn-review-block .tgnn-review-block__ul li{
  position: relative;
  padding-left: 28px;
  margin: 10px 0;
  line-height: 1.35;
}

/* Plus icon */
.tgnn-review-block .tgnn-review-block__col--pros .tgnn-review-block__ul li:before{
  content: "+";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 900;
  background: rgba(46, 204, 113, .18);
  border: 1px solid rgba(46, 204, 113, .55);
  color: rgba(46, 204, 113, 1);
}

/* Minus icon */
.tgnn-review-block .tgnn-review-block__col--cons .tgnn-review-block__ul li:before{
  content: "–";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  font-weight: 900;
  background: rgba(255, 90, 95, .16);
  border: 1px solid rgba(255, 90, 95, .55);
  color: rgba(255, 90, 95, 1);
}

/* Slight emphasis on text */
.tgnn-review-block .tgnn-review-block__ul li{
  text-shadow: 0 2px 8px rgba(0,0,0,.35);
}

/* =========================
   TGNN Review – Pros/Cons refined
   ========================= */

/* Base card */
.tgnn-review-block .tgnn-review-block__col{
  background: rgba(255,255,255,.04); /* lichter dan voorheen */
  border-left: 1px solid rgba(234,178,96,.12);
  border-right: 1px solid rgba(234,178,96,.12);
  border-bottom: 1px solid rgba(234,178,96,.12);
  border-radius: 0;
  padding: 14px 14px 12px;
  box-shadow: 0 8px 22px rgba(0,0,0,.32);
  position: relative;
}

/* Green accent for Pros */
.tgnn-review-block .tgnn-review-block__col--pros{
  border-top: 2px solid rgba(46, 204, 113, .85);
}

/* Red accent for Cons */
.tgnn-review-block .tgnn-review-block__col--cons{
  border-top: 2px solid rgba(255, 90, 95, .85);
}

/* Headings stay strong */
.tgnn-review-block .tgnn-review-block__head{
  margin-bottom: 10px !important;
  font-weight: 800;
  letter-spacing: .4px;
  text-transform: uppercase;
  font-size: 12px;
  opacity: .95;
}

/* TGNN Review – score cijfer groter */
.tgnn-review-block .hero-label--score strong{
  font-size: 35px;
}

/* Optioneel: /10 iets kleiner houden */
.tgnn-review-block .hero-label--score span{
  font-size: 14px;
  opacity: .85;
}

/* Review strip – "Gespeeld op" gecentreerd boven platform */
.tgnn-review-block .hero-label--platform{
  position: relative;
  padding-top: 16px;
  text-align: center; /* centreert platformtekst */
}

.tgnn-review-block .hero-label--platform::before{
  content: "Gespeeld op";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .35px;
  text-transform: uppercase;
  opacity: .7;
  white-space: nowrap;
}

/* Frontpage small hero: voorkom default link blauw/paars */
.hero-mini,
.hero-mini:visited,
.hero-mini:hover,
.hero-mini:active {
  color: inherit;
  text-decoration: none;
}

.hero-mini__row,
.hero-mini__content,
.hero-mini__title,
.hero-mini__meta,
.hero-mini__date {
  color: #fff;
  text-decoration: none;
}

/* Als de titel toevallig een <a> wordt binnenin: */
.hero-mini__title a,
.hero-mini__title a:visited,
.hero-mini__title a:hover,
.hero-mini__title a:active {
  color: #fff;
  text-decoration: none;
}

/* Subtiele hover (optioneel, maar mooi) */
.hero-mini:hover .hero-mini__row{
  border-color: rgba(234,178,96,.35);
}

/* =========================
   HERO hover zoom effects
   ========================= */

/* Zorg dat overflow netjes blijft */
.hero-lead,
.hero-mini__row {
  overflow: hidden;
}

/* =========================
   Grote hero: alleen bg zoom
   ========================= */

.hero-lead{
  position: relative;
  overflow: hidden;
}

/* pseudo layer voor bg */
.hero-lead::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  z-index: 0;
  transition: transform .7s ease;
  will-change: transform;
}

/* zoom alleen de bg */
.hero-lead:hover::before{
  transform: scale(1.06);
}

/* content altijd boven bg houden */
.hero-lead > a,
.hero-lead__overlay,
.hero-lead__content{
  position: relative;
  z-index: 1;
}

/* =========================
   Grote hero: content weer onderin
   ========================= */

.hero-lead{
  display: flex;
  align-items: flex-end; /* duwt content naar onder */
}

.hero-lead > a{
  display: flex;
  width: 100%;
  height: 100%;
}

.hero-lead__content{
  margin-top: auto;      /* extra zekerheid */
  padding-bottom: 32px;  /* zelfde spacing als oude versie */
}

/* Kleine hero thumbnail zoom */
.hero-mini__thumb img {
  transition: transform .6s ease;
  will-change: transform;
}

.hero-mini:hover .hero-mini__thumb img {
  transform: scale(1.08);
}