/* TGP Game Hub — v1.3.0 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}
.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));}
.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:auto;border-radius:12px;box-shadow:0 2px 14px rgba(0,0,0,.18)}
.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:auto;height:auto;max-width:200px;max-height:260px;border-radius:10px;display:block;object-fit:contain}
.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:140px;height:auto;border-radius:12px;box-shadow:0 2px 14px rgba(0,0,0,.18)}

/* 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:96px;height:128px;object-fit:contain;border-radius:8px;background:#e9eaee}
.tgp-mobile-featured-game .tgp-mfg-thumb--placeholder{width:96px;height:128px;border-radius:8px;background:#e9eaee}