/* ==========================================================================
   COSM-GAME · GAME PROFILE MOCKUP MAP v1
   The existing live Game Profile renderer remains the source of truth.
   This sheet changes presentation/position only and is scoped to Game Profile.
   ========================================================================== */

.gp-mockup-page{
  --gp-bg:#080b12;
  --gp-surface:#0e131d;
  --gp-surface-2:#151b28;
  --gp-surface-3:#1c2436;
  --gp-border:#232b3d;
  --gp-text:#e8ebf1;
  --gp-secondary:#98a2b8;
  --gp-muted:#666f85;
  --gp-accent:#4b8bf4;
  --gp-accent-2:#7c5cff;
  --gp-amber:#ffb020;
  --gp-green:#3ecf8e;
  --gp-red:#ef6e50;
  --gp-radius:14px;
  --gp-radius-sm:9px;
  --gp-container:1180px;

  margin:0;
  background-color:var(--gp-bg);
  background-image:
    url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2217.32%22%20height%3D%2230%22%20viewBox%3D%220%200%2017.32%2030%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%234b8bf4%22%20stroke-width%3D%221%22%20stroke-opacity%3D%220.14%22%3E%3Cpolygon%20points%3D%220,-10%208.66,-5%208.66,5%200,10%20-8.66,5%20-8.66,-5%22/%3E%3Cpolygon%20points%3D%2217.32,-10%2025.98,-5%2025.98,5%2017.32,10%208.66,5%208.66,-5%22/%3E%3Cpolygon%20points%3D%228.66,5%2017.32,10%2017.32,20%208.66,25%200,20%200,10%22/%3E%3Cpolygon%20points%3D%22-8.66,5%200,10%200,20%20-8.66,25%20-17.32,20%20-17.32,10%22/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(circle at 15% 0%,rgba(75,139,244,.10),transparent 40%),
    radial-gradient(circle at 85% 15%,rgba(124,92,255,.08),transparent 40%);
  background-repeat:repeat,no-repeat,no-repeat;
  background-size:17.32px 30px,auto,auto;
  color:var(--gp-text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

.gp-mockup-page main{
  padding:28px 0 8px;
}

.gp-mockup-page .page-wrap{
  width:100%;
  max-width:var(--gp-container);
  margin:0 auto;
  padding:0 32px;
}

.gp-mockup-page .post-layout{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:22px;
  align-items:start;
}

.gp-mockup-page .main-col{min-width:0;}
.gp-mockup-page a{text-decoration:none;}

/* ── breadcrumb / profile badge / title ─────────────────────────────── */
.gp-mockup-page .breadcrumb{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  margin:14px 0 12px;
  font-size:11.5px;
  color:var(--gp-muted);
}
.gp-mockup-page .breadcrumb a{color:var(--gp-secondary);}
.gp-mockup-page .breadcrumb a:hover{color:var(--gp-accent);}
.gp-mockup-page .breadcrumb i{font-size:9px;opacity:.6;}
.gp-mockup-page .breadcrumb-cur{color:var(--gp-muted);}

.gp-profile-badges{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  margin-bottom:11px;
}
.gp-profile-badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 9px;
  border-radius:6px;
  border:1px solid rgba(75,139,244,.48);
  background:rgba(75,139,244,.22);
  color:#6ea3f7;
  font-size:10px;
  font-weight:700;
  line-height:1.35;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.gp-profile-badge i{font-size:10px;}

.gp-mockup-page .art-title{
  margin:0 0 12px;
  color:#fff;
  font-family:inherit;
  font-size:30px;
  font-weight:700;
  line-height:1.18;
  letter-spacing:-.01em;
}

/* Live tag renderer stays untouched; its anchors become the mockup pills. */
.gp-mockup-page .art-subline{
  position:relative;
  margin:0 0 12px;
  color:var(--gp-secondary);
}
.gp-mockup-page .art-subline:not(.art-subline-marquee){
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
}
.gp-mockup-page .art-subline .sub-dot{display:none!important;}
.gp-mockup-page .art-subline .tax-link{
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  padding:3px 9px;
  border:1px solid currentColor;
  border-radius:6px;
  background:color-mix(in srgb,currentColor 18%,transparent);
  font-size:10.5px;
  font-weight:600;
  line-height:1.4;
}
.gp-mockup-page .art-subline-marquee{
  overflow:hidden;
  /* The marquee must clip, but a moving pill should disappear before it reaches
     the hard container edge. A small fully-transparent gutter plus a wider
     fade prevents the first/last visible pill from looking physically cut. */
  -webkit-mask-image:linear-gradient(90deg,
    transparent 0, transparent 16px,
    #000 84px, #000 calc(100% - 84px),
    transparent calc(100% - 16px), transparent 100%);
          mask-image:linear-gradient(90deg,
    transparent 0, transparent 16px,
    #000 84px, #000 calc(100% - 84px),
    transparent calc(100% - 16px), transparent 100%);
}
.gp-mockup-page .art-tag-marquee-row + .art-tag-marquee-row{margin-top:6px;}
.gp-mockup-page .art-tag-marquee-group{
  gap:7px;
}
.gp-mockup-page .art-tag-marquee-group .tax-link{margin-right:7px;}

.gp-mockup-page .art-meta{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin:0 0 12px;
  color:var(--gp-muted);
  font-size:11.5px;
}
.gp-mockup-page .art-meta i{font-size:12px;opacity:.85;}
.gp-mockup-page .art-meta .meta-sep{
  width:3px;
  height:3px;
  overflow:hidden;
  border-radius:50%;
  background:var(--gp-border);
  color:transparent;
  font-size:0;
}
.gp-mockup-page .art-meta .tax-link{color:var(--gp-secondary)!important;}
.gp-mockup-page .art-meta .tax-link:hover{color:var(--gp-accent)!important;}

.gp-mockup-page .plat-row{
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  margin:0 0 16px;
}
.gp-mockup-page .plat-row .plat-pill,
.gp-mockup-page .tax-pill,
.gp-mockup-page .genre-pill,
.gp-mockup-page .tag-pill{
  border-radius:6px!important;
  font-size:10.5px!important;
  line-height:1.4!important;
  font-weight:600!important;
  padding:3px 9px!important;
}

/* ── full-width hero + lead ─────────────────────────────────────────── */
.gp-mockup-page .hero-img{
  position:relative;
  width:100%;
  min-height:0!important;
  height:auto!important;
  aspect-ratio:16/7;
  overflow:hidden;
  border:0!important;
  border-radius:var(--gp-radius)!important;
  background-color:#141a28;
  background-position:center;
  background-size:cover;
  box-shadow:none!important;
}
.gp-mockup-page .hero-img::after{display:none!important;}
.gp-mockup-page .hero-label{
  left:0!important;
  right:0!important;
  bottom:0!important;
  top:auto!important;
  border:0!important;
  border-radius:0!important;
  padding:30px 16px 12px!important;
  background:linear-gradient(0deg,rgba(6,8,13,.92),transparent)!important;
  color:rgba(255,255,255,.8)!important;
  font-size:11px!important;
  font-weight:700!important;
  letter-spacing:.08em!important;
  text-transform:uppercase;
}

/* Opening paragraph is deliberately on the field, not inside a box. */
.gp-mockup-page .hero-img + .section{
  position:static;
  margin:16px 0 0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.gp-mockup-page .hero-img + .section .section-p{
  margin:0!important;
  max-width:none!important;
  padding:0!important;
  color:var(--gp-secondary)!important;
  font-size:14px!important;
  line-height:1.72!important;
}
.gp-mockup-page .hero-img + .section .section-p strong{
  color:var(--gp-text);
  font-weight:600;
}

/* ── reusable mockup section heading ────────────────────────────────── */
.gp-mock-section{
  margin-top:26px;
  scroll-margin-top:110px;
}
.gp-mock-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  margin-bottom:12px;
}
.gp-mock-head h2{
  display:flex;
  align-items:center;
  gap:9px;
  margin:0;
  color:var(--gp-text);
  font-size:17px;
  font-weight:600;
  line-height:1.25;
  letter-spacing:-.01em;
}
.gp-mock-ic{
  display:inline-flex;
  width:24px;
  height:24px;
  flex:0 0 24px;
  align-items:center;
  justify-content:center;
  border-radius:7px;
  font-size:11.5px;
}
.gp-ic-blue{background:rgba(75,139,244,.14);color:var(--gp-accent);}

/* ── Game Summary: live Quick Info data, mockup row layout ──────────── */
.gp-mockup-page .gp-summary-section .qi-card{
  margin:0!important;
  padding:20px 22px!important;
  border:1px solid var(--gp-border)!important;
  border-radius:var(--gp-radius)!important;
  background:rgba(14,19,29,.62)!important;
  box-shadow:none!important;
}
.gp-mockup-page .gp-summary-section .qi-stat-row{
  display:flex!important;
  flex-direction:column!important;
  gap:0!important;
  grid-template-columns:none!important;
}
.gp-mockup-page .gp-summary-section .qi-stat,
.gp-mockup-page .gp-summary-section .qi-credit{
  display:flex!important;
  align-items:flex-start!important;
  gap:16px!important;
  min-width:0;
  padding:9px 0!important;
  border:0!important;
  border-top:1px solid var(--gp-border)!important;
  background:transparent!important;
  border-radius:0!important;
}
.gp-mockup-page .gp-summary-section .qi-stat:first-child{border-top:0!important;padding-top:0!important;}
.gp-mockup-page .gp-summary-section .qi-credit:last-child{padding-bottom:0!important;}
.gp-mockup-page .gp-summary-section .qi-label{
  flex:0 0 118px;
  padding-top:3px;
  color:var(--gp-muted)!important;
  font-size:10px!important;
  font-weight:500!important;
  line-height:1.4!important;
  letter-spacing:.06em!important;
  text-transform:uppercase;
}
.gp-mockup-page .gp-summary-section .qi-val{
  flex:1 1 auto;
  min-width:0;
  color:var(--gp-text)!important;
  font-size:12.5px!important;
  line-height:1.45!important;
  overflow:hidden;
}
.gp-mockup-page .gp-summary-section .qi-genre-pills{
  display:flex;
  align-items:center;
  gap:6px;
  width:max-content;
}

/* ── TOC: title outside, content inside ─────────────────────────────── */
.gp-mockup-page .gp-toc-section .toc-card{
  margin:0!important;
  padding:20px 22px!important;
  border:1px solid var(--gp-border)!important;
  border-radius:var(--gp-radius)!important;
  background:rgba(14,19,29,.62)!important;
  box-shadow:none!important;
}
.gp-mockup-page .gp-toc-section .toc-head{display:none!important;}
.gp-mockup-page .gp-toc-section .toc-list{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:8px 20px!important;
  align-items:start!important;
  max-height:none!important;
  overflow:visible!important;
  padding:0!important;
}
.gp-mockup-page .gp-toc-section .toc-group{
  min-width:0!important;
  display:flex!important;
  flex-direction:column!important;
  gap:8px!important;
}
.gp-mockup-page .toc-item{
  display:flex;
  align-items:flex-start;
  gap:9px;
  min-width:0;
  padding:0!important;
  color:var(--gp-secondary)!important;
  font-size:12.5px!important;
  line-height:1.45!important;
  border:0!important;
}
.gp-mockup-page .toc-item:hover{color:var(--gp-accent)!important;}
.gp-mockup-page .toc-n{
  flex:0 0 22px!important;
  min-width:22px!important;
  white-space:nowrap!important;
  padding-top:2px!important;
  color:var(--gp-accent)!important;
  font-family:ui-monospace,Menlo,Consolas,monospace!important;
  font-size:10.5px!important;
}
.gp-mockup-page .toc-label{min-width:0!important;overflow-wrap:break-word!important;}
.gp-mockup-page .toc-sub .toc-n{flex-basis:31px!important;min-width:31px!important;}
.gp-mockup-page .toc-sub2 .toc-n{flex-basis:42px!important;min-width:42px!important;}

/* ── actual rendered body sections ──────────────────────────────────── */
/* The live renderer keeps H2 + body in one .section. We visually pull H2
   outside the translucent panel without changing the renderer or its IDs. */
.gp-mockup-page .main-col > .section:not(#rc-section):not(.body-doc){
  position:relative;
  margin:64px 0 0!important;
  padding:20px 22px!important;
  border:1px solid var(--gp-border)!important;
  border-radius:var(--gp-radius)!important;
  background:rgba(14,19,29,.62)!important;
  box-shadow:none!important;
}
.gp-mockup-page .main-col > .hero-img + .section{
  margin-top:16px!important;
}
.gp-mockup-page .main-col > .section > .section-h:first-child,
.gp-mockup-page #rc-section > .section-h:first-child{
  position:absolute;
  left:0;
  top:-38px;
  display:flex;
  align-items:center;
  gap:9px;
  width:max-content;
  max-width:100%;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:var(--gp-text)!important;
  font-size:17px!important;
  font-weight:600!important;
  line-height:24px!important;
  letter-spacing:-.01em!important;
}
.gp-mockup-page .main-col > .section > .section-h:first-child::before,
.gp-mockup-page #rc-section > .section-h:first-child::before{
  content:"\f05a";
  display:inline-flex;
  width:24px;
  height:24px;
  flex:0 0 24px;
  align-items:center;
  justify-content:center;
  border-radius:7px;
  background:rgba(75,139,244,.14);
  color:var(--gp-accent);
  font-family:"Font Awesome 6 Free";
  font-size:11px;
  font-weight:900;
}
.gp-mockup-page .section-h#latest-update::before{content:"\f2f1"!important;}
.gp-mockup-page .section-h#release-date-and-status::before{content:"\f133"!important;background:rgba(62,207,142,.13)!important;color:var(--gp-green)!important;}
.gp-mockup-page .section-h#platforms-and-availability::before{content:"\f11b"!important;}
.gp-mockup-page .section-h#gameplay-overview::before{content:"\f11b"!important;background:rgba(124,92,255,.16)!important;color:#b9a6ff!important;}
.gp-mockup-page .section-h#story-setting-or-main-mode::before{content:"\f02d"!important;background:rgba(124,92,255,.16)!important;color:#b9a6ff!important;}
.gp-mockup-page .section-h#trailer-screenshots-and-media::before{content:"\f04b"!important;background:rgba(124,92,255,.16)!important;color:#b9a6ff!important;}
.gp-mockup-page .section-h#developer-and-publisher::before{content:"\f0c0"!important;}
.gp-mockup-page .section-h#download-and-availability::before{content:"\f019"!important;background:rgba(62,207,142,.13)!important;color:var(--gp-green)!important;}
.gp-mockup-page .section-h#system-device-requirements::before{content:"\f085"!important;background:rgba(255,176,32,.14)!important;color:var(--gp-amber)!important;}
.gp-mockup-page .section-h#faq::before,
.gp-mockup-page .faq-head::before{content:"\f059"!important;background:rgba(255,176,32,.14)!important;color:var(--gp-amber)!important;}
.gp-mockup-page #ratings-comments::before{content:"\f005"!important;background:rgba(255,176,32,.14)!important;color:var(--gp-amber)!important;}

.gp-mockup-page .section-p,
.gp-mockup-page .section-ul,
.gp-mockup-page .section-ol,
.gp-mockup-page .section-quote{
  color:var(--gp-secondary)!important;
  font-size:13.5px!important;
  line-height:1.72!important;
}
.gp-mockup-page .section-p{margin:0 0 11px!important;}
.gp-mockup-page .section-p:last-child{margin-bottom:0!important;}

/* Facts / ordinary info tables */
.gp-mockup-page .info-table{
  width:100%!important;
  margin:0!important;
  border:0!important;
  border-collapse:collapse!important;
  background:transparent!important;
}
.gp-mockup-page .info-table td{
  padding:10px 0!important;
  border:0!important;
  border-top:1px solid var(--gp-border)!important;
  background:transparent!important;
  color:var(--gp-secondary)!important;
  font-size:12.5px!important;
  line-height:1.55!important;
  vertical-align:top;
}
.gp-mockup-page .info-table tr:first-child td{border-top:0!important;padding-top:0!important;}
.gp-mockup-page .info-table tr:last-child td{padding-bottom:0!important;}
.gp-mockup-page .info-table td:first-child{
  width:190px;
  padding-right:16px!important;
  color:var(--gp-muted)!important;
  font-size:11.5px!important;
}
.gp-mockup-page .table-pill-row{gap:6px!important;}

/* Downloads */
.gp-mockup-page .download-grid{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:10px!important;
}
.gp-mockup-page .download-card{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  padding:12px 14px!important;
  border:1px solid var(--gp-border)!important;
  border-radius:var(--gp-radius-sm)!important;
  background:rgba(21,27,40,.7)!important;
  box-shadow:none!important;
  transition:border-color .15s ease,transform .15s ease;
}
.gp-mockup-page .download-card:hover{
  border-color:rgba(75,139,244,.5)!important;
  transform:translateY(-2px);
}
.gp-mockup-page .download-title{
  color:var(--gp-text)!important;
  font-size:12.5px!important;
  font-weight:600!important;
  line-height:1.4!important;
}
.gp-mockup-page .download-sub{
  margin-top:3px!important;
  color:var(--gp-muted)!important;
  font-size:10.5px!important;
}
.gp-mockup-page .download-action{
  flex:0 0 auto;
  padding:6px 12px!important;
  border:1px solid rgba(75,139,244,.45)!important;
  border-radius:20px!important;
  background:rgba(75,139,244,.22)!important;
  color:#6ea3f7!important;
  font-size:11px!important;
  font-weight:600!important;
}


/* Standalone Download and availability section. The explanatory prose sits on
   the page field; only the actionable store cards live inside the panel. */
.gp-mockup-page .gp-download-sec .gp-download-intro{
  margin:0 0 12px!important;
}
.gp-mockup-page .gp-download-sec .gp-download-intro .section-p{
  margin:0!important;
}
.gp-mockup-page .gp-download-panel{
  padding:14px!important;
  border:1px solid var(--gp-border)!important;
  border-radius:var(--gp-radius)!important;
  background:rgba(10,14,22,.56)!important;
}
.gp-mockup-page .gp-download-panel .download-main{
  min-width:0!important;
}
.gp-mockup-page .gp-download-panel .download-title{
  overflow-wrap:anywhere;
}
.gp-mockup-page .gp-download-panel .download-action{
  min-width:54px;
  text-align:center;
}

/* Prompt-authored semantic inline styling. These scoped rules intentionally
   use direct colours + !important so the mockup theme cannot flatten them
   back to body text. */
.gp-mockup-page .cg-cyan{color:#38BDF8!important;}
.gp-mockup-page .cg-green{color:#34D399!important;}
.gp-mockup-page .cg-amber{color:#FBBF24!important;}
.gp-mockup-page .cg-red{color:#F87171!important;}
.gp-mockup-page .cg-violet{color:#A78BFA!important;}
.gp-mockup-page .cg-lime{color:#A3E635!important;}
.gp-mockup-page .cg-text{color:#EAF0FF!important;}
.gp-mockup-page .cg-muted{color:#9AA7BD!important;}
.gp-mockup-page .cg-sm{font-size:.88em!important;}
.gp-mockup-page .cg-lg{font-size:1.13em!important;}
.gp-mockup-page .cg-xl{font-size:1.30em!important;font-weight:600!important;}

/* Requirements */
.gp-mockup-page .req-block{
  overflow:hidden!important;
  border:1px solid var(--gp-border)!important;
  border-radius:var(--gp-radius-sm)!important;
  background:rgba(8,11,18,.22)!important;
}
.gp-mockup-page .req-block-head{
  padding:11px 14px!important;
  border-bottom:1px solid var(--gp-border)!important;
  background:#141a26!important;
}
.gp-mockup-page .req-title{
  color:var(--gp-text)!important;
  font-size:12px!important;
  font-weight:600!important;
}
.gp-mockup-page .req-chip{
  padding:3px 9px!important;
  border:1px solid rgba(102,111,133,.4)!important;
  border-radius:6px!important;
  background:rgba(102,111,133,.28)!important;
  color:#b6c0d4!important;
  font-size:10px!important;
}
.gp-mockup-page .req-table{
  min-width:620px;
  width:100%;
  border-collapse:collapse;
  table-layout:fixed;
}
.gp-mockup-page .req-table th{
  padding:12px 14px 11px!important;
  border:0!important;
  border-bottom:1px solid var(--gp-border)!important;
  background:#141a26!important;
  color:var(--gp-muted)!important;
  font-size:10px!important;
  font-weight:700!important;
  letter-spacing:.07em!important;
  text-transform:uppercase;
}
.gp-mockup-page .req-table td{
  padding:12px 14px!important;
  border:0!important;
  border-top:1px solid var(--gp-border)!important;
  background:transparent!important;
  color:var(--gp-secondary)!important;
  font-size:12px!important;
  line-height:1.6!important;
}

/* Media */
.gp-mockup-page .profile-video-frame{
  overflow:hidden;
  border:1px solid var(--gp-border)!important;
  border-radius:12px!important;
  background:#080b12!important;
}
.gp-mockup-page .profile-video-meta{
  color:var(--gp-muted)!important;
  font-size:11px!important;
}
.gp-mockup-page .profile-media-subhead{
  color:var(--gp-muted)!important;
  font-size:10px!important;
  font-weight:600!important;
  letter-spacing:.07em!important;
  text-transform:uppercase;
}
.gp-mockup-page .profile-shot-scroller{
  display:flex!important;
  gap:10px!important;
  overflow-x:auto!important;
  padding-bottom:2px!important;
  scrollbar-width:none!important;
}
.gp-mockup-page .profile-shot-scroller::-webkit-scrollbar{display:none!important;}
.gp-mockup-page .profile-shot-card{
  flex:0 0 220px!important;
  width:220px!important;
  height:124px!important;
  border:1px solid var(--gp-border)!important;
  border-radius:10px!important;
  overflow:hidden;
  background:#141a28!important;
}
.gp-mockup-page .profile-shot-card img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  transition:transform .3s ease;
}
.gp-mockup-page .profile-shot-card:hover img{transform:scale(1.06);}

/* FAQ */
.gp-mockup-page .faq-item{
  border-bottom:1px solid var(--gp-border)!important;
}
.gp-mockup-page .faq-item:last-child{border-bottom:0!important;}
.gp-mockup-page .faq-q{
  padding:13px 0!important;
  color:var(--gp-text)!important;
  font-size:13.5px!important;
  font-weight:500!important;
  line-height:1.45!important;
  background:transparent!important;
}
.gp-mockup-page .faq-item:first-of-type .faq-q{padding-top:0!important;}
.gp-mockup-page .faq-q i{
  color:var(--gp-muted)!important;
  font-size:14px!important;
  transition:transform .2s ease;
}
.gp-mockup-page .faq-item.is-open .faq-q i{
  color:var(--gp-accent)!important;
  transform:rotate(180deg);
}
.gp-mockup-page .faq-a{
  color:var(--gp-secondary)!important;
  font-size:12.5px!important;
  line-height:1.7!important;
}

/* Sources: heading outside its translucent panel */
.gp-mockup-page .source-block{
  position:relative;
  margin:64px 0 0!important;
  padding:20px 22px!important;
  border:1px solid var(--gp-border)!important;
  border-radius:var(--gp-radius)!important;
  background:rgba(14,19,29,.62)!important;
  box-shadow:none!important;
}
.gp-mockup-page .source-block-head{
  position:absolute;
  left:0;
  top:-38px;
  display:flex!important;
  align-items:center;
  gap:9px;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:var(--gp-text)!important;
  font-size:17px!important;
  font-weight:600!important;
  line-height:24px!important;
  letter-spacing:-.01em!important;
}
.gp-mockup-page .source-block-head::before{
  content:"";
  width:24px;
  height:24px;
  flex:0 0 24px;
  border-radius:7px;
  background:rgba(75,139,244,.14);
}
.gp-mockup-page .source-block-head > i{
  position:absolute;
  left:6px;
  color:var(--gp-accent)!important;
  font-size:12px!important;
}
.gp-mockup-page .source-row{
  display:flex!important;
  align-items:flex-start!important;
  gap:10px!important;
  padding:8px 0!important;
  border:0!important;
  color:var(--gp-secondary)!important;
  font-size:12.5px!important;
}
.gp-mockup-page .source-row:first-of-type{padding-top:0!important;}
.gp-mockup-page .source-row:last-child{padding-bottom:0!important;}
.gp-mockup-page .source-dot{
  width:6px!important;
  height:6px!important;
  flex:0 0 6px!important;
  margin-top:6px!important;
  border-radius:50%!important;
  background:var(--gp-accent)!important;
}
.gp-mockup-page .source-link{color:var(--gp-secondary)!important;}
.gp-mockup-page .source-link:hover{color:var(--gp-accent)!important;text-decoration:underline!important;}

/* Ratings */
.gp-mockup-page #rc-section{
  position:relative;
  margin:64px 0 0!important;
  padding:20px 22px!important;
  border:1px solid var(--gp-border)!important;
  border-radius:var(--gp-radius)!important;
  background:rgba(14,19,29,.62)!important;
  box-shadow:none!important;
}
.gp-mockup-page .rc-summary-card{
  padding:0 0 14px!important;
  border:0!important;
  border-bottom:1px solid var(--gp-border)!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.gp-mockup-page .rc-avg-score{
  color:var(--gp-text)!important;
  font-size:32px!important;
  font-weight:800!important;
}
.gp-mockup-page .rc-count,
.gp-mockup-page .rc-bar-row,
.gp-mockup-page .rc-rate-hint,
.gp-mockup-page .rc-signin-note,
.gp-mockup-page .rc-char-count{
  color:var(--gp-muted)!important;
}
.gp-mockup-page .rc-bar{background:var(--gp-surface-3)!important;}
.gp-mockup-page .rc-bar-fill{background:linear-gradient(90deg,var(--gp-amber),#f8974a)!important;}
.gp-mockup-page .rc-rate-box{
  margin:0!important;
  padding:12px 0!important;
  border:0!important;
  border-bottom:1px solid var(--gp-border)!important;
  background:transparent!important;
}
.gp-mockup-page .rc-comment-box{
  margin:14px 0 0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
.gp-mockup-page .rc-textarea{
  border:1px solid var(--gp-border)!important;
  border-radius:9px!important;
  background:var(--gp-surface-2)!important;
  color:var(--gp-text)!important;
}

/* Related posts */
.gp-mockup-page .related-stack{margin-top:26px!important;}
.gp-mockup-page .related-panel{
  position:relative;
  margin-top:38px!important;
  padding:20px 22px!important;
  border:1px solid var(--gp-border)!important;
  border-radius:var(--gp-radius)!important;
  background:rgba(14,19,29,.62)!important;
  box-shadow:none!important;
}
.gp-mockup-page .related-panel-head{
  position:absolute;
  left:0;
  top:-38px;
  width:100%;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
.gp-mockup-page .related-title{
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--gp-text)!important;
  font-size:17px!important;
  font-weight:600!important;
}
.gp-mockup-page .related-title::before{
  content:"\f5fd";
  display:inline-flex;
  width:24px;
  height:24px;
  align-items:center;
  justify-content:center;
  border-radius:7px;
  background:rgba(62,207,142,.13);
  color:var(--gp-green);
  font-family:"Font Awesome 6 Free";
  font-size:11px;
  font-weight:900;
}
.gp-mockup-page .related-row{
  padding:10px 0!important;
  border-bottom:1px solid var(--gp-border)!important;
}
.gp-mockup-page .related-row:first-child{padding-top:0!important;}
.gp-mockup-page .related-row:last-child{padding-bottom:0!important;border-bottom:0!important;}
.gp-mockup-page .related-thumb{
  width:52px!important;
  height:52px!important;
  flex:0 0 52px!important;
  border-radius:9px!important;
}
.gp-mockup-page .related-item-title{
  color:var(--gp-text)!important;
  font-size:12.5px!important;
  font-weight:500!important;
  line-height:1.4!important;
}

/* ── sidebar: heading on field, content in translucent box ───────────── */
.gp-mockup-page .sidebar{
  position:sticky!important;
  top:92px!important;
  display:flex!important;
  flex-direction:column!important;
  gap:20px!important;
  min-width:0;
}
.gp-mockup-page .sb-card{
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.gp-mockup-page .sb-head{
  margin:0 0 10px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:var(--gp-muted)!important;
  font-size:11px!important;
  font-weight:700!important;
  line-height:1.3!important;
  letter-spacing:.07em!important;
  text-transform:uppercase;
}
.gp-mockup-page .sb-head-title{
  color:var(--gp-muted)!important;
  font:inherit!important;
}
.gp-mockup-page .sb-head-title i{display:none!important;}
.gp-mockup-page .sb-author-body,
.gp-mockup-page .sb-card > .sb-scroll,
.gp-mockup-page .sb-card > .tag-cloud{
  padding:20px 22px!important;
  border:1px solid var(--gp-border)!important;
  border-radius:var(--gp-radius)!important;
  background:rgba(14,19,29,.62)!important;
}
.gp-mockup-page .sb-author-body{
  display:flex!important;
  align-items:center!important;
  gap:12px!important;
}
.gp-mockup-page .sb-author-avatar{
  width:42px!important;
  height:42px!important;
  flex:0 0 42px!important;
  border-radius:50%!important;
  overflow:hidden;
  background:linear-gradient(135deg,var(--gp-accent),var(--gp-accent-2))!important;
}
.gp-mockup-page .sb-author-name{font-size:13px!important;font-weight:600!important;color:var(--gp-text)!important;}
.gp-mockup-page .sb-author-role{margin-top:2px!important;color:var(--gp-muted)!important;font-size:10.5px!important;}
.gp-mockup-page .sb-author-link{margin-top:4px!important;color:var(--gp-accent)!important;font-size:10.5px!important;}
.gp-mockup-page .sb-scroll{
  max-height:216px!important;
  overflow-y:auto!important;
  scrollbar-width:thin;
  scrollbar-color:var(--gp-surface-3) transparent;
}
.gp-mockup-page .sb-link{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:8px!important;
  padding:9px 0!important;
  border-bottom:1px solid var(--gp-border)!important;
  color:var(--gp-secondary)!important;
  font-size:12px!important;
  line-height:1.4!important;
}
.gp-mockup-page .sb-link:first-child{padding-top:0!important;}
.gp-mockup-page .sb-link:last-child{padding-bottom:0!important;border-bottom:0!important;}
.gp-mockup-page .sb-link:hover{color:var(--gp-accent)!important;}
.gp-mockup-page .sb-rel{
  padding:9px 0!important;
  border-bottom:1px solid var(--gp-border)!important;
}
.gp-mockup-page .sb-rel:first-child{padding-top:0!important;}
.gp-mockup-page .sb-rel:last-child{padding-bottom:0!important;border-bottom:0!important;}
.gp-mockup-page .sb-rel-thumb{
  width:44px!important;
  height:44px!important;
  flex:0 0 44px!important;
  border-radius:8px!important;
}
.gp-mockup-page .sb-rel-title{
  color:var(--gp-text)!important;
  font-size:11.5px!important;
  font-weight:500!important;
  line-height:1.35!important;
}
.gp-mockup-page .sb-similar .upcoming-row{
  padding:9px 0!important;
  border-bottom:1px solid var(--gp-border)!important;
}
.gp-mockup-page .sb-card > .tag-cloud{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:6px!important;
  max-height:112px;
  overflow:auto;
}
.gp-mockup-page .tag-more{
  display:block!important;
  margin-top:8px!important;
  color:var(--gp-accent)!important;
  font-size:10.5px!important;
}

/* Ads keep live inventory/logic; only presentation matches the mockup field. */
.gp-mockup-page .ad-slot{
  margin-top:26px!important;
}
.gp-mockup-page .ad-slot-label{
  color:var(--gp-muted)!important;
  font-size:9px!important;
  letter-spacing:.14em!important;
  text-transform:uppercase;
}
.gp-mockup-page .ad-slot-frame{
  max-width:100%;
  overflow:hidden;
  border:1px dashed var(--gp-border)!important;
  border-radius:var(--gp-radius-sm)!important;
  background:rgba(21,27,40,.45)!important;
}

/* ── footer ─────────────────────────────────────────────────────────── */
.gp-mockup-page .footer{
  margin-top:56px!important;
  border-top:1px solid var(--gp-border)!important;
  background:transparent!important;
}
.gp-mockup-page .footer-inner{
  width:100%;
  max-width:var(--gp-container)!important;
  margin:0 auto!important;
  padding:40px 32px 0!important;
}
.gp-mockup-page .footer-grid{
  grid-template-columns:1.6fr 1fr 1fr 1fr 1fr!important;
  gap:32px!important;
  padding-bottom:28px!important;
}
.gp-mockup-page .footer-logo{font-family:inherit!important;font-size:14.5px!important;}
.gp-mockup-page .footer-desc{color:var(--gp-muted)!important;font-size:12.5px!important;line-height:1.6!important;}
.gp-mockup-page .footer-col-title{color:var(--gp-text)!important;font-size:12px!important;}
.gp-mockup-page .footer-link{color:var(--gp-secondary)!important;font-size:12.5px!important;}
.gp-mockup-page .footer-link:hover{color:var(--gp-accent)!important;}
.gp-mockup-page .footer-bottom{
  padding:18px 0 16px!important;
  border-top:1px solid var(--gp-border)!important;
}
.gp-mockup-page .footer-copy,
.gp-mockup-page .disclaimer-text{color:var(--gp-muted)!important;}

/* ==========================================================================
   MOBILE · real production viewport, mockup spacing/design
   ========================================================================== */
@media (max-width:860px){
  .gp-mockup-page main{padding:12px 0 8px!important;}

  .gp-mockup-page .page-wrap{
    max-width:none!important;
    padding:0 12px!important;
  }

  .gp-mockup-page .post-layout{
    display:block!important;
  }

  .gp-mockup-page .breadcrumb{
    margin:2px 2px 10px!important;
    flex-wrap:nowrap!important;
    overflow-x:auto!important;
    white-space:nowrap!important;
    scrollbar-width:none;
    font-size:10.5px!important;
  }
  .gp-mockup-page .breadcrumb::-webkit-scrollbar{display:none;}

  .gp-profile-badges{margin-bottom:9px;}
  .gp-profile-badge{font-size:9.5px;padding:3px 8px;}

  .gp-mockup-page .art-title{
    margin-bottom:10px!important;
    font-size:20px!important;
    line-height:1.25!important;
  }

  .gp-mockup-page .art-subline{margin-bottom:10px!important;}
  .gp-mockup-page .art-subline .tax-link{
    font-size:9.5px!important;
    padding:3px 8px!important;
  }
  .gp-mockup-page .art-meta{
    gap:6px!important;
    margin-bottom:10px!important;
    font-size:10px!important;
  }
  .gp-mockup-page .art-meta i{font-size:10.5px!important;}
  .gp-mockup-page .plat-row{margin-bottom:12px!important;}

  .gp-mockup-page .hero-img{
    aspect-ratio:16/10!important;
    border-radius:var(--gp-radius)!important;
  }

  .gp-mockup-page .hero-img + .section{
    margin-top:14px!important;
  }
  .gp-mockup-page .hero-img + .section .section-p{
    font-size:12.5px!important;
    line-height:1.72!important;
  }

  .gp-mock-section{margin-top:20px!important;}
  .gp-mock-head{margin:0 2px 10px!important;}
  .gp-mock-head h2{
    font-size:13.5px!important;
    line-height:1.25!important;
  }
  .gp-mock-ic{
    width:22px;height:22px;flex-basis:22px;font-size:10.5px;
  }

  .gp-mockup-page .gp-summary-section .qi-card,
  .gp-mockup-page .gp-toc-section .toc-card{
    padding:12px!important;
  }
  .gp-mockup-page .gp-summary-section .qi-stat,
  .gp-mockup-page .gp-summary-section .qi-credit{
    gap:12px!important;
    padding:8px 0!important;
  }
  .gp-mockup-page .gp-summary-section .qi-label{
    flex-basis:92px!important;
    font-size:9.5px!important;
  }
  .gp-mockup-page .gp-summary-section .qi-val{
    font-size:11.5px!important;
  }
  .gp-mockup-page .gp-summary-section .qi-genre-pills{
    max-width:100%;
    overflow-x:auto;
    scrollbar-width:none;
  }

  .gp-mockup-page .gp-toc-section .toc-list{
    grid-template-columns:1fr!important;
    gap:8px!important;
  }
  .gp-mockup-page .toc-item{font-size:11.5px!important;}
  .gp-mockup-page .toc-n{font-size:10px!important;}

  .gp-mockup-page .main-col > .section:not(#rc-section):not(.body-doc),
  .gp-mockup-page #rc-section{
    margin-top:52px!important;
    padding:12px!important;
    border-radius:var(--gp-radius)!important;
  }
  .gp-mockup-page .main-col > .hero-img + .section{
    margin-top:14px!important;
    padding:0!important;
  }
  .gp-mockup-page .main-col > .section > .section-h:first-child,
  .gp-mockup-page #rc-section > .section-h:first-child{
    top:-34px!important;
    font-size:13.5px!important;
    line-height:22px!important;
  }
  .gp-mockup-page .main-col > .section > .section-h:first-child::before,
  .gp-mockup-page #rc-section > .section-h:first-child::before{
    width:22px;height:22px;flex-basis:22px;font-size:10px;
  }

  .gp-mockup-page .section-p,
  .gp-mockup-page .section-ul,
  .gp-mockup-page .section-ol,
  .gp-mockup-page .section-quote{
    font-size:12.5px!important;
  }

  .gp-mockup-page .info-table td{
    font-size:11.5px!important;
  }
  .gp-mockup-page .info-table td:first-child{
    width:120px!important;
    font-size:11px!important;
  }

  .gp-mockup-page .download-grid{grid-template-columns:1fr!important;}
  .gp-mockup-page .download-card{padding:11px 12px!important;}

  .gp-mockup-page .req-block{
    overflow-x:auto!important;
  }
  .gp-mockup-page .req-table{
    min-width:620px!important;
  }

  .gp-mockup-page .profile-shot-card{
    flex-basis:190px!important;
    width:190px!important;
    height:107px!important;
  }

  .gp-mockup-page .faq-q{font-size:12.5px!important;}
  .gp-mockup-page .faq-a{font-size:11.5px!important;}

  .gp-mockup-page .source-block{
    margin-top:52px!important;
    padding:12px!important;
  }
  .gp-mockup-page .source-block-head{
    top:-34px!important;
    font-size:13.5px!important;
    line-height:22px!important;
  }
  .gp-mockup-page .source-block-head::before{
    width:22px;height:22px;flex-basis:22px;
  }
  .gp-mockup-page .source-block-head > i{left:5px;font-size:11px!important;}
  .gp-mockup-page .source-row{font-size:11.5px!important;}

  .gp-mockup-page .related-panel{
    margin-top:34px!important;
    padding:12px!important;
  }
  .gp-mockup-page .related-panel-head{top:-34px!important;}
  .gp-mockup-page .related-title{font-size:13.5px!important;}
  .gp-mockup-page .related-title::before{
    width:22px;height:22px;font-size:10px;
  }
  .gp-mockup-page .related-item-title{font-size:11.5px!important;}

  .gp-mockup-page .sidebar{
    position:static!important;
    margin-top:22px!important;
    gap:20px!important;
  }
  .gp-mockup-page .sb-author-body,
  .gp-mockup-page .sb-card > .sb-scroll,
  .gp-mockup-page .sb-card > .tag-cloud{
    padding:12px!important;
  }

  .gp-mockup-page .footer{
    margin-top:34px!important;
  }
  .gp-mockup-page .footer-inner{
    padding:24px 12px calc(78px + env(safe-area-inset-bottom,0px))!important;
  }
  .gp-mockup-page .footer-grid{
    grid-template-columns:1fr 1fr!important;
    gap:20px 16px!important;
    padding-bottom:20px!important;
  }
  .gp-mockup-page .footer-grid > div:first-child{
    grid-column:1/-1!important;
  }
  .gp-mockup-page .footer-bottom{
    align-items:flex-start!important;
    flex-direction:column!important;
  }
}

@media (max-width:420px){
  .gp-mockup-page .page-wrap{padding:0 12px!important;}
  .gp-mockup-page .art-title{font-size:19px!important;}
  .gp-mockup-page .info-table td:first-child{width:106px!important;}
}

/* Reduced motion keeps live functionality accessible. */
@media (prefers-reduced-motion:reduce){
  .gp-mockup-page .art-tag-marquee-track{animation:none!important;}
  .gp-mockup-page .profile-shot-card img,
  .gp-mockup-page .download-card{transition:none!important;}
}

/* ==========================================================================
   GAME PROFILE MOCKUP v2 · SPACING + SINGLE-CONTAINER CORRECTION
   This block intentionally overrides v1's approximation layer.

   Target structure from 3-game-profile-post.html:
     section heading on field
     12px gap
     ONE translucent box
   ========================================================================== */

@media (min-width:861px){

  /* Mockup effective geometry is 8px main + 6px post-grid.
     The legacy Game Profile stylesheet still contributed 20px of post-layout
     padding in v1, which stacked with the new spacing. */
  .gp-mockup-page main{
    padding:8px 0 8px!important;
  }
  .gp-mockup-page .post-layout{
    padding:6px 0 0!important;
  }

  /* The opening is a lead paragraph ON THE FIELD in the mockup.
     It is not a section card and does not use the 64px heading offset. */
  .gp-mockup-page .gp-opening{
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
  }
  .gp-mockup-page .gp-opening > .section{
    position:static!important;
    display:block!important;
    margin:16px 0 0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:visible!important;
  }
  .gp-mockup-page .gp-opening > .section::before,
  .gp-mockup-page .gp-opening > .section::after{
    content:none!important;
    display:none!important;
  }
  .gp-mockup-page .gp-opening > .section > .section-h{
    display:none!important;
  }
  .gp-mockup-page .gp-opening > .section > .section-p{
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    color:var(--gp-secondary)!important;
    font-size:14px!important;
    line-height:1.72!important;
  }

  /* ----------------------------------------------------------------
     BODY SECTIONS
     Do NOT turn the renderer's .section itself into a visible card.
     The section is only a layout holder. One pseudo-panel starts below
     the heading and is the only general content container.
     ---------------------------------------------------------------- */
  .gp-mockup-page .gp-body{
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
  }

  .gp-mockup-page .gp-body > .section{
    position:relative!important;
    isolation:isolate;
    display:block!important;
    margin:26px 0 0!important;
    padding:0 22px 20px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:visible!important;
    scroll-margin-top:110px;
  }

  /* Exactly one translucent content box, beginning after the heading. */
  .gp-mockup-page .gp-body > .section::after{
    content:""!important;
    display:block!important;
    position:absolute!important;
    z-index:-1!important;
    left:0!important;
    right:0!important;
    top:36px!important;
    bottom:0!important;
    border:1px solid var(--gp-border)!important;
    border-radius:var(--gp-radius)!important;
    background:rgba(14,19,29,.62)!important;
    box-shadow:none!important;
    pointer-events:none!important;
  }

  /* Remove the v1 visible outer-card treatment completely. */
  .gp-mockup-page .gp-body > .section::before{
    content:none!important;
  }

  /* Heading is normal-flow content on the field, not absolutely positioned
     inside a second parent box. 24px heading + 12px visible gap + 20px
     inner panel padding = same rhythm as the mockup. */
  .gp-mockup-page .gp-body > .section > .section-h:first-child{
    position:relative!important;
    z-index:1!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    width:auto!important;
    max-width:none!important;
    margin:0 -22px 32px!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    color:var(--gp-text)!important;
    font-size:17px!important;
    font-weight:600!important;
    line-height:24px!important;
    letter-spacing:-.01em!important;
  }

  /* Renderer paragraph/list wrappers must not become another card. */
  .gp-mockup-page .gp-body > .section > .section-p,
  .gp-mockup-page .gp-body > .section > .section-ul,
  .gp-mockup-page .gp-body > .section > .section-ol,
  .gp-mockup-page .gp-body > .section > .section-quote{
    position:relative!important;
    z-index:1!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }

  /* Tables are content inside the one section panel, not another surface. */
  .gp-mockup-page .gp-body > .section > .info-table{
    position:relative!important;
    z-index:1!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }

  /* Keep intentional component boxes only:
     requirement blocks, download cards, video frame and screenshot cards.
     These exist inside the mockup's single section box as real controls/data. */
  .gp-mockup-page .gp-body > .section > .req-block,
  .gp-mockup-page .gp-body > .section > .download-grid,
  .gp-mockup-page .gp-body > .section > .profile-video-frame,
  .gp-mockup-page .gp-body > .section > .profile-shot-scroller,
  .gp-mockup-page .gp-body > .section > .profile-video-meta,
  .gp-mockup-page .gp-body > .section > .profile-media-subhead{
    position:relative!important;
    z-index:1!important;
  }

  /* First body section follows the TOC/ad naturally. No inherited 64px gap. */
  .gp-mockup-page .gp-toc-section + .gp-body{
    margin-top:0!important;
  }

  /* Summary and TOC already have the correct mockup structure:
     heading wrapper + ONE live box. Remove surviving legacy bottom margins
     so they do not create invisible extra rows between sections. */
  .gp-mockup-page .gp-summary-section .qi-card,
  .gp-mockup-page .gp-toc-section .toc-card{
    margin-bottom:0!important;
  }

  /* Sources / ratings / related each already own one real live container.
     Use the same 26px section rhythm instead of v1's larger 64px spacer. */
  .gp-mockup-page .source-block{
    margin-top:64px!important; /* 26 visible field gap + 24 heading + 14-ish separation */
  }
  .gp-mockup-page #rc-section{
    margin-top:64px!important;
  }
  .gp-mockup-page .related-stack{
    margin-top:26px!important;
  }

  /* Ad blocks should occupy only their configured unit, with mockup-style
     vertical rhythm. Do not let legacy margins stack with v1 margins. */
  .gp-mockup-page .main-col > .ad-slot,
  .gp-mockup-page .gp-body > .ad-slot{
    margin:22px auto 26px!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
}

/* Mobile gets the same structural correction, at mockup mobile spacing. */
@media (max-width:860px){
  .gp-mockup-page main{
    padding:8px 0 8px!important;
  }
  .gp-mockup-page .post-layout{
    padding-top:0!important;
  }

  .gp-mockup-page .gp-opening{
    margin:0!important;
    padding:0!important;
  }
  .gp-mockup-page .gp-opening > .section{
    position:static!important;
    margin:14px 0 0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }
  .gp-mockup-page .gp-opening > .section::before,
  .gp-mockup-page .gp-opening > .section::after{
    content:none!important;
    display:none!important;
  }
  .gp-mockup-page .gp-opening > .section > .section-h{
    display:none!important;
  }
  .gp-mockup-page .gp-opening > .section > .section-p{
    margin:0!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    font-size:12.5px!important;
    line-height:1.72!important;
  }

  .gp-mockup-page .gp-body{
    margin:0!important;
    padding:0!important;
  }
  .gp-mockup-page .gp-body > .section{
    position:relative!important;
    isolation:isolate;
    margin:20px 0 0!important;
    padding:0 12px 12px!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
    overflow:visible!important;
  }
  .gp-mockup-page .gp-body > .section::after{
    content:""!important;
    display:block!important;
    position:absolute!important;
    z-index:-1!important;
    left:0!important;
    right:0!important;
    top:32px!important;
    bottom:0!important;
    border:1px solid var(--gp-border)!important;
    border-radius:var(--gp-radius)!important;
    background:rgba(14,19,29,.62)!important;
    box-shadow:none!important;
  }
  .gp-mockup-page .gp-body > .section::before{
    content:none!important;
  }
  .gp-mockup-page .gp-body > .section > .section-h:first-child{
    position:relative!important;
    z-index:1!important;
    left:auto!important;
    top:auto!important;
    width:auto!important;
    margin:0 -12px 24px!important;
    padding:0!important;
    border:0!important;
    background:transparent!important;
    box-shadow:none!important;
    font-size:13.5px!important;
    line-height:22px!important;
  }
  .gp-mockup-page .gp-body > .section > .section-p,
  .gp-mockup-page .gp-body > .section > .section-ul,
  .gp-mockup-page .gp-body > .section > .section-ol,
  .gp-mockup-page .gp-body > .section > .section-quote,
  .gp-mockup-page .gp-body > .section > .info-table{
    position:relative!important;
    z-index:1!important;
    padding-left:0!important;
    padding-right:0!important;
    border-radius:0!important;
    background:transparent!important;
    box-shadow:none!important;
  }

  .gp-mockup-page .gp-summary-section .qi-card,
  .gp-mockup-page .gp-toc-section .toc-card{
    margin-bottom:0!important;
  }
}

/* ==========================================================================
   GAME PROFILE MOCKUP v3 · REAL SECTION STRUCTURE
   The renderer now emits the mockup's real heading + one-box structure.
   All v1/v2 pseudo-container and pseudo-icon approximations are disabled.
   ========================================================================== */

.gp-mockup-page .gp-sec{
  position:relative!important;
  display:block!important;
  isolation:auto!important;
  margin:26px 0 0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
  scroll-margin-top:110px;
}
.gp-mockup-page .gp-sec::before,
.gp-mockup-page .gp-sec::after{
  content:none!important;
  display:none!important;
}

.gp-mockup-page .gp-sec-head{
  display:flex!important;
  align-items:baseline!important;
  justify-content:space-between!important;
  gap:16px!important;
  margin:0 0 12px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
.gp-mockup-page .gp-sec-head .section-h{
  position:static!important;
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  width:auto!important;
  max-width:100%!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--gp-text)!important;
  font-family:inherit!important;
  font-size:17px!important;
  font-weight:600!important;
  line-height:24px!important;
  letter-spacing:-.01em!important;
}
.gp-mockup-page .gp-sec-head .section-h::before,
.gp-mockup-page .gp-sec-head .section-h::after{
  content:none!important;
  display:none!important;
}

.gp-mockup-page .gp-sec-ic{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:24px!important;
  height:24px!important;
  flex:0 0 24px!important;
  border-radius:7px!important;
}
.gp-mockup-page .gp-sec-svg{
  display:block!important;
  width:13px!important;
  height:13px!important;
  flex:0 0 13px!important;
  overflow:visible!important;
}
.gp-mockup-page .gp-ic-blue{background:rgba(75,139,244,.14)!important;color:var(--gp-accent)!important;}
.gp-mockup-page .gp-ic-green{background:rgba(62,207,142,.13)!important;color:var(--gp-green)!important;}
.gp-mockup-page .gp-ic-lime{background:rgba(158,222,74,.13)!important;color:#9ede4a!important;}
.gp-mockup-page .gp-ic-violet{background:rgba(124,92,255,.16)!important;color:#b9a6ff!important;}
.gp-mockup-page .gp-ic-amber{background:rgba(255,176,32,.14)!important;color:var(--gp-amber)!important;}

.gp-mockup-page .gp-sec-box{
  position:relative!important;
  display:block!important;
  width:100%!important;
  margin:0!important;
  padding:20px 22px!important;
  border:1px solid var(--gp-border)!important;
  border-radius:var(--gp-radius)!important;
  background:rgba(14,19,29,.62)!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.gp-mockup-page .gp-sec-box::before,
.gp-mockup-page .gp-sec-box::after{
  content:none!important;
  display:none!important;
}

.gp-mockup-page .gp-sec-box > .section-p,
.gp-mockup-page .gp-sec-box > .section-ul,
.gp-mockup-page .gp-sec-box > .section-ol,
.gp-mockup-page .gp-sec-box > .section-quote,
.gp-mockup-page .gp-sec-box > .info-table,
.gp-mockup-page .gp-sec-box > .table-pill-row,
.gp-mockup-page .gp-sec-box > .platform-link-row{
  position:relative!important;
  margin-left:0!important;
  margin-right:0!important;
  padding-left:0!important;
  padding-right:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

.gp-mockup-page .gp-sec-box > .info-table{
  width:100%!important;
  margin-bottom:0!important;
  border:0!important;
  border-collapse:collapse!important;
}
.gp-mockup-page .gp-sec-box > .info-table td{
  background:transparent!important;
}

.gp-mockup-page .gp-body > .gp-sec{
  padding:0!important;
}
.gp-mockup-page .gp-body > .gp-sec::before,
.gp-mockup-page .gp-body > .gp-sec::after{
  content:none!important;
  display:none!important;
}

.gp-mockup-page .gp-faq-sec,
.gp-mockup-page .gp-source-sec,
.gp-mockup-page .source-block.gp-sec{
  margin-top:26px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
.gp-mockup-page .gp-source-sec .source-block-head{
  display:none!important;
}

.gp-mockup-page .gp-mock-ic .gp-sec-svg{
  width:13px!important;
  height:13px!important;
}

.gp-mockup-page .gp-opening > .section{
  margin:16px 0 0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.gp-mockup-page .gp-opening > .section::before,
.gp-mockup-page .gp-opening > .section::after{
  content:none!important;
  display:none!important;
}

@media (max-width:860px){
  .gp-mockup-page .gp-sec{
    margin-top:20px!important;
  }
  .gp-mockup-page .gp-sec-head{
    margin-bottom:10px!important;
  }
  .gp-mockup-page .gp-sec-head .section-h{
    font-size:13.5px!important;
    line-height:22px!important;
  }
  .gp-mockup-page .gp-sec-ic{
    width:22px!important;
    height:22px!important;
    flex-basis:22px!important;
  }
  .gp-mockup-page .gp-sec-svg{
    width:12px!important;
    height:12px!important;
    flex-basis:12px!important;
  }
  .gp-mockup-page .gp-sec-box{
    padding:12px!important;
  }
  .gp-mockup-page .gp-opening > .section{
    margin-top:14px!important;
  }
}

/* ==========================================================================
   GAME PROFILE MOCKUP v4 · TRUE SINGLE-CONTAINER BODY
   No legacy `.section` / `.source-block` visual wrappers are used by
   Game Profile body sections anymore.

   Layout tree on screen:
       heading
       ONE .gp-sec-box
       heading
       ONE .gp-sec-box
   ========================================================================== */

/* The grouping elements have no layout box at all. This makes it impossible
   for an outer border/background/padding layer to appear around the heading
   and content box, regardless of legacy Game Profile CSS. */
.gp-mockup-page .gp-body,
.gp-mockup-page .gp-sec{
  display:contents!important;
}

/* Since .gp-sec has no visual box, section rhythm belongs to the heading. */
.gp-mockup-page .gp-sec-head{
  display:flex!important;
  align-items:baseline!important;
  justify-content:space-between!important;
  gap:16px!important;
  margin:26px 0 12px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  background:none!important;
  box-shadow:none!important;
}

/* Heading itself is always on the bare hex field. */
.gp-mockup-page .gp-sec-head .section-h{
  position:static!important;
  display:flex!important;
  align-items:center!important;
  gap:9px!important;
  width:auto!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  outline:0!important;
  background:none!important;
  box-shadow:none!important;
}

/* This is the ONLY general body-section surface. */
.gp-mockup-page .gp-sec-box{
  position:relative!important;
  display:block!important;
  box-sizing:border-box!important;
  width:100%!important;
  margin:0!important;
  padding:20px 22px!important;
  border:1px solid var(--gp-border)!important;
  border-radius:var(--gp-radius)!important;
  outline:0!important;
  background:rgba(14,19,29,.62)!important;
  box-shadow:none!important;
  overflow:visible!important;
}

/* Ordinary content never becomes another panel. */
.gp-mockup-page .gp-sec-box > .section-p,
.gp-mockup-page .gp-sec-box > .section-ul,
.gp-mockup-page .gp-sec-box > .section-ol,
.gp-mockup-page .gp-sec-box > .section-quote,
.gp-mockup-page .gp-sec-box > .info-table,
.gp-mockup-page .gp-sec-box > .table-pill-row,
.gp-mockup-page .gp-sec-box > .platform-link-row,
.gp-mockup-page .gp-sec-box > .source-row,
.gp-mockup-page .gp-sec-box > .faq-item{
  border-left:0!important;
  border-right:0!important;
  border-radius:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

/* Paragraphs specifically have zero inset box treatment. */
.gp-mockup-page .gp-sec-box > .section-p{
  padding:0!important;
  margin:0 0 11px!important;
}
.gp-mockup-page .gp-sec-box > .section-p:last-child{
  margin-bottom:0!important;
}

/* Tables retain only their row dividers, matching the mockup. */
.gp-mockup-page .gp-sec-box > .info-table{
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-collapse:collapse!important;
  background:transparent!important;
}

/* v1/v2/v3 outer-shell approximation rules can no longer draw anything. */
.gp-mockup-page .gp-sec::before,
.gp-mockup-page .gp-sec::after,
.gp-mockup-page .gp-body::before,
.gp-mockup-page .gp-body::after{
  content:none!important;
  display:none!important;
}

/* Sources use the exact same one-box system. There is no old source-block
   container in Game Profile markup anymore. */
.gp-mockup-page .gp-source-sec{
  display:contents!important;
}
.gp-mockup-page .gp-source-sec .gp-sec-box{
  padding:20px 22px!important;
}

/* Intentional components inside a section remain components, exactly like
   the mockup: requirements modules, download cards, player and screenshots.
   They are not general section wrappers. */

@media (max-width:860px){
  .gp-mockup-page .gp-sec-head{
    margin:20px 0 10px!important;
  }
  .gp-mockup-page .gp-sec-box{
    padding:12px!important;
  }
  .gp-mockup-page .gp-source-sec .gp-sec-box{
    padding:12px!important;
  }
}

/* ==========================================================================
   GAME PROFILE SIDEBAR v5 · COMPACT RHYTHM + FOUR-ROW SCROLL
   Hover behavior matches TOC: no filled rectangle, only text/title color.
   ========================================================================== */

@media (min-width:861px){

  .gp-mockup-page .sidebar{
    gap:14px!important;
  }

  .gp-mockup-page .sb-head{
    margin:0 0 6px!important;
    padding:0 1px!important;
    min-height:14px!important;
    font-size:10.5px!important;
    line-height:1.25!important;
  }

  .gp-mockup-page .sb-author-body,
  .gp-mockup-page .sb-card > .sb-scroll,
  .gp-mockup-page .sb-card > .tag-cloud{
    padding:10px 12px!important;
    border-radius:10px!important;
  }

  .gp-mockup-page .sb-author-body{
    gap:10px!important;
    min-height:0!important;
  }
  .gp-mockup-page .sb-author-avatar{
    width:38px!important;
    height:38px!important;
    flex:0 0 38px!important;
  }
  .gp-mockup-page .sb-author-name{
    font-size:12px!important;
    line-height:1.25!important;
  }
  .gp-mockup-page .sb-author-role{
    margin-top:1px!important;
    font-size:10px!important;
    line-height:1.25!important;
  }
  .gp-mockup-page .sb-author-link{
    margin-top:3px!important;
    font-size:10px!important;
    line-height:1.25!important;
  }

  /* Four rows are measured by JS from the actual rendered row heights.
     The max-height here is only a no-JS fallback. */
  .gp-mockup-page .sidebar .sb-scroll{
    max-height:184px!important;
    overflow-x:hidden!important;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    scrollbar-color:#30394d transparent;
  }
  .gp-mockup-page .sidebar .sb-scroll::-webkit-scrollbar{
    width:5px;
  }
  .gp-mockup-page .sidebar .sb-scroll::-webkit-scrollbar-track{
    background:transparent;
  }
  .gp-mockup-page .sidebar .sb-scroll::-webkit-scrollbar-thumb{
    border-radius:4px;
    background:#30394d;
  }
  .gp-mockup-page .sidebar .sb-scroll::-webkit-scrollbar-thumb:hover{
    background:#3b475f;
  }

  /* Official Links / Download */
  .gp-mockup-page .sidebar .sb-link{
    min-height:32px!important;
    padding:7px 2px!important;
    margin:0!important;
    border:0!important;
    border-bottom:1px solid var(--gp-border)!important;
    border-radius:0!important;
    outline:0!important;
    background:transparent!important;
    box-shadow:none!important;
    transform:none!important;
    color:var(--gp-secondary)!important;
    font-size:11.5px!important;
    line-height:1.35!important;
    transition:color .12s ease!important;
  }
  .gp-mockup-page .sidebar .sb-link:first-child{
    padding-top:2px!important;
  }
  .gp-mockup-page .sidebar .sb-link:last-child{
    padding-bottom:2px!important;
    border-bottom:0!important;
  }
  .gp-mockup-page .sidebar .sb-link:hover,
  .gp-mockup-page .sidebar .sb-link:focus-visible{
    background:transparent!important;
    box-shadow:none!important;
    transform:none!important;
    color:var(--gp-accent)!important;
  }

  /* Latest posts */
  .gp-mockup-page .sidebar .sb-rel{
    min-height:52px!important;
    padding:6px 2px!important;
    margin:0!important;
    gap:9px!important;
    border:0!important;
    border-bottom:1px solid var(--gp-border)!important;
    border-radius:0!important;
    outline:0!important;
    background:transparent!important;
    box-shadow:none!important;
    transform:none!important;
    transition:none!important;
  }
  .gp-mockup-page .sidebar .sb-rel:first-child{
    padding-top:2px!important;
  }
  .gp-mockup-page .sidebar .sb-rel:last-child{
    padding-bottom:2px!important;
    border-bottom:0!important;
  }
  .gp-mockup-page .sidebar .sb-rel:hover,
  .gp-mockup-page .sidebar .sb-rel:focus-visible{
    background:transparent!important;
    box-shadow:none!important;
    transform:none!important;
  }
  .gp-mockup-page .sidebar .sb-rel:hover .sb-rel-title,
  .gp-mockup-page .sidebar .sb-rel:focus-visible .sb-rel-title{
    color:var(--gp-accent)!important;
  }
  .gp-mockup-page .sidebar .sb-rel-thumb{
    width:40px!important;
    height:40px!important;
    flex:0 0 40px!important;
    border-radius:7px!important;
  }
  .gp-mockup-page .sidebar .sb-rel-title{
    font-size:11px!important;
    line-height:1.3!important;
  }
  .gp-mockup-page .sidebar .sb-rel-badge{
    margin-top:3px!important;
    padding:2px 5px!important;
    font-size:8.5px!important;
    line-height:1.2!important;
  }

  /* Explore Similar uses the live upcoming-row class. Remove its old filled
     hover so it behaves exactly like the TOC links. */
  .gp-mockup-page .sidebar .sb-similar .upcoming-row{
    min-height:32px!important;
    padding:7px 2px!important;
    margin:0!important;
    border:0!important;
    border-bottom:1px solid var(--gp-border)!important;
    border-radius:0!important;
    outline:0!important;
    background:transparent!important;
    box-shadow:none!important;
    transform:none!important;
    color:var(--gp-secondary)!important;
    transition:color .12s ease!important;
  }
  .gp-mockup-page .sidebar .sb-similar .upcoming-row:first-child{
    padding-top:2px!important;
  }
  .gp-mockup-page .sidebar .sb-similar .upcoming-row:last-child{
    padding-bottom:2px!important;
    border-bottom:0!important;
  }
  .gp-mockup-page .sidebar .sb-similar .upcoming-row:hover,
  .gp-mockup-page .sidebar .sb-similar .upcoming-row:focus-visible{
    background:transparent!important;
    box-shadow:none!important;
    transform:none!important;
    color:var(--gp-accent)!important;
  }
  .gp-mockup-page .sidebar .sb-similar .up-name{
    color:inherit!important;
    font-size:11.5px!important;
    line-height:1.35!important;
  }
  .gp-mockup-page .sidebar .sb-similar .up-confirmed{
    font-size:9px!important;
    line-height:1.2!important;
  }

  /* Tags: four visual pill rows, then scroll. */
  .gp-mockup-page .sb-card > .tag-cloud{
    gap:5px!important;
    max-height:104px;
    overflow-x:hidden;
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    scrollbar-color:#30394d transparent;
  }
  .gp-mockup-page .sb-card > .tag-cloud::-webkit-scrollbar{
    width:5px;
  }
  .gp-mockup-page .sb-card > .tag-cloud::-webkit-scrollbar-thumb{
    border-radius:4px;
    background:#30394d;
  }

  .gp-mockup-page .sidebar a:hover,
  .gp-mockup-page .sidebar a:focus-visible{
    text-decoration:none!important;
  }
}

/* Mobile sidebar uses the same compact rhythm once it stacks below the post. */
@media (max-width:860px){
  .gp-mockup-page .sidebar{
    gap:14px!important;
  }
  .gp-mockup-page .sb-head{
    margin-bottom:6px!important;
  }
  .gp-mockup-page .sb-author-body,
  .gp-mockup-page .sb-card > .sb-scroll,
  .gp-mockup-page .sb-card > .tag-cloud{
    padding:10px 12px!important;
    border-radius:10px!important;
  }
  .gp-mockup-page .sidebar .sb-link,
  .gp-mockup-page .sidebar .sb-similar .upcoming-row{
    padding:7px 2px!important;
    background:transparent!important;
    box-shadow:none!important;
    transform:none!important;
  }
  .gp-mockup-page .sidebar .sb-link:hover,
  .gp-mockup-page .sidebar .sb-similar .upcoming-row:hover{
    background:transparent!important;
    color:var(--gp-accent)!important;
  }
  .gp-mockup-page .sidebar .sb-rel{
    padding:6px 2px!important;
    background:transparent!important;
    box-shadow:none!important;
    transform:none!important;
  }
  .gp-mockup-page .sidebar .sb-rel:hover{
    background:transparent!important;
  }
  .gp-mockup-page .sidebar .sb-rel:hover .sb-rel-title{
    color:var(--gp-accent)!important;
  }
}

/* ==========================================================================
   GAME PROFILE SIDEBAR v6 · EXACT FOUR VISIBLE ROWS + TIGHTER RHYTHM
   ========================================================================== */

/* v5 used max-height:184px!important as a fallback. That rule overrode the
   exact height measured by JS and let five short rows remain visible.
   v6 deliberately makes the CSS fallback non-authoritative; JS writes the
   exact four-row height with inline !important after real row measurement. */
.gp-mockup-page .sidebar .sb-scroll{
  max-height:none!important;
}

@media (min-width:861px){
  .gp-mockup-page .sidebar{
    gap:10px!important;
  }

  .gp-mockup-page .sb-head{
    margin:0 0 4px!important;
    padding:0 1px!important;
    min-height:12px!important;
    font-size:10px!important;
    line-height:1.2!important;
  }

  .gp-mockup-page .sb-author-body,
  .gp-mockup-page .sb-card > .sb-scroll,
  .gp-mockup-page .sb-card > .tag-cloud{
    padding:8px 10px!important;
    border-radius:9px!important;
  }

  .gp-mockup-page .sb-author-body{
    gap:9px!important;
  }
  .gp-mockup-page .sb-author-avatar{
    width:36px!important;
    height:36px!important;
    flex:0 0 36px!important;
  }
  .gp-mockup-page .sb-author-name{
    font-size:11.5px!important;
    line-height:1.2!important;
  }
  .gp-mockup-page .sb-author-role,
  .gp-mockup-page .sb-author-link{
    font-size:9.5px!important;
    line-height:1.2!important;
  }
  .gp-mockup-page .sb-author-role{margin-top:1px!important;}
  .gp-mockup-page .sb-author-link{margin-top:2px!important;}

  .gp-mockup-page .sidebar .sb-scroll{
    overflow-x:hidden!important;
    overscroll-behavior:contain!important;
    scrollbar-width:thin!important;
    scrollbar-color:#30394d transparent!important;
  }
  .gp-mockup-page .sidebar .sb-scroll::-webkit-scrollbar{width:4px!important;}
  .gp-mockup-page .sidebar .sb-scroll::-webkit-scrollbar-track{background:transparent!important;}
  .gp-mockup-page .sidebar .sb-scroll::-webkit-scrollbar-thumb{
    background:#30394d!important;
    border-radius:4px!important;
  }

  /* Same visual interaction as the TOC: no rectangular hover fill. */
  .gp-mockup-page .sidebar .sb-link,
  .gp-mockup-page .sidebar .sb-similar .upcoming-row{
    min-height:29px!important;
    padding:5px 1px!important;
    margin:0!important;
    border-left:0!important;
    border-right:0!important;
    border-top:0!important;
    border-bottom:1px solid var(--gp-border)!important;
    border-radius:0!important;
    outline:0!important;
    background:transparent!important;
    background-image:none!important;
    box-shadow:none!important;
    transform:none!important;
    color:var(--gp-secondary)!important;
    font-size:11px!important;
    line-height:1.3!important;
    transition:color .12s ease!important;
  }
  .gp-mockup-page .sidebar .sb-link:hover,
  .gp-mockup-page .sidebar .sb-link:focus,
  .gp-mockup-page .sidebar .sb-link:focus-visible,
  .gp-mockup-page .sidebar .sb-link:active,
  .gp-mockup-page .sidebar .sb-similar .upcoming-row:hover,
  .gp-mockup-page .sidebar .sb-similar .upcoming-row:focus,
  .gp-mockup-page .sidebar .sb-similar .upcoming-row:focus-visible,
  .gp-mockup-page .sidebar .sb-similar .upcoming-row:active{
    background:transparent!important;
    background-image:none!important;
    box-shadow:none!important;
    transform:none!important;
    color:var(--gp-accent)!important;
  }
  .gp-mockup-page .sidebar .sb-link:first-child,
  .gp-mockup-page .sidebar .sb-similar .upcoming-row:first-child{padding-top:1px!important;}
  .gp-mockup-page .sidebar .sb-link:last-child,
  .gp-mockup-page .sidebar .sb-similar .upcoming-row:last-child{
    padding-bottom:1px!important;
    border-bottom:0!important;
  }
  .gp-mockup-page .sidebar .sb-similar .up-name{
    color:inherit!important;
    font-size:11px!important;
    line-height:1.3!important;
  }
  .gp-mockup-page .sidebar .sb-similar .up-confirmed{
    font-size:8.5px!important;
    line-height:1.15!important;
  }

  .gp-mockup-page .sidebar .sb-rel{
    min-height:46px!important;
    padding:5px 1px!important;
    margin:0!important;
    gap:8px!important;
    border-left:0!important;
    border-right:0!important;
    border-top:0!important;
    border-bottom:1px solid var(--gp-border)!important;
    border-radius:0!important;
    outline:0!important;
    background:transparent!important;
    background-image:none!important;
    box-shadow:none!important;
    transform:none!important;
  }
  .gp-mockup-page .sidebar .sb-rel:hover,
  .gp-mockup-page .sidebar .sb-rel:focus,
  .gp-mockup-page .sidebar .sb-rel:focus-visible,
  .gp-mockup-page .sidebar .sb-rel:active{
    background:transparent!important;
    background-image:none!important;
    box-shadow:none!important;
    transform:none!important;
  }
  .gp-mockup-page .sidebar .sb-rel:hover .sb-rel-title,
  .gp-mockup-page .sidebar .sb-rel:focus .sb-rel-title,
  .gp-mockup-page .sidebar .sb-rel:focus-visible .sb-rel-title{
    color:var(--gp-accent)!important;
  }
  .gp-mockup-page .sidebar .sb-rel:first-child{padding-top:1px!important;}
  .gp-mockup-page .sidebar .sb-rel:last-child{padding-bottom:1px!important;border-bottom:0!important;}
  .gp-mockup-page .sidebar .sb-rel-thumb{
    width:36px!important;
    height:36px!important;
    flex:0 0 36px!important;
    border-radius:7px!important;
  }
  .gp-mockup-page .sidebar .sb-rel-title{
    font-size:10.5px!important;
    line-height:1.25!important;
  }
  .gp-mockup-page .sidebar .sb-rel-badge{
    margin-top:2px!important;
    padding:1px 5px!important;
    font-size:8px!important;
    line-height:1.15!important;
  }

  .gp-mockup-page .sb-card > .tag-cloud{
    gap:4px!important;
    max-height:none!important;
    overflow-x:hidden!important;
    scrollbar-width:thin!important;
    scrollbar-color:#30394d transparent!important;
  }
  .gp-mockup-page .sb-card > .tag-cloud::-webkit-scrollbar{width:4px!important;}

  .gp-mockup-page .tag-more{
    margin-top:5px!important;
    font-size:9.5px!important;
  }
}

@media (max-width:860px){
  .gp-mockup-page .sidebar{gap:10px!important;}
  .gp-mockup-page .sb-head{margin-bottom:4px!important;}
  .gp-mockup-page .sb-author-body,
  .gp-mockup-page .sb-card > .sb-scroll,
  .gp-mockup-page .sb-card > .tag-cloud{
    padding:8px 10px!important;
    border-radius:9px!important;
  }
  .gp-mockup-page .sidebar .sb-link,
  .gp-mockup-page .sidebar .sb-similar .upcoming-row{
    padding:5px 1px!important;
    background:transparent!important;
    background-image:none!important;
    box-shadow:none!important;
    transform:none!important;
  }
  .gp-mockup-page .sidebar .sb-rel{
    padding:5px 1px!important;
    background:transparent!important;
    background-image:none!important;
    box-shadow:none!important;
    transform:none!important;
  }
}

/* ==========================================================================\n   GAME PROFILE v7 · HERO / FAQ / SOURCES / RATINGS POLISH\n   ========================================================================== */
.gp-mockup-page .hero-img{display:block!important;padding:0!important;margin-bottom:0!important;align-items:initial!important;}
.gp-mockup-page .hero-label{
  position:absolute!important;display:block!important;box-sizing:border-box!important;
  left:0!important;right:0!important;bottom:0!important;top:auto!important;width:auto!important;max-width:none!important;
  margin:0!important;padding:30px 16px 12px!important;gap:0!important;border:0!important;border-radius:0!important;outline:0!important;
  background:linear-gradient(0deg,rgba(6,8,13,.92),transparent)!important;box-shadow:none!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  color:rgba(255,255,255,.8)!important;font-size:11px!important;font-weight:700!important;line-height:1.35!important;letter-spacing:.08em!important;text-transform:uppercase!important;
}

.gp-mockup-page .gp-faq-sec .gp-sec-box{padding:20px 22px!important;overflow:hidden!important;}
.gp-mockup-page .gp-faq-sec .faq-item{
  display:block!important;margin:0!important;padding:0!important;border:0!important;border-bottom:1px solid var(--gp-border)!important;
  border-radius:0!important;outline:0!important;overflow:visible!important;background:transparent!important;box-shadow:none!important;
}
.gp-mockup-page .gp-faq-sec .faq-item:last-child{border-bottom:0!important;}
.gp-mockup-page .gp-faq-sec .faq-q{
  display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:12px!important;box-sizing:border-box!important;width:100%!important;
  margin:0!important;padding:13px 0!important;border:0!important;border-radius:0!important;outline:0!important;background:none!important;box-shadow:none!important;
  color:var(--gp-text)!important;font-family:inherit!important;font-size:13.5px!important;font-weight:600!important;line-height:1.45!important;text-align:left!important;cursor:pointer!important;
}
.gp-mockup-page .gp-faq-sec .faq-item:first-child .faq-q{padding-top:0!important;}
.gp-mockup-page .gp-faq-sec .faq-q>span{min-width:0;flex:1 1 auto;}
.gp-mockup-page .gp-faq-sec .faq-q i{flex:0 0 auto!important;margin-top:2px!important;color:var(--gp-muted)!important;font-size:14px!important;transition:transform .2s ease,color .2s ease!important;}
.gp-mockup-page .gp-faq-sec .faq-a{
  display:none!important;max-height:none!important;overflow:visible!important;margin:0!important;padding:0 28px 14px 0!important;border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;color:var(--gp-secondary)!important;font-size:12.5px!important;line-height:1.7!important;
}
.gp-mockup-page .gp-faq-sec .faq-item.is-open .faq-a{display:block!important;}
.gp-mockup-page .gp-faq-sec .faq-item.is-open .faq-q i{transform:rotate(180deg)!important;color:var(--gp-accent)!important;}

.gp-mockup-page .gp-source-sec .gp-sec-box{padding:14px 22px!important;}
.gp-mockup-page .gp-source-sec .source-row{
  display:flex!important;align-items:flex-start!important;gap:8px!important;min-height:0!important;margin:0!important;padding:5px 0!important;
  border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:var(--gp-secondary)!important;font-size:12px!important;line-height:1.45!important;
}
.gp-mockup-page .gp-source-sec .source-row:first-child{padding-top:0!important;}
.gp-mockup-page .gp-source-sec .source-row:last-child{padding-bottom:0!important;}
.gp-mockup-page .gp-source-sec .source-dot{width:5px!important;height:5px!important;flex:0 0 5px!important;margin-top:6px!important;}
.gp-mockup-page .gp-source-sec .source-link{min-width:0!important;color:var(--gp-secondary)!important;line-height:1.45!important;}

.gp-mockup-page .gp-ratings-sec{display:contents!important;}
.gp-mockup-page #rc-section.gp-sec-box{
  position:relative!important;display:block!important;box-sizing:border-box!important;width:100%!important;margin:0!important;padding:20px 22px!important;
  border:1px solid var(--gp-border)!important;border-radius:var(--gp-radius)!important;outline:0!important;background:rgba(14,19,29,.62)!important;box-shadow:none!important;overflow:visible!important;
}
.gp-mockup-page #rc-section .rc-summary-card{
  display:flex!important;align-items:center!important;gap:20px!important;margin:0 0 14px!important;padding:0 0 14px!important;border:0!important;border-bottom:1px solid var(--gp-border)!important;
  border-radius:0!important;background:transparent!important;box-shadow:none!important;
}
.gp-mockup-page #rc-section .rc-rate-box{
  display:flex!important;align-items:center!important;gap:14px!important;flex-wrap:wrap!important;margin:0 0 14px!important;padding:12px 0!important;border:0!important;border-bottom:1px solid var(--gp-border)!important;
  border-radius:0!important;background:transparent!important;box-shadow:none!important;
}
.gp-mockup-page #rc-section .rc-comment-box,.gp-mockup-page #rc-section .rc-comment-list{
  margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;
}
.gp-mockup-page #rc-section .rc-empty-comments{padding:14px 0 2px!important;}
.gp-mockup-page #rc-section::before,.gp-mockup-page #rc-section::after{content:none!important;display:none!important;}

@media(max-width:860px){
  .gp-mockup-page .hero-label{padding:24px 12px 10px!important;font-size:10px!important;}
  .gp-mockup-page .gp-faq-sec .gp-sec-box{padding:12px!important;}
  .gp-mockup-page .gp-faq-sec .faq-q{font-size:12.5px!important;padding:11px 0!important;}
  .gp-mockup-page .gp-faq-sec .faq-a{padding:0 24px 12px 0!important;font-size:11.5px!important;}
  .gp-mockup-page .gp-source-sec .gp-sec-box{padding:12px!important;}
  .gp-mockup-page .gp-source-sec .source-row{padding:4px 0!important;font-size:11.5px!important;}
  .gp-mockup-page #rc-section.gp-sec-box{padding:12px!important;}
  .gp-mockup-page #rc-section .rc-summary-card{flex-direction:column!important;align-items:stretch!important;gap:12px!important;}
}

/* ==========================================================================
   GAME PROFILE v8 · MOBILE CONTROL LAYER
   ========================================================================== */

@media (max-width:860px){

  /* One exact mobile gutter and no inherited desktop widths. */
  .gp-mockup-page main{
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding:8px 0!important;
    overflow:visible!important;
  }
  .gp-mockup-page .page-wrap{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    margin:0!important;
    padding-left:12px!important;
    padding-right:12px!important;
  }
  .gp-mockup-page .post-layout,
  .gp-mockup-page .main-col,
  .gp-mockup-page .sidebar,
  .gp-mockup-page .related-stack{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin-left:0!important;
    margin-right:0!important;
  }

  /* Every primary mobile box follows identical geometry. */
  .gp-mockup-page .gp-summary-section .qi-card,
  .gp-mockup-page .gp-toc-section .toc-card,
  .gp-mockup-page .gp-sec-box,
  .gp-mockup-page #rc-section.gp-sec-box,
  .gp-mockup-page .related-panel,
  .gp-mockup-page .sb-author-body,
  .gp-mockup-page .sb-card > .sb-scroll,
  .gp-mockup-page .sb-card > .tag-cloud{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin-left:0!important;
    margin-right:0!important;
  }

  .gp-mockup-page .gp-mock-section{margin-top:18px!important;}
  .gp-mockup-page .gp-sec-head{
    box-sizing:border-box!important;
    width:100%!important;
    margin:18px 0 8px!important;
  }
  .gp-mockup-page .gp-sec-head .section-h,
  .gp-mockup-page .gp-mock-head h2{
    font-size:13.5px!important;
    line-height:1.3!important;
  }
  .gp-mockup-page .gp-sec-box,
  .gp-mockup-page .gp-summary-section .qi-card,
  .gp-mockup-page .gp-toc-section .toc-card{
    padding:11px 12px!important;
    border-radius:10px!important;
  }
  .gp-mockup-page .section-p,
  .gp-mockup-page .section-ul,
  .gp-mockup-page .section-ol,
  .gp-mockup-page .section-quote{
    font-size:12px!important;
    line-height:1.65!important;
  }

  /* SYSTEM / DEVICE REQUIREMENTS:
     cancel the old <=760px table-to-card conversion. */
  .gp-mockup-page .req-block{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    margin:8px 0 0!important;
    padding:0!important;
    overflow:hidden!important;
    border-radius:9px!important;
    box-shadow:none!important;
  }
  .gp-mockup-page .req-block-head{
    display:flex!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:8px!important;
    width:100%!important;
    padding:8px 10px!important;
    margin:0!important;
  }
  .gp-mockup-page .req-title{
    min-width:0!important;
    font-size:11.5px!important;
    line-height:1.3!important;
  }
  .gp-mockup-page .req-chip{
    flex:0 0 auto!important;
    white-space:nowrap!important;
    padding:3px 8px!important;
    font-size:8.5px!important;
    line-height:1.25!important;
    border-radius:6px!important;
  }
  .gp-mockup-page .req-table-scroll{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-x:contain;
    scrollbar-width:thin;
    scrollbar-color:var(--gp-surface-3) transparent;
  }
  .gp-mockup-page .req-table-scroll::-webkit-scrollbar{height:6px;}
  .gp-mockup-page .req-table-scroll::-webkit-scrollbar-track{background:rgba(8,11,18,.28);}
  .gp-mockup-page .req-table-scroll::-webkit-scrollbar-thumb{
    border-radius:4px;
    background:var(--gp-surface-3);
  }

  .gp-mockup-page .req-table{
    display:table!important;
    width:100%!important;
    min-width:560px!important;
    max-width:none!important;
    margin:0!important;
    border-collapse:collapse!important;
    table-layout:fixed!important;
  }
  .gp-mockup-page .req-table thead{display:table-header-group!important;}
  .gp-mockup-page .req-table tbody{display:table-row-group!important;}
  .gp-mockup-page .req-table tr{
    display:table-row!important;
    width:auto!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:0!important;
    background:transparent!important;
  }
  .gp-mockup-page .req-table th,
  .gp-mockup-page .req-table td{
    display:table-cell!important;
    width:auto!important;
    margin:0!important;
    border-radius:0!important;
    vertical-align:top!important;
  }
  .gp-mockup-page .req-table th{
    padding:8px 10px!important;
    font-size:8.5px!important;
    line-height:1.3!important;
  }
  .gp-mockup-page .req-table td{
    padding:9px 10px!important;
    font-size:10.5px!important;
    line-height:1.5!important;
  }
  .gp-mockup-page .req-table th:first-child,
  .gp-mockup-page .req-table td:first-child{
    width:118px!important;
    padding-left:10px!important;
  }
  .gp-mockup-page .req-table th:last-child,
  .gp-mockup-page .req-table td:last-child{padding-right:10px!important;}
  .gp-mockup-page .req-table td:first-child{font-size:10px!important;}
  .gp-mockup-page .req-table td::before,
  .gp-mockup-page .req-table td:first-child::before{
    content:none!important;
    display:none!important;
  }
  .gp-mockup-page .req-note{
    box-sizing:border-box!important;
    width:100%!important;
    margin:8px 0 0!important;
    padding:8px 10px!important;
    font-size:10.5px!important;
    line-height:1.55!important;
    border-radius:0 8px 8px 0!important;
  }

  /* Related posts: controlled mobile row size. */
  .gp-mockup-page .related-stack{margin-top:18px!important;}
  .gp-mockup-page .related-panel{
    margin-top:32px!important;
    padding:8px 10px!important;
    border-radius:10px!important;
  }
  .gp-mockup-page .related-panel-head{top:-30px!important;}
  .gp-mockup-page .related-title{
    font-size:13px!important;
    line-height:1.25!important;
  }
  .gp-mockup-page .related-row{
    min-width:0!important;
    padding:6px 0!important;
    gap:8px!important;
  }
  .gp-mockup-page .related-thumb{
    width:42px!important;
    height:42px!important;
    flex:0 0 42px!important;
    border-radius:7px!important;
  }
  .gp-mockup-page .related-main{min-width:0!important;}
  .gp-mockup-page .related-item-title{
    font-size:11px!important;
    line-height:1.3!important;
  }

  /* Sidebar: predictable width and compact spacing. */
  .gp-mockup-page .sidebar{
    position:static!important;
    top:auto!important;
    margin-top:18px!important;
    padding:0!important;
    gap:10px!important;
  }
  .gp-mockup-page .sb-card{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
  }
  .gp-mockup-page .sb-head{
    box-sizing:border-box!important;
    width:100%!important;
    margin:0 0 5px!important;
    padding:0!important;
    font-size:9.5px!important;
    line-height:1.25!important;
  }
  .gp-mockup-page .sb-author-body,
  .gp-mockup-page .sb-card > .sb-scroll,
  .gp-mockup-page .sb-card > .tag-cloud{
    padding:8px 10px!important;
    border-radius:9px!important;
  }
  .gp-mockup-page .sb-author-body{gap:9px!important;}
  .gp-mockup-page .sb-author-avatar{
    width:36px!important;
    height:36px!important;
    flex:0 0 36px!important;
  }
  .gp-mockup-page .sb-author-name{font-size:11.5px!important;}
  .gp-mockup-page .sb-author-role,
  .gp-mockup-page .sb-author-link{font-size:9.5px!important;}

  .gp-mockup-page .sidebar .sb-link,
  .gp-mockup-page .sidebar .sb-similar .upcoming-row{
    box-sizing:border-box!important;
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    padding:6px 0!important;
    font-size:10.5px!important;
    line-height:1.3!important;
  }
  .gp-mockup-page .sidebar .sb-rel{
    box-sizing:border-box!important;
    width:100%!important;
    min-width:0!important;
    min-height:0!important;
    padding:5px 0!important;
    gap:8px!important;
  }
  .gp-mockup-page .sidebar .sb-rel-thumb{
    width:38px!important;
    height:38px!important;
    flex:0 0 38px!important;
  }
  .gp-mockup-page .sidebar .sb-rel-title{
    font-size:10.5px!important;
    line-height:1.25!important;
  }
  .gp-mockup-page .sb-card > .tag-cloud{gap:5px!important;}
  .gp-mockup-page .sb-card > .tag-cloud .tag-pill{
    font-size:9.5px!important;
    line-height:1.25!important;
    padding:4px 8px!important;
  }
  .gp-mockup-page .tag-more{
    margin-top:6px!important;
    font-size:9.5px!important;
  }

  /* Bound media and ratings to the same phone width. */
  .gp-mockup-page .profile-video-frame,
  .gp-mockup-page .profile-media-primary,
  .gp-mockup-page .profile-media-secondary,
  .gp-mockup-page .profile-shot-scroller,
  .gp-mockup-page #rc-section,
  .gp-mockup-page #rc-section .rc-summary-card,
  .gp-mockup-page #rc-section .rc-rate-box,
  .gp-mockup-page #rc-section .rc-comment-box,
  .gp-mockup-page #rc-section .rc-signin-row,
  .gp-mockup-page #rc-section .rc-user-row,
  .gp-mockup-page #rc-section .rc-comment-actions,
  .gp-mockup-page #rc-section .rc-textarea{
    box-sizing:border-box!important;
    width:100%!important;
    max-width:100%!important;
    min-width:0!important;
  }
}

@media (max-width:420px){
  .gp-mockup-page .page-wrap{
    padding-left:10px!important;
    padding-right:10px!important;
  }
  .gp-mockup-page .req-table{min-width:540px!important;}
}

/* ==========================================================================
   GAME PROFILE v9 · FAQ / SOURCES INTRO OUTSIDE BOX
   ========================================================================== */

.gp-mockup-page .gp-faq-sec .gp-sec-intro,
.gp-mockup-page .gp-source-sec .gp-sec-intro{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:78ch!important;
  margin:-2px 0 12px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

.gp-mockup-page .gp-faq-sec .gp-sec-intro .section-p,
.gp-mockup-page .gp-source-sec .gp-sec-intro .section-p{
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--gp-secondary)!important;
  font-size:13.5px!important;
  line-height:1.72!important;
}

/* FAQ starts closed. Only user interaction adds is-open. */
.gp-mockup-page .gp-faq-sec .faq-a{
  display:none!important;
}
.gp-mockup-page .gp-faq-sec .faq-item.is-open .faq-a{
  display:block!important;
}

@media(max-width:860px){
  .gp-mockup-page .gp-faq-sec .gp-sec-intro,
  .gp-mockup-page .gp-source-sec .gp-sec-intro{
    max-width:none!important;
    margin:-1px 2px 10px!important;
  }
  .gp-mockup-page .gp-faq-sec .gp-sec-intro .section-p,
  .gp-mockup-page .gp-source-sec .gp-sec-intro .section-p{
    font-size:12.5px!important;
    line-height:1.65!important;
  }
}

/* ==========================================================================
   GAME PROFILE v10 · MEDIA INTRO OUTSIDE + SHARED SCREENSHOT SWIPE
   ========================================================================== */

.gp-mockup-page .gp-media-sec .post-media-intro{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:78ch!important;
  margin:-2px 0 12px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
.gp-mockup-page .gp-media-sec .post-media-intro .section-p{
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:var(--gp-secondary)!important;
  font-size:13.5px!important;
  line-height:1.72!important;
}

.gp-mockup-page .profile-shot-scroller{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:100%!important;
  display:flex!important;
  gap:10px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior-x:contain!important;
  scroll-snap-type:x proximity!important;
  scroll-padding-inline:0!important;
  scrollbar-width:none!important;
  touch-action:pan-x pan-y!important;
  cursor:grab!important;
  user-select:none!important;
}
.gp-mockup-page .profile-shot-scroller::-webkit-scrollbar{display:none!important;}
.gp-mockup-page .profile-shot-scroller.is-dragging{cursor:grabbing!important;}
.gp-mockup-page .profile-shot-card{
  flex:0 0 210px!important;
  width:210px!important;
  height:118px!important;
  scroll-snap-align:start!important;
  user-select:none!important;
  -webkit-user-drag:none!important;
}
.gp-mockup-page .profile-shot-card img{
  pointer-events:none!important;
  user-select:none!important;
  -webkit-user-drag:none!important;
}

@media(max-width:860px){
  .gp-mockup-page .gp-media-sec .post-media-intro{
    max-width:none!important;
    margin:-1px 2px 10px!important;
  }
  .gp-mockup-page .gp-media-sec .post-media-intro .section-p{
    font-size:12.5px!important;
    line-height:1.65!important;
  }
  .gp-mockup-page .profile-shot-card{
    flex-basis:168px!important;
    width:168px!important;
    height:95px!important;
  }
}


/* v19: shared article Note callout.
   Keep the existing semantic blockquote output; only change its presentation. */
.gp-mockup-page .section-quote{
  position:relative!important;
  margin:12px 0 14px!important;
  padding:11px 14px 11px 39px!important;
  border:1px solid rgba(75,139,244,.22)!important;
  border-left:1px solid rgba(75,139,244,.22)!important;
  border-radius:8px!important;
  background:rgba(75,139,244,.055)!important;
  color:var(--gp-secondary)!important;
  font-size:12.5px!important;
  line-height:1.65!important;
  font-weight:400!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025)!important;
}
.gp-mockup-page .section-quote::before{
  content:"i";
  position:absolute;
  left:13px;
  top:12px;
  width:17px;
  height:17px;
  display:grid;
  place-items:center;
  border:1px solid rgba(75,139,244,.34);
  border-radius:50%;
  background:rgba(75,139,244,.12);
  color:var(--gp-accent);
  font:700 10px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.gp-mockup-page .section-quote strong{
  color:var(--gp-text)!important;
  font-weight:500!important;
}



/* ==========================================================================\n   GAME PROFILE v21 · SYSTEM / DEVICE REQUIREMENTS SPEC SHEET\n   Renderer contract: .gp-requirements-sec + .gp-req-*\n   ========================================================================== */
.gp-mockup-page .gp-requirements-sec .gp-req-intro{
  margin:0 0 14px!important;
  padding:0 2px!important;
  background:transparent!important;
  border:0!important;
}
.gp-mockup-page .gp-requirements-sec .gp-req-intro .section-p{
  margin:0 0 9px!important;
}
.gp-mockup-page .gp-requirements-sec .gp-req-intro .section-p:last-child{margin-bottom:0!important;}

.gp-mockup-page .gp-req-sheet{
  box-sizing:border-box!important;
  width:100%!important;
  padding:16px!important;
  border:1px solid var(--gp-border)!important;
  border-radius:14px!important;
  background:rgba(12,16,25,.72)!important;
  box-shadow:none!important;
  overflow:hidden!important;
}
.gp-mockup-page .gp-req-platform-tabs{
  display:flex!important;
  gap:8px!important;
  margin:0 0 16px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scrollbar-width:none!important;
  -webkit-overflow-scrolling:touch!important;
}
.gp-mockup-page .gp-req-platform-tabs::-webkit-scrollbar,
.gp-mockup-page .gp-req-tier-pills::-webkit-scrollbar{display:none!important;}
.gp-mockup-page .gp-req-platform-tab{
  flex:0 0 auto!important;
  appearance:none!important;
  border:1px solid var(--gp-border)!important;
  border-radius:999px!important;
  background:#141a26!important;
  color:var(--gp-muted)!important;
  padding:7px 13px!important;
  font:600 11.5px/1.2 Inter,system-ui,sans-serif!important;
  white-space:nowrap!important;
  cursor:pointer!important;
  transition:border-color .16s ease,background .16s ease,color .16s ease!important;
}
.gp-mockup-page .gp-req-platform-tab:hover,
.gp-mockup-page .gp-req-platform-tab:focus-visible{
  border-color:rgba(255,176,32,.48)!important;
  color:#d8deea!important;
  outline:none!important;
}
.gp-mockup-page .gp-req-platform-tab.is-active{
  border-color:rgba(255,176,32,.52)!important;
  background:rgba(255,176,32,.11)!important;
  color:#ffc65f!important;
}
.gp-mockup-page .gp-req-platform-tab.is-unavailable{opacity:.5!important;}
.gp-mockup-page .gp-req-platform-panel{display:none!important;}
.gp-mockup-page .gp-req-platform-panel.is-active{display:block!important;}

.gp-mockup-page .gp-req-panel-toolbar{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  margin:0 0 12px!important;
}
.gp-mockup-page .gp-req-panel-title{
  color:var(--gp-text)!important;
  font-size:12.5px!important;
  font-weight:700!important;
  line-height:1.3!important;
}
.gp-mockup-page .gp-req-compact-toggle{
  flex:0 0 auto!important;
  appearance:none!important;
  border:1px solid var(--gp-border)!important;
  border-radius:999px!important;
  background:#141a26!important;
  color:var(--gp-muted)!important;
  padding:6px 10px!important;
  font-size:9.5px!important;
  font-weight:700!important;
  line-height:1.15!important;
  letter-spacing:.03em!important;
  cursor:pointer!important;
}
.gp-mockup-page .gp-req-compact-toggle.is-active{
  border-color:rgba(255,176,32,.48)!important;
  background:rgba(255,176,32,.11)!important;
  color:#ffc65f!important;
}
.gp-mockup-page .gp-req-table-scroll{
  width:100%!important;
  max-width:100%!important;
  overflow-x:auto!important;
  border:1px solid var(--gp-border)!important;
  border-radius:10px!important;
  background:rgba(8,11,18,.24)!important;
  scrollbar-width:thin!important;
  scrollbar-color:var(--gp-surface-3) transparent!important;
}
.gp-mockup-page .gp-req-table{
  width:100%!important;
  min-width:560px!important;
  margin:0!important;
  border:0!important;
  border-collapse:collapse!important;
  table-layout:fixed!important;
}
.gp-mockup-page .gp-req-table th,
.gp-mockup-page .gp-req-table td{
  padding:11px 12px!important;
  border:0!important;
  border-right:1px solid var(--gp-border)!important;
  border-bottom:1px solid var(--gp-border)!important;
  text-align:left!important;
  vertical-align:top!important;
}
.gp-mockup-page .gp-req-table tr:last-child > *{border-bottom:0!important;}
.gp-mockup-page .gp-req-table tr > *:last-child{border-right:0!important;}
.gp-mockup-page .gp-req-table thead th{
  background:#141a26!important;
  color:var(--gp-muted)!important;
  font-size:9.5px!important;
  font-weight:700!important;
  line-height:1.35!important;
  letter-spacing:.045em!important;
  text-transform:uppercase!important;
}
.gp-mockup-page .gp-req-table tbody th{
  width:126px!important;
  background:#121722!important;
  color:var(--gp-text)!important;
  font-size:11px!important;
  font-weight:700!important;
  line-height:1.45!important;
}
.gp-mockup-page .gp-req-table tbody td{
  background:rgba(10,14,22,.42)!important;
  color:#c8d0df!important;
  font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,monospace!important;
  font-size:10.5px!important;
  line-height:1.55!important;
}
.gp-mockup-page .gp-req-table tbody tr:nth-child(odd) td{background:rgba(15,19,29,.68)!important;}
.gp-mockup-page .req-tier-col .req-tier-dot,
.gp-mockup-page .gp-req-tier-pill .req-tier-dot{
  display:inline-block!important;
  width:7px!important;
  height:7px!important;
  margin:0 6px 1px 0!important;
  border-radius:50%!important;
  background:currentColor!important;
}
.gp-mockup-page .req-tier-tone-1{color:#a8b0c2!important;}
.gp-mockup-page .req-tier-tone-2{color:#42d7c5!important;}
.gp-mockup-page .req-tier-tone-3{color:#818cf8!important;}
.gp-mockup-page .req-tier-tone-4{color:#c084fc!important;}
.gp-mockup-page .req-tier-tone-5{color:#fb923c!important;}
.gp-mockup-page .gp-req-platform-panel.is-compact .req-tier-extra{display:none!important;}

.gp-mockup-page .gp-req-unavailable{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  min-height:82px!important;
  padding:18px!important;
  border:1px dashed var(--gp-border)!important;
  border-radius:10px!important;
  background:rgba(8,11,18,.22)!important;
  color:var(--gp-muted)!important;
  font-size:11.5px!important;
  line-height:1.5!important;
  text-align:center!important;
}
.gp-mockup-page .gp-req-unavailable i{color:#ffc65f!important;font-size:15px!important;}

.gp-mockup-page .gp-req-mobile-tiers,
.gp-mockup-page .gp-req-generic-cards{display:none!important;}
.gp-mockup-page .gp-req-note-outside{margin-top:12px!important;}

@media (max-width:860px){
  .gp-mockup-page .gp-requirements-sec .gp-req-intro{
    margin-bottom:10px!important;
    padding:0!important;
  }
  .gp-mockup-page .gp-req-sheet{
    padding:11px!important;
    border-radius:10px!important;
  }
  .gp-mockup-page .gp-req-platform-tabs{margin-bottom:12px!important;gap:6px!important;}
  .gp-mockup-page .gp-req-platform-tab{
    padding:6px 10px!important;
    font-size:10.5px!important;
  }
  .gp-mockup-page .gp-req-panel-toolbar{margin-bottom:10px!important;}
  .gp-mockup-page .gp-req-panel-title{font-size:11.5px!important;}
  .gp-mockup-page .gp-req-compact-toggle{display:none!important;}
  .gp-mockup-page .gp-req-table-scroll{display:none!important;}
  .gp-mockup-page .gp-req-mobile-tiers,
  .gp-mockup-page .gp-req-generic-cards{display:block!important;}
  .gp-mockup-page .gp-req-tier-pills{
    display:flex!important;
    gap:6px!important;
    margin:0 0 10px!important;
    overflow-x:auto!important;
    scrollbar-width:none!important;
  }
  .gp-mockup-page .gp-req-tier-pill{
    flex:0 0 auto!important;
    appearance:none!important;
    padding:6px 10px!important;
    border:1px solid var(--gp-border)!important;
    border-radius:7px!important;
    background:#141a26!important;
    font-size:10px!important;
    font-weight:650!important;
    line-height:1.2!important;
    white-space:nowrap!important;
    cursor:pointer!important;
    opacity:.65!important;
  }
  .gp-mockup-page .gp-req-tier-pill.is-active{
    border-color:currentColor!important;
    opacity:1!important;
  }
  .gp-mockup-page .gp-req-spec-card{display:none!important;border:1px solid var(--gp-border)!important;border-radius:9px!important;overflow:hidden!important;}
  .gp-mockup-page .gp-req-spec-card.is-active{display:block!important;}
  .gp-mockup-page .gp-req-spec-row{
    display:grid!important;
    grid-template-columns:20px 74px minmax(0,1fr)!important;
    align-items:start!important;
    gap:8px!important;
    padding:9px 10px!important;
    border-bottom:1px solid var(--gp-border)!important;
    background:rgba(10,14,22,.42)!important;
  }
  .gp-mockup-page .gp-req-spec-row:nth-child(odd){background:rgba(15,19,29,.68)!important;}
  .gp-mockup-page .gp-req-spec-row:last-child{border-bottom:0!important;}
  .gp-mockup-page .gp-req-spec-icon{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:20px!important;
    height:20px!important;
    color:#7f8aa3!important;
    font-size:14px!important;
  }
  .gp-mockup-page .gp-req-spec-label{
    color:var(--gp-muted)!important;
    font-size:10px!important;
    font-weight:700!important;
    line-height:1.45!important;
  }
  .gp-mockup-page .gp-req-spec-value{
    color:#d5dbea!important;
    font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,monospace!important;
    font-size:9.8px!important;
    line-height:1.55!important;
    text-align:right!important;
    overflow-wrap:anywhere!important;
  }
  .gp-mockup-page .gp-req-generic-cards{display:grid!important;gap:8px!important;}
  .gp-mockup-page .gp-req-generic-card{
    padding:10px!important;
    border:1px solid var(--gp-border)!important;
    border-radius:9px!important;
    background:rgba(10,14,22,.42)!important;
  }
  .gp-mockup-page .gp-req-generic-title{
    margin:0 0 7px!important;
    color:var(--gp-text)!important;
    font-size:11px!important;
    font-weight:700!important;
  }
  .gp-mockup-page .gp-req-generic-card dl{margin:0!important;}
  .gp-mockup-page .gp-req-generic-card dl > div{
    display:grid!important;
    grid-template-columns:92px minmax(0,1fr)!important;
    gap:8px!important;
    padding:6px 0!important;
    border-top:1px solid rgba(35,43,58,.72)!important;
  }
  .gp-mockup-page .gp-req-generic-card dt{
    color:var(--gp-muted)!important;
    font-size:9.5px!important;
    font-weight:700!important;
  }
  .gp-mockup-page .gp-req-generic-card dd{
    margin:0!important;
    color:#d5dbea!important;
    font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,monospace!important;
    font-size:9.6px!important;
    line-height:1.5!important;
    overflow-wrap:anywhere!important;
  }
}


@media (max-width:700px){
  .gp-mockup-page .gp-download-panel{padding:10px!important;}
}

/* ========================================================================== 
   v25 · SHARED MEDIA CLEANUP
   Trailer/screenshots already have intentional component surfaces. The media
   section itself stays on the page field so there is never a dark box behind
   the player/gallery, and the authored intro can use the full content width.
   ========================================================================== */
.gp-mockup-page .gp-media-sec .post-media-intro{
  width:100%!important;
  max-width:none!important;
  margin:-2px 0 14px!important;
}
/* Backward-compatible flattening for pages generated before the v25 renderer. */
.gp-mockup-page .gp-media-sec > .gp-sec-box{
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.gp-mockup-page .gp-media-sec > .gp-sec-box::before,
.gp-mockup-page .gp-media-sec > .gp-sec-box::after{
  content:none!important;
  display:none!important;
}
.gp-mockup-page .gp-media-sec .profile-media-primary,
.gp-mockup-page .gp-media-sec .profile-media-secondary,
.gp-mockup-page .gp-media-sec .profile-video-frame,
.gp-mockup-page .gp-media-sec .profile-shot-scroller{
  width:100%!important;
  max-width:100%!important;
}

@media(max-width:860px){
  .gp-mockup-page .gp-media-sec .post-media-intro{
    max-width:none!important;
    margin:-1px 0 11px!important;
  }
}

/* ========================================================================== 
   v26 · DOWNLOAD + REQUIREMENTS SINGLE-SURFACE FIX
   The actionable cards/table are already intentional components. Do not draw
   another dark panel behind them. Intro prose remains on the page field.
   ========================================================================== */
.gp-mockup-page .gp-download-panel{
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.gp-mockup-page .gp-download-panel::before,
.gp-mockup-page .gp-download-panel::after{
  content:none!important;
  display:none!important;
}

.gp-mockup-page .gp-req-sheet{
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.gp-mockup-page .gp-req-sheet::before,
.gp-mockup-page .gp-req-sheet::after{
  content:none!important;
  display:none!important;
}

@media(max-width:860px){
  .gp-mockup-page .gp-download-panel,
  .gp-mockup-page .gp-req-sheet{
    padding:0!important;
    border-radius:0!important;
  }
}

/* ========================================================================== 
   v34 · FULL-WIDTH ARTICLE PARAGRAPHS
   ========================================================================== */
/* Game Profile inherited several 78ch intro caps from the older mockup. Keep
   component widths intact, but let normal authored paragraphs use the full
   article/section width. */
.gp-mockup-page .section-p,
.gp-mockup-page .gp-sec-intro,
.gp-mockup-page .post-media-intro{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:none!important;
}