/* TGP Game Hub — v1.3.4 mockup styling */
:root {
  --tgp-accent: #ff8a00;
  --tgp-border: rgba(140, 145, 160, .35);
  --tgp-card: rgba(255, 255, 255, .04);
  --tgp-card-strong: rgba(255, 255, 255, .06);
}

.tgp-gh-wrap {
  padding-left: 16px;
  padding-right: 16px;
  margin-left: auto;
  margin-right: auto
}

@media (min-width:1280px) {
  .tgp-gh-wrap {
    padding-left: 172px;
    padding-right: 172px
  }
}

.tgp-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px
}

@media (min-width:992px) {
  .tgp-layout {
    grid-template-columns: minmax(0, 1fr) 320px
  }
}

/* HERO + HEADER */
.tgp-hero-cover {
  position: relative;
  background-size: cover;
  background-position: center;
  border-radius: 0;
  margin-top: 24px;
  background-color: #11111d; /* fallback when no image */
}

.tgp-hero-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .65), rgba(0, 0, 0, .25) 30%, rgba(0, 0, 0, .75));
}

/* Game Hub hero navigation */
.tgp-gh-hero-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 0.25rem;
}

.tgp-gh-hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  text-decoration: none;
  background: rgba(5, 5, 15, 0.9);
  color: #f5f5f7;
  backdrop-filter: blur(10px);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;
}

/* Game Hub: nav above info card */
.tgp-gh-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: -62px;
    margin-bottom: 57px;
    position: relative;
    z-index: 3;
}

.tgp-gh-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.55rem 1.1rem;
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  text-decoration: none;
  background: rgba(5, 5, 15, 0.9);
  color: #f5f5f7;
  backdrop-filter: blur(10px);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    border-color 0.15s ease,
    background 0.15s ease;
}

.tgp-gh-nav-btn:hover,
.tgp-gh-nav-btn:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
  border-color: rgba(255, 255, 255, 0.6);
  outline: none;
}

.tgp-gh-nav-back {
  opacity: 0.9;
}

.tgp-gh-nav-calendar {
  background: var(--tgp-accent, #ff8a00);
  color: #000;
  border-color: transparent;
}

.tgp-gh-nav-calendar:hover,
.tgp-gh-nav-calendar:focus-visible {
  filter: brightness(1.05);
}

.tgp-gh-nav-arrow {
  font-size: 1rem;
  line-height: 1;
}

/* Same alignment on all devices */
@media (max-width: 720px) {
  .tgp-gh-nav-btn {
    font-size: 0.85rem;
    padding: 0.5rem 0.9rem;
  }
}


.tgp-gh-hero-btn:hover,
.tgp-gh-hero-btn:focus-visible {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
  border-color: rgba(255, 255, 255, 0.6);
  outline: none;
}

.tgp-gh-hero-back {
  opacity: 0.9;
}

.tgp-gh-hero-calendar {
  background: var(--tgp-accent, #ff8a00);
  color: #000;
  border-color: transparent;
}

.tgp-gh-hero-calendar:hover,
.tgp-gh-hero-calendar:focus-visible {
  filter: brightness(1.05);
}

.tgp-gh-hero-arrow {
  font-size: 1rem;
  line-height: 1;
}


.tgp-hero-cover .inner {
  position: relative;
  padding: 78px 0 42px;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .5)
}

.tgp-hero-title {
  font-size: 2.6rem;
  margin: 0;
  font-weight: 800;
  letter-spacing: .01em
}

@media (min-width:992px) {
  .tgp-hero-title {
    font-size: 3.25rem
  }
}

/* TOP INFO STRIP (mockup-like) */
.tgp-info {
  background: var(--tgp-card);
  backdrop-filter: saturate(140%) blur(2px);
  border: 1px solid var(--tgp-border);
  padding: 16px;
  border-radius: 12px;
  margin-top: -22px
}

.tgp-main .hero {
  display: grid;
  grid-template-columns: 160px 1fr 200px;
  gap: 18px;
  align-items: start
}

.tgp-main.hero .art img {
  width: 160px;
  height: 213.33px;
  border-radius: 12px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .18);
  object-fit: cover
}

.tgp-main .short {
  font-size: 0.97rem;
  line-height: 1.6;
  margin: 0 0 8px;
  opacity: .95
}

.tgp-main .meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px
}

.tgp-main .meta div span {
  display: block;
  font-weight: 700;
  opacity: .9;
  margin-bottom: 2px
}

/* review score panel on right */
.tgp-scorecard {
  justify-self: end;
  align-self: stretch;
  background: var(--tgp-card-strong);
  border: 1px solid var(--tgp-border);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 180px
}

.tgp-scorecard .star {
  width: 54px;
  height: 54px;
  display: inline-block;
  background: conic-gradient(from 0deg, #fff 0 360deg);
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill=\"%23fff\" d=\"M12 17.3l-6.18 3.64 1.64-7.03L2 9.24l7.19-.61L12 2l2.81 6.63 7.19.61-5.46 4.67 1.64 7.03z\"/></svg>') center/contain no-repeat;
  border-radius: 8px
}

.tgp-scorecard .big {
  font-size: 1.6rem;
  font-weight: 900
}

.tgp-scorecard .sub {
  font-size: .75rem;
  opacity: .85
}

.tgp-scorecard .btn {
  display: inline-block;
  padding: 8px 12px;
  border: 1px solid var(--tgp-border);
  border-radius: 10px;
  text-decoration: none
}

/* buy buttons */
.tgp-buy-title {
  margin: 10px 0 6px;
  font-weight: 800
}

.tgp-main .buy {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px
}

.tgp-main .buy a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 130px;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid var(--tgp-border);
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  background: var(--tgp-accent);
  color: #111
}

/* tabs */
.tgp-main .tabs {
  margin-top: 16px
}

.tgp-main .tablist {
  display: flex;
  gap: 8px;
  align-items: center;
  border-bottom: 1px solid var(--tgp-border);
  padding-bottom: 8px
}

.tgp-main .tablist button {
  background: transparent;
  border: 0;
  padding: 8px 10px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  opacity: .9
}

.tgp-main .tablist button+button::before {
  content: "|";
  opacity: .4;
  margin-right: 8px
}

.tgp-main .tablist button[aria-selected="true"] {
  border-color: var(--tgp-accent);
  opacity: 1
}

.tgp-main .tabpanel {
  display: none;
  padding: 18px 0
}

.tgp-main .tabpanel.active {
  display: block
}

/* post cards + load more */
.tgp-main .post-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px
}

.tgp-main .post-card {
  border: 1px solid var(--tgp-border);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  background: var(--tgp-card)
}

.tgp-main .post-card img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block
}

.tgp-main .post-card .pc-body {
  padding: 12px;
  font-size: .96rem
}

.tgp-main .post-card .pc-body .meta {
  font-size: .85rem;
  opacity: .8
}

.tgp-load-wrap {
  text-align: center;
  margin-top: 14px
}

.tgp-load-btn {
  padding: .75rem 1.25rem;
  border: 1px solid var(--tgp-border);
  border-radius: 999px;
  background: transparent;
  cursor: pointer
}

/* sidebar featured game card */
.tgp-featured-game.tgp-fg-card {
  border: 1px solid var(--tgp-border);
  border-radius: 12px;
  padding: 14px;
  background: var(--tgp-card)
}

.tgp-fg-media {
  display: flex;
  justify-content: center;
  align-items: center
}

.tgp-fg-img {
  width: 195px;
  height: 260px;
  border-radius: 10px;
  display: block;
  object-fit: cover
}

.tgp-fg-title {
  font-size: 1.05rem;
  margin: 8px 0 10px;
  text-align: center
}

.tgp-fg-meta-dl {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px
}

.tgp-fg-meta-dl .row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 8px
}

.tgp-fg-meta-dl dt {
  font-weight: 700;
  opacity: .85
}

.tgp-fg-meta-dl dd {
  margin: 0
}

.tgp-fg-buy-title {
  margin: 12px 0 6px;
  font-weight: 800
}

.tgp-fg-buy {
  display: grid;
  gap: 8px;
  margin-top: 4px
}

.tgp-fg-btn {
  display: block;
  width: 100%;
  text-align: center;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--tgp-border);
  text-decoration: none;
  font-weight: 700;
  background: var(--tgp-accent);
  color: #111
}

/* Gallery grid */
.tgp-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px
}

.tgp-gallery a {
  display: block;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--tgp-border)
}

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

/* Lightbox */
.tgp-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .9);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999
}

.tgp-lightbox.active {
  display: flex
}

.tgp-lightbox img {
  max-width: 92vw;
  max-height: 92vh;
  border-radius: 10px
}

.tgp-lightbox .tgp-lb-close,
.tgp-lightbox .tgp-lb-prev,
.tgp-lightbox .tgp-lb-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .25);
  color: #fff;
  padding: 10px 14px;
  border-radius: 999px;
  cursor: pointer;
  user-select: none
}

.tgp-lightbox .tgp-lb-close {
  top: 24px;
  right: 24px;
  transform: none
}

.tgp-lightbox .tgp-lb-prev {
  left: 24px
}

.tgp-lightbox .tgp-lb-next {
  right: 24px
}

@media (max-width:900px) {
  .tgp-main .hero {
    grid-template-columns: 100px 1fr
  }

  .tgp-scorecard {
    grid-column: 1/-1;
    justify-self: start;
    flex-direction: row;
    gap: 12px
  }
}


/* v1.3.1 tweaks */
/* Remove top gap and make hero taller */
.tgp-hero-cover {
  margin-top: 0
}

.tgp-hero-cover .inner {
  min-height: 300px;
  padding: 0
}

/* Overview block (full width) now lives outside the two-column grid */
.tgp-overview .tgp-info {
  margin-top: -28px
}

/* Title now sits inside the overview card */
.tgp-ov-title {
  margin: 0 0 8px;
  font-size: 1.75rem;
  font-weight: 900
}

/* Smaller buy buttons + hover effects */
.tgp-main .buy a {
  padding: 9px 10px;
  font-size: .92rem;
  transition: transform .08s ease, filter .15s ease, box-shadow .15s ease
}

.tgp-main .buy a:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .16)
}

/* Hover for other buttons */
.tgp-scorecard .btn,
.tgp-load-btn,
.tgp-fg-btn {
  transition: transform .08s ease, filter .15s ease, box-shadow .15s ease
}

.tgp-scorecard .btn:hover,
.tgp-load-btn:hover,
.tgp-fg-btn:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .16)
}

/* Tabs restyle: pill for active, no pipes */
.tgp-main .tablist button {
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  letter-spacing: .08em
}

.tgp-main .tablist button+button::before {
  content: none
}

.tgp-main .tablist button[aria-selected="true"] {
  background: var(--tgp-accent);
  color: #111
}

.tgp-main .tablist {
  gap: 10px
}


/* v1.3.2 layout fixes */
.tgp-hero-cover .inner {
  min-height: 380px
}

/* Make overview card truly full-width spacing */
.tgp-overview .tgp-info {
  margin-top: -36px
}

/* Even smaller buy buttons */
.tgp-main .buy a {
  padding: 8px 10px;
  font-size: .88rem
}

/* Fine-tune tabs spacing */
.tgp-main .tablist {
  margin-top: 8px
}


/* v1.3.3 — overlay, raised overview, optimized art, review panel tweaks */
.tgp-hero-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(16, 16, 27, .7);
}

/* #10101b @ 70% */
.tgp-hero-cover .inner {
  min-height: 280px
}

/* show overview sooner */
.tgp-overview .tgp-info {
  margin-top: -48px
}

/* pull the overview upward */

/* Featured art sizing (avoid full-size) */
.tgp-main.hero .art img {
  width: 160px;
  height: 213.33px;
  border-radius: 12px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .18);
  object-fit: cover
}

/* Review scorecard: no outline, align bottom-right */
.tgp-scorecard {
  background: transparent;
  border: none;
  justify-self: end;
  align-self: end;
  min-width: auto;
  padding: 8px
}

.tgp-scorecard .sub {
  display: none
}

/* remove 0/100 line */

/* Sidebar alignment hint (no change needed if theme has sidebar-single.php) */
.tgp-sidebar {
  align-self: start
}

/* request: sidebar top margin */
.tgp-layout .tgp-sidebar {
  margin-top: 20px
}

.tgp-main .meta div {
  display: inline-flex;
  gap: 6px;
  align-items: baseline;
  position: relative
}

.tgp-main .meta div:not(:last-child)::after {
  content: '\2022';
  opacity: .55;
  margin-left: 16px
}

.tgp-main .meta div span {
  display: inline;
  font-weight: 700;
  opacity: .9;
  margin: 0
}

/* --- Meta list: vertical with horizontal separators (no dots) --- */
.tgp-main .meta {
  display: block;
}

.tgp-main .meta div {
  display: block;
  padding: 6px 0;
  margin: 0;
  border: 0;
}

.tgp-main .meta div+div {
  border-top: 1px solid rgba(255, 255, 255, .12);
}

/* subtle horizontal line */
.tgp-main .meta div b {
  font-weight: 700;
  opacity: .9;
  margin-right: .35em
}

.tgp-main .meta div::after {
  content: none !important;
}

/* --- Meta list: two columns with per-item horizontal separators --- */
.tgp-main .meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 22px
}

.tgp-main .meta div {
  display: block;
  padding: 8px 0;
  margin: 0;
  border: 0
}

.tgp-main .meta div {
  border-top: 1px solid rgba(255, 255, 255, .12)
}

.tgp-main .meta div:nth-child(-n+2) {
  border-top: none
}

/* first row (two items) has no line */
@media (max-width: 720px) {
  .tgp-main .meta {
    grid-template-columns: 1fr
  }

  .tgp-main .meta div:nth-child(2) {
    border-top: 1px solid rgba(255, 255, 255, .12)
  }

  /* restore line for 2nd item on single column */
}

/* --- REVERT: meta back to original two-column, no separators --- */
.tgp-main .meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 22px
}

.tgp-main .meta div {
  display: block;
  padding: 0;
  margin: 0;
  border: 0
}

.tgp-main .meta div::after {
  content: none !important;
}

.tgp-main .meta div+div {
  border-top: none !important;
}

@media (max-width: 720px) {
  .tgp-main .meta {
    grid-template-columns: 1fr
  }
}

/* === Exact layout: two columns + stacked labels and values; wide pill buy buttons === */
.tgp-main .meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 56px
}

.tgp-main .meta .mi,
.tgp-main .meta div {
  display: block
}

.tgp-main .meta .mi b,
.tgp-main .meta div b {
  display: block;
  font-weight: 800;
  margin: 0 0 8px
}

.tgp-main .meta .mi span,
.tgp-main .meta div span {
  display: block;
  opacity: .9;
  font-weight: 500
}

/* Buy buttons as wide pills (two equal columns) */
.tgp-main .buy {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-top: 10px
}

.tgp-main .buy a {
  display: block;
  width: 100%;
  text-align: center;
  padding: 14px 0;
  border-radius: 18px;
  background: #FF9F2E;
  color: #111;
  font-weight: 800;
  text-decoration: none
}

.tgp-main .buy a:hover {
  filter: brightness(1.05)
}

/* Headings in meta bold */
.tgp-main .meta div span {
  font-weight: 800 !important
}

/* Buy buttons height to match Read Review */
.tgp-main .buy a {
  padding: 8px 0 !important;
  border-radius: 10px !important
}

/* Scorecard bordered with heading */
.tgp-scorecard {
  border: 1px solid var(--tgp-border);
  border-radius: 10px;
  padding: 12px 14px;
  text-align: center
}

.tgp-scorecard .tgp-sc-title {
  font-weight: 800;
  margin-bottom: 6px;
  opacity: .9
}

/* Tweaks: scorecard drop shadow + nudge left inside container */
.tgp-scorecard {
  box-shadow: -5px -5px 8px #a7a7a7, 5px 5px 8px #000000;
  margin-right: 8px;
}

/* === Tweaks: scorecard border + left nudge === */
.tgp-scorecard {
  border-color: #FF9F2E !important;
}

@media (min-width:1025px) {
  .tgp-scorecard {
    margin-left: -8px;
  }
}

@media (max-width:1024px) {
  .tgp-scorecard {
    margin-left: 0;
  }
}

/* === Remove unintended glow/shadows on scorecard & its button === */
.tgp-scorecard,
.tgp-scorecard::before,
.tgp-scorecard::after {
  box-shadow: none !important;
  filter: none !important;
}

.tgp-scorecard .btn,
.tgp-scorecard .btn::before,
.tgp-scorecard .btn::after {
  box-shadow: none !important;
  filter: none !important;
}

/* keep border color aligned with CTA and a clean surface */
.tgp-scorecard {
  border-color: #FF9F2E !important;
  background: var(--tgp-panel, rgba(255, 255, 255, 0.04));
}

/* Archive grid */
.tgp-archive-wrap {
  padding: 24px 0
}

.tgp-archive-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px
}

.tgp-arch-card {
  background: var(--tgp-panel, rgba(255, 255, 255, .04));
  border-radius: 12px;
  overflow: hidden;
  padding: 12px
}

.tgp-arch-name {
  font-size: 1.05rem;
  margin: .5rem 0
}

.tgp-arch-excerpt {
  opacity: .85;
  font-size: .92rem
}

@media (max-width:1024px) {
  .tgp-archive-grid {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media (max-width:640px) {
  .tgp-archive-grid {
    grid-template-columns: 1fr
  }
}

/* TGP GameHub: score bar beneath star/value */
.tgp-scorebar {
  height: 4px;
  width: 56%;
  margin: 8px auto 6px;
  background: rgba(255, 255, 255, .08);
  border-radius: 999px;
  overflow: hidden
}

.tgp-scorebar-fill {
  height: 100%;
  background: #FF9F2E;
  border-radius: inherit
}


/* === TGP Game Hub: Mobile Layout Fixes (2025-11-11) === */
@media (max-width: 720px) {
  body.single.single-tgp_game section.tgp-info.hero .tgp-main.hero {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    align-items: start !important;
  }

  body.single.single-tgp_game section.tgp-info.hero .tgp-main.hero .art {
    display: flex !important;
    justify-content: center !important;
  }

  body.single.single-tgp_game section.tgp-info.hero .tgp-main.hero .art img {
    display: block !important;
    margin: 0 auto !important;
    width: 220px;
    max-width: 88vw;
    height: auto;
  }

  body.single.single-tgp_game .tgp-ov-title {
    text-align: center !important;
    margin: 6px 0 4px !important;
  }

  body.single.single-tgp_game .short {
    text-align: center !important;
    margin-bottom: 12px !important;
  }

  body.single.single-tgp_game .tgp-main .meta {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    column-gap: 16px !important;
    row-gap: 12px !important;
  }

  body.single.single-tgp_game .tgp-main .meta>* {
    margin: 0 !important;
  }

  body.single.single-tgp_game .tgp-main .meta>*:last-child {
    grid-column: 1 / -1 !important;
    /* Platforms spans full width */
  }

  body.single.single-tgp_game .tgp-buy-title {
    text-align: center !important;
    margin: 12px 0 8px !important;
  }

  body.single.single-tgp_game .tgp-main .buy {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    margin-top: 6px !important;
  }

  body.single.single-tgp_game .tgp-main .buy a {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Keep review card inside the bordered overview & prevent overflow */
  body.single.single-tgp_game .tgp-main.hero .tgp-scorecard {
    position: static !important;
    float: none !important;
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    margin: 14px 0 0 0 !important;
  }

  body.single.single-tgp_game .tgp-info {
    padding: 16px !important;
    overflow: visible !important;
  }
}


/* === Mobile Featured Game block on single posts === */
.tgp-mobile-featured-game {
  display: none;
  margin: 24px 0 0;
  padding: 0
}

.tgp-mobile-featured-game h2 {
  font-size: 1.125rem;
  line-height: 1.3;
  margin: 0 0 12px;
  font-weight: 700
}

.tgp-mobile-featured-game .tgp-mfg-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none
}

.tgp-mobile-featured-game .tgp-mfg-thumb {
  width: 72px;
  height: 72px;
  display: inline-block;
  object-fit: cover;
  border-radius: 8px;
  background: #e9eaee
}

.tgp-mobile-featured-game .tgp-mfg-thumb--placeholder {
  background: #e9eaee;
  width: 72px;
  height: 72px;
  border-radius: 8px
}

.tgp-mobile-featured-game .tgp-mfg-title {
  font-weight: 600
}

@media (max-width: 768px) {
  .tgp-mobile-featured-game {
    display: block
  }
}


/* === Mobile Featured Game image sizing update (3:4 portrait @ 96x128) === */
.tgp-mobile-featured-game .tgp-mfg-thumb {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
  background: #e9eaee
}

.tgp-mobile-featured-game .tgp-mfg-thumb--placeholder {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  background: #e9eaee
}

/* Mobile "In this article" compact card */
.tgp-mobile-featured-game {
  display: none;
  margin: 24px 0 0;
  padding: 0;
}

.tgp-mobile-featured-game .tgp-mfg-follow {
  font-size: .9rem;
  margin: 0 0 12px;
  opacity: .85;
}

.tgp-mobile-featured-game .tgp-mfg-card {
  border-radius: 16px;
  border: 1px solid var(--tgp-border);
  background: var(--tgp-card-strong);
  padding: 14px;
}

/* Heading inside the card */
.tgp-mobile-featured-game h2 {
  font-size: .9rem;
  line-height: 1.3;
  margin: 0 0 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--tgp-accent);
}

/* Game row */
.tgp-mobile-featured-game .tgp-mfg-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

.tgp-mobile-featured-game .tgp-mfg-thumb {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  object-fit: cover;
  display: inline-block;
  background: #181820;
  flex-shrink: 0;
}

.tgp-mobile-featured-game .tgp-mfg-thumb--placeholder {
  width: 72px;
  height: 72px;
  border-radius: 12px;
  background: #181820;
}

.tgp-mobile-featured-game .tgp-mfg-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.tgp-mobile-featured-game .tgp-mfg-title {
  font-weight: 600;
  font-size: .98rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tgp-mobile-featured-game .tgp-mfg-release {
  font-size: .85rem;
  opacity: .8;
}

/* Buy button – single, prominent CTA */
.tgp-mobile-featured-game .tgp-mfg-buy {
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 600;
  font-size: .95rem;
  text-decoration: none;
  background: var(--tgp-accent);
  color: #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}

/* Only visible on mobile */
@media (max-width:768px) {
  .tgp-mobile-featured-game {
    display: block;
  }
}

@media (min-width:769px) {
  .tgp-mobile-featured-game {
    display: none;
  }
}