/* ===== 00-cursor.css ===== */
/* 00 · CURSOR — touch-device guard for the template's custom mouse cursor (index.html 79-80: .mouseCursor.cursor-outer/.cursor-inner;
   main.js 1259-1303 makes both visible at init and moves them on mousemove). On a device with no mouse there is never a mousemove,
   so the 10px brand dot and the 30px ring stay parked at the top-left corner of the viewport for the whole visit (verified at 390:
   .cursor-inner visible at translate(0,0) over the header). Hide them only where there is no hover-capable pointer; desktop keeps the
   template cursor exactly as shipped. */
@media (hover: none), (pointer: coarse) {
  .mouseCursor { display: none !important; }
}


/* ===== 00-promo.css ===== */
/* 00 · PROMO BAR — PrivateCheatz overrides on top of main-pc.css (index-5 .header-top-section, rules 7148-7220).
   Every selector starts with the section root (.pc-promo). main-pc.css is untouched.
   The template keeps .header-section-5 position:absolute;top:0;z-index:9999 (7148-7154) — we keep that: the bar overlays
   the very top of the page exactly like the template's own top bar and scrolls away with the document, while
   #header-sticky (also absolute, main-pc.css 7007-7013) is pushed down by the bar height until main.js makes it .sticky. */

/* 1. the bar: brand orange gradient like live, white text, ~40px, centred, no divider line (7186-7192 had padding 20px 0 + border) */
.pc-promo.header-section-5 .header-top-section{
  background:linear-gradient(90deg,#d14d41,#f66e61);
  color:#fff;
}
.pc-promo.header-section-5 .header-top-wrapper{
  justify-content:center;
  min-height:40px;
  padding:4px 0;
  border-bottom:0;
}
.pc-promo.header-section-5 .header-top-wrapper .top-left{
  justify-content:center;
  flex-wrap:wrap;
  gap:6px 25px;            /* template .top-left gap (7196) */
}

/* 2. template typography kept where it fits a 40px bar: Chakra Petch (body 113), weight 600 (body 115), white (7198-7200);
      defused: body{text-transform:uppercase;line-height:28px} (122/116) — the live promo text is already written in the case it
      should show, keep it verbatim — and the 16px size (a slim bar reads at 13px). p{margin:0} (278) restated. */
.pc-promo.header-section-5 .header-top-wrapper .top-left p{
  color:#fff;
  margin:0;
  font-size:13px;
  line-height:1.3;
  font-weight:600;
  letter-spacing:.02em;
  text-transform:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.pc-promo .pc-promo-label{font-weight:700}

/* 3. "10% OFF" badge — white pill, dark-orange text (gradient's own dark stop, no red) */
.pc-promo .pc-promo-badge{
  display:inline-block;
  padding:1px 8px;
  border-radius:2px;
  background:#fff;
  color:#b8382c; /* 5.8:1 on white (was #d14d41 = 4.3:1, axe serious at 11px) */
  font-weight:700;
  font-size:11px;
  letter-spacing:.06em;
  line-height:18px;
}

/* 4. the clickable "Code: NIGHTOPS" box — <button> reset by the template (button{border:none;background:transparent;padding:0} 131-135),
      so every visual is set here. Dashed outline reads as "coupon", click copies, .copied swaps the icon to a check. */
.pc-promo .pc-promo-code{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:3px 10px 3px 12px;
  border:1px dashed rgba(255,255,255,.75);
  border-radius:2px;
  background:rgba(0,0,0,.18);
  color:#fff;
  font:inherit;
  font-size:13px;
  font-weight:600;
  line-height:1.3;
  letter-spacing:.02em;
  text-transform:none;
  cursor:pointer;
  transition:background-color .25s ease,border-color .25s ease;
}
.pc-promo .pc-promo-code:hover,
.pc-promo .pc-promo-code:focus-visible{background:rgba(0,0,0,.3);border-color:#fff;outline:none}
.pc-promo .pc-promo-code:focus-visible{box-shadow:0 0 0 2px rgba(255,255,255,.6)}
.pc-promo .pc-promo-code-label{font-weight:600;opacity:.9}
.pc-promo .pc-promo-code-value{font-weight:700;letter-spacing:.08em}
.pc-promo .pc-promo-code i{font-size:12px;line-height:1;opacity:.9}
.pc-promo .pc-promo-code.copied{border-style:solid;border-color:#fff;background:rgba(0,0,0,.32)}
/* fa-copy (\f0c5, regular/400) -> fa-check (\f00c, solid/900 only in FA Free) */
.pc-promo .pc-promo-code.copied i::before{content:"\f00c";font-weight:900}
/* screen-reader-only live region for the "copied" announcement */
.pc-promo .pc-promo-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* 5. countdown digits — plain spans (NOT the template's h2/h3 timer tiles), tabular so the bar doesn't jitter each second */
.pc-promo .pc-promo-timer{font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.04em;min-width:3.2em;text-align:left}

/* 6. the template hides its top bar ≤1199px (7181-7185) — ours stays; ≤575px only the code box remains (label+badge+timer go) */
@media (max-width:1199px){
  .pc-promo.header-section-5 .header-top-section{display:block}
}
@media (max-width:575px){
  /* selector mirrors the display:inline-flex rule above (0,5,1) so it wins on specificity */
  .pc-promo.header-section-5 .header-top-wrapper .top-left p.pc-promo-label,
  .pc-promo.header-section-5 .header-top-wrapper .top-left p.pc-promo-expires{display:none}
  .pc-promo.header-section-5 .header-top-wrapper{min-height:40px;padding:4px 0}
}

/* 7. layout hand-off to the neighbours (selectors still start with .pc-promo; both targets are body-level siblings).
      a) #header-sticky is position:absolute;top:0 (main-pc.css 7007-7013) → sit it under the 40px bar until it goes .sticky
         (.sticky{top:0 !important} 7229-7240 wins on scroll, and :not(.sticky) drops out anyway).
      b) the hero reserves room for the overlay header only (pc-hero.css 17 + 105) → add the bar height.
         The assembler/hero owner may move (b) into pc-hero.css; values mirror pc-hero.css exactly, +40px. */
.pc-promo ~ #header-sticky.header-1:not(.sticky){top:40px}
.pc-promo ~ #smooth-wrapper .pch-hero{padding-top:calc(clamp(84px,10vh,112px) + 40px)}
@media (min-width:861px){
  .pc-promo ~ #smooth-wrapper .pch-hero{padding-top:calc(clamp(124px,15vh,156px) + 40px)}
}


/* ===== 01-extras.css ===== */
/* 01 · ABOUT — overrides scoped to the section root (.gt-about-section.pc-extras). main-pc.css is never edited.
   Every rule here either (a) restores a template look that main-pc.css hangs on a heading tag we may not use (h2.text, h6.subtitle, h2 title, h5 box title),
   (b) re-scopes the home-7 list/button rules that main-pc.css writes under .gt-about-wrapper-7, or (c) fits real photos / glyphs into slots the template sized for its placeholders. */

/* (a) watermark: main-pc.css 502-519 styles .text (position/rotate/128px/stroke/strokeColorChange) but the font comes from the h2 base (146-158, 201-205) → same props on the div */
.gt-about-section.pc-extras .text{font-family:"Chakra Petch",sans-serif;font-weight:700;line-height:112%;text-transform:uppercase;white-space:nowrap;margin:0;padding:0;pointer-events:none;user-select:none}

/* (a) eyebrow: .gt-section-title h6 (11466-11487) + h6 base (151-158, 265-268) on the span, incl. the h1-h6 transition (156). SplitText (main.js 557-591) wraps the chars in divs inside the span; the span itself (inline-block, position:relative) still owns the ::after underline */
.gt-about-section.pc-extras .gt-section-title .subtitle{display:inline-block;position:relative;font-family:"Chakra Petch",sans-serif;font-size:16px;font-weight:700;letter-spacing:-0.32px;line-height:1;color:var(--gt-white);margin:0 0 25px;padding:0;text-transform:uppercase;transition:all .4s ease-in-out}
.gt-about-section.pc-extras .gt-section-title .subtitle::after{position:absolute;content:"";background:linear-gradient(90deg,#f66e61 0%,#00130B 100%);width:116px;height:1px;left:0;bottom:-8px}

/* (a) title: the live H3 at the template's h2 scale (.gt-section-title h2 11488-11490, h2 base 201-235) — 50px keeps "WHY GAMERS CHOOSE" on one line in the col-lg-5 column;
   the <span> line takes the theme colour exactly like .gt-section-title h2 span (11491-11521) */
.gt-about-section.pc-extras .gt-section-title h3{color:var(--gt-white);font-size:50px;font-weight:700;line-height:112%;margin:0;padding:0}
.gt-about-section.pc-extras .gt-section-title h3 span{color:var(--gt-theme);font-size:inherit;font-weight:700;line-height:112%}
@media (max-width:1399px){.gt-about-section.pc-extras .gt-section-title h3{font-size:40px}}
@media (max-width:1199px){.gt-about-section.pc-extras .gt-section-title h3{font-size:32px}}   /* 992-1199: col-lg-5 content is 376px → "WHY GAMERS CHOOSE" needs ≤34px to stay on one line (measured) */
@media (max-width:991px){.gt-about-section.pc-extras .gt-section-title h3{font-size:40px}}
@media (max-width:767px){.gt-about-section.pc-extras .gt-section-title h3{font-size:35px}}
@media (max-width:575px){.gt-about-section.pc-extras .gt-section-title h3{font-size:30px}}
@media (max-width:470px){.gt-about-section.pc-extras .gt-section-title h3{font-size:25px}}

/* (b) bullets + button: home-7 rules (1058-1082) re-scoped to this column; margins tightened to the section's 30px rhythm (.gt-about-box-wrapper 290-291) */
.gt-about-section.pc-extras .gt-about-content .gt-about-list{margin-top:30px}
.gt-about-section.pc-extras .gt-about-content .gt-about-list li{font-size:14px;font-weight:600;color:var(--gt-header);font-family:"Chakra Petch",sans-serif}
.gt-about-section.pc-extras .gt-about-content .gt-about-list li:not(:last-child){margin-bottom:14px}
.gt-about-section.pc-extras .gt-about-content .gt-about-list li i{color:var(--gt-theme);margin-right:8px}
.gt-about-section.pc-extras .gt-about-content .gt-about-button{margin-top:30px}

/* (c) feature grid (layout stability only — colours/type/spacing untouched):
   · equal-width boxes per row: the template sizes them by content, so the row-1 / row-2 vertical dividers drift by a few px
   · equal-height boxes per row: the template's align-items:center (322-327) leaves the .bg-color blocks ragged between 768-1399px */
.gt-about-section.pc-extras .gt-about-content .gt-about-box-wrapper .gt-about-box-item{align-items:stretch}
.gt-about-section.pc-extras .gt-about-content .gt-about-box-wrapper .gt-about-box-item .gt-about-box{flex:1 1 0;min-width:0}
/* ≤1199: template switches .gt-about-box to flex-wrap so the icon stacks above the text (339-343) — make it deterministic (otherwise it depends on each caption's length) */
@media (max-width:1199px){.gt-about-section.pc-extras .gt-about-content .gt-about-box-wrapper .gt-about-box-item .gt-about-box .content{flex:0 0 100%}}
/* ≤470: template wraps .gt-about-box-item so the boxes stack (328-332) — keep that single column (the flex-basis 0 above would hold them 2-up) */
@media (max-width:470px){.gt-about-section.pc-extras .gt-about-content .gt-about-box-wrapper .gt-about-box-item .gt-about-box{flex:1 1 100%}}

/* (c) icon slot: template expects a 50×50 <img> with transform:scale(1.1) (349-352) → same footprint, FA glyph in brand orange */
.gt-about-section.pc-extras .gt-about-box .icon{flex:0 0 auto}
.gt-about-section.pc-extras .gt-about-box .icon i{display:flex;align-items:center;justify-content:center;width:50px;height:50px;font-size:38px;line-height:1;color:var(--gt-theme);transform:scale(1.1);transition:all .4s ease-in-out}

/* (a) box title: strong.gt-box-title stands in for the template <h5> — mirrors h1-h6 base (146-158) + h5 (259-263) + .content h5 (359-372) */
.gt-about-section.pc-extras .gt-about-box .content .gt-box-title{display:block;font-family:"Chakra Petch",sans-serif;font-size:20px;font-weight:700;line-height:150%;color:var(--gt-white);text-transform:uppercase;margin:0 0 5px;padding:0;transition:all .4s ease-in-out}
@media (max-width:1199px){.gt-about-section.pc-extras .gt-about-box .content .gt-box-title{font-size:18px}}
@media (max-width:470px){.gt-about-section.pc-extras .gt-about-box .content .gt-box-title{font-size:14px}}

/* (c) real key-art in the image slots: the template's img{width:100%;height:100%} (391-394, 410-413) was sized for its placeholder PNGs → cover-fit, keep each character's head in frame when the slot goes landscape (≤1199: 340/350px tall) */
.gt-about-section.pc-extras .gt-about-image img{display:block;object-fit:cover;object-position:50% 18%}
.gt-about-section.pc-extras .gt-about-image.gt-about-image-2 img{object-position:50% 22%}

/* (c) the left column (title + quote + bullets + boxes + button) is taller than the template's 556px image slots → centre the two columns on desktop (below 992 everything stacks) */
@media (min-width:992px){.gt-about-section.pc-extras .gt-about-wrapper > .row{align-items:center}}
/* captions: sentence case in the HTML (same as the production source), uppercase on screen as the template renders them */
.gt-about-section.pc-extras .gt-about-box .content p{text-transform:uppercase}


/* ===== 01b-marquee-texture.css ===== */
/* 01b · MARQUEE — owner request: "same texture we have on the hero on this moving section's background".
   Same carbon-fibre twill stack as the hero's .pch-carbon (assets/css/pc-hero.css), scoped to the marquee root. */
.gt-marque-section.pc-marquee{
  background:
    repeating-linear-gradient(45deg,rgba(255,255,255,.016) 0 2px,transparent 2px 5px),
    repeating-linear-gradient(-45deg,rgba(0,0,0,.24) 0 2px,transparent 2px 5px),
    linear-gradient(118deg,#0c121c 0%,#0e141f 58%,#121a2a 100%);
}


/* ===== 01b-marquee.css ===== */
/* 01b · MARQUEE — overrides scoped to the section root (.gt-marque-section.pc-marquee). main-pc.css is never edited.
   Template rules used as shipped: .marquee-text-slider-3.style-11/.style-12 (main-pc.css 8917-8995: row sizes, style-12 padding 30px/110px → 100 ≤1199 → 80 ≤991),
   .gt-marque-section + .overlay-shape (8997-9011), .slide-transtion / .brand-slide-element (7862-7870).
   Rhythm: exactly as the template — the strip is followed by the same .gt-game-bg-section (02-games), so the template's own
   style-12 bottom padding is the gap to its background image (an earlier 80/60/56px trim targeted the superseded 02-grid). */

/* The edge-darkening overlay sits above the text (z-index 9, template) — never let it catch the pointer. */
.gt-marque-section.pc-marquee .overlay-shape{pointer-events:none}

/* Before Swiper initialises (or without JS) the slides already sit on one line (swiper-bundle.css .swiper-wrapper{display:flex},
   .brand-slide-element{width:auto}); hide the overflow row-wise so nothing can widen the page. */
.gt-marque-section.pc-marquee .swiper{overflow:hidden}


/* ===== 02-games-catalogue.css ===== */
/* 02 · CATALOGUE collapse (pairs with 02-games-catalogue.js). Scoped under the section root; never edits 02-games.css. */
.pc-games .pc-catalogue .pc-cat-list.pc-cat-anim{overflow:hidden;transition:max-height .6s cubic-bezier(.2,.7,.2,1)}
.pc-games .pc-catalogue .pc-cat-list.pc-cat-collapsed{max-height:0;margin-bottom:0}
.pc-games .pc-catalogue .pc-cat-list.pc-cat-open{max-height:30000px}
.pc-games .pc-catalogue .pc-cat-toggle-wrap{display:flex;justify-content:center;margin:0 0 34px}
.pc-games .pc-catalogue .pc-cat-toggle{display:inline-flex;align-items:center;gap:10px;cursor:pointer}
.pc-games .pc-catalogue .pc-cat-toggle i{transition:transform .3s ease}
/* tighter: the collapsed catalogue is a slim bar under the search, not a block of its own */
.pc-games .pc-catalogue{margin-top:56px}
@media (max-width:991px){.pc-games .pc-catalogue{margin-top:40px}}
/* integrator (QA 390): "Browse all 126 games · 278 cheats" at the template's 17px/30px pad is ~390px → wrapped onto two rows with the
   chevron orphaned on row 2. Template buttons never wrap, so size it to the phone column instead (14px ≈ 325px incl. padding). */
@media (max-width:575px){.pc-games .pc-catalogue .pc-cat-toggle{font-size:14px;letter-spacing:.3px;padding-left:22px;padding-right:22px;white-space:nowrap}}
@media (prefers-reduced-motion:reduce){.pc-games .pc-catalogue .pc-cat-list.pc-cat-anim{transition:none}}


/* ===== 02-games.css ===== */
/* 02 · TRENDING GAMES + FULL CATALOGUE (#hack-search) — overrides on top of main-pc.css, scoped to the two section roots
   (.gt-game-bg-section.pc-games-bg and .gt-game-section.pc-games). main-pc.css is never edited.
   Template rules used as shipped: .gt-game-bg-section + .text-shape + ::before orange wedge (main-pc.css 5216-5252),
   .gt-gaming-bg-wrapper + .gt-games-content + .gt-button (5141-5214), .item-hover/.in-view (692-704, driven by main.js top_view_2),
   .gt-section-title-2 (11541-11603), .gt-gaming-card-item hover reveal (5008-5130), .gt-game-section (5132-5139),
   .gt-theme-btn.gt-style-border (58-107), .search-popup__form (10990-11036), borderAnim keyframes (1621). */

/* =========================================================================
   Heading-budget stand-ins: spans that carry the template's h6 / h2 / h3 looks (global h rules main-pc.css 146-158, 201-268;
   line-height 1.2 = bootstrap reboot's heading line-height, which is what the template's h6 renders at: 19.2px, NOT body's 28px)
   ========================================================================= */
.pc-games-bg .gt-games-content .pc-h6,
.pc-games .gt-section-title-2 .pc-h6,
.pc-games .gt-gaming-content .pc-h6{font-family:"Chakra Petch",sans-serif;font-size:16px;font-weight:700;line-height:1.2;color:var(--gt-white);text-transform:uppercase;transition:all .4s ease-in-out}
.pc-games-bg .gt-games-content .pc-h2,
.pc-games .gt-section-title-2 .pc-h2{display:block;font-family:"Chakra Petch",sans-serif;font-weight:700;line-height:112%;color:var(--gt-white);text-transform:uppercase;transition:all .4s ease-in-out}

/* banner: template .gt-gaming-bg-wrapper .gt-games-content h6 {margin-bottom:5px} / h2 {font-size:50px → 40 → 35 → 30 → 25} (5165-5200) */
.pc-games-bg .gt-games-content .pc-h6{display:block;margin-bottom:5px}
.pc-games-bg .gt-games-content .pc-h2{font-size:50px}
@media (max-width:1199px){.pc-games-bg .gt-games-content .pc-h2{font-size:40px}}
@media (max-width:767px){.pc-games-bg .gt-games-content .pc-h2{font-size:35px}}
@media (max-width:575px){.pc-games-bg .gt-games-content .pc-h2{font-size:30px}}
@media (max-width:470px){.pc-games-bg .gt-games-content .pc-h2{font-size:25px}}

/* grid title: template .gt-section-title-2 h6 (animated 44px gradient rules either side) + global h2 sizes */
.pc-games .gt-section-title-2 .pc-h6{position:relative;display:inline-block;letter-spacing:-.32px;line-height:1;margin-bottom:25px;padding-left:60px;padding-right:60px}
.pc-games .gt-section-title-2 .pc-h6::before{position:absolute;content:"";background:linear-gradient(90deg,#00130B 0%,#f66e61 100%);width:44px;height:1px;left:0;top:8px;animation:borderAnim 2s infinite alternate ease-in-out}
.pc-games .gt-section-title-2 .pc-h6::after{position:absolute;content:"";background:linear-gradient(90deg,#f66e61 0%,#00130B 100%);width:44px;height:1px;right:0;top:8px;left:initial;animation:borderAnim 2s infinite alternate ease-in-out}
@media (max-width:575px){
  .pc-games .gt-section-title-2 .pc-h6{padding-left:0;padding-right:0}
  .pc-games .gt-section-title-2 .pc-h6::before,.pc-games .gt-section-title-2 .pc-h6::after{display:none}
}
.pc-games .gt-section-title-2 .pc-h2{font-size:60px}
@media (max-width:1399px){.pc-games .gt-section-title-2 .pc-h2{font-size:50px}}
@media (max-width:1199px){.pc-games .gt-section-title-2 .pc-h2{font-size:40px}}
@media (max-width:767px){.pc-games .gt-section-title-2 .pc-h2{font-size:35px}}
@media (max-width:575px){.pc-games .gt-section-title-2 .pc-h2{font-size:30px}}
@media (max-width:470px){.pc-games .gt-section-title-2 .pc-h2{font-size:25px}}

/* tile overlay: template .gt-gaming-content h6 (orange tag) / h3 > a (white, underline grows on hover) (5088-5115) */
.pc-games .gt-gaming-content .pc-h6{background-color:var(--gt-theme);padding:5px;border:1px solid var(--gt-white);margin-bottom:20px;display:inline-block}
.pc-games .gt-gaming-content .pc-h3{display:block;font-family:"Chakra Petch",sans-serif;font-size:26px;font-weight:700;line-height:112%;color:var(--gt-white);text-transform:uppercase;transition:all .4s ease-in-out}
@media (max-width:1199px){.pc-games .gt-gaming-content .pc-h3{font-size:20px}}
.pc-games .gt-gaming-content .pc-h3 a{color:var(--gt-white);background-position:0 95%;background-repeat:no-repeat;background-size:0% 2px;display:inline;transition:all .4s ease-in-out}
.pc-games .gt-gaming-content .pc-h3 a:hover{color:var(--gt-white);background-size:100% 2px;background-image:linear-gradient(180deg,var(--gt-white) 0%,var(--gt-white) 100%)}

/* =========================================================================
   Banner (.gt-game-bg-section) — template behaviours untouched; only real-content fixes
   ========================================================================= */
/* the orange wedge (template ::before) sits over the photo; keep the text/buttons above it like the template's z-order */
.pc-games-bg .container{position:relative;z-index:1}
/* the right-hand button is offset to the right (template .gt-button.gt-style-2{transform:translateX(100%)}). The template leaves the
   wrapper block-level, so "100%" is the whole column (≈550px at 1440) and the button lands outside the clipped section. Inline-block
   makes the shift the button's own width — the template's offset look, but inside the column. Below 1200px the column is too narrow
   for any shift (and ≤767px it is centred) → keep the button in flow there, like the left one. */
.pc-games-bg .gt-games-content .gt-button.gt-style-2{display:inline-block}
@media (max-width:1199px){.pc-games-bg .gt-games-content .gt-button.gt-style-2{transform:none}}

/* =========================================================================
   Tiles (.gt-gaming-card-item) — template hover reveal as shipped; ours are photos with explicit dimensions
   ========================================================================= */
.pc-games .gt-gaming-card-item .gt-gaming-image img{display:block;aspect-ratio:450/400;object-fit:cover}
/* long game names (e.g. "BLACK OPS 7 / WARZONE") wrap inside the tile instead of running under the clipped edge */
.pc-games .gt-gaming-card-item .gt-gaming-image .gt-gaming-content{right:30px}
.pc-games .gt-gaming-card-item .gt-gaming-image .icon:focus-visible{opacity:1;visibility:visible;right:30px;outline:2px solid var(--gt-white);outline-offset:2px}
/* touch devices have no hover: show the template's hover state permanently so the tag, name and arrow link are visible and tappable */
@media (hover:none){
  .pc-games .gt-gaming-card-item .gt-gaming-image::before{transform:scale(1,1);z-index:1}
  .pc-games .gt-gaming-card-item .gt-gaming-image .icon{opacity:1;visibility:visible;right:30px}
  .pc-games .gt-gaming-card-item .gt-gaming-image .gt-gaming-content{opacity:1;visibility:visible;bottom:30px}
}

/* =========================================================================
   Full catalogue (#hack-search): template search form + footer-style link list in 4 responsive columns
   ========================================================================= */
.pc-games .pc-catalogue{margin-top:80px;scroll-margin-top:110px;text-transform:none;font-weight:500}
@media (max-width:991px){.pc-games .pc-catalogue{margin-top:60px}}

/* search: template .search-popup__form (white field, orange square button) — centred and narrowed so it reads as a tool, not a hero */
.pc-games .pc-catalogue .search-popup__form{max-width:640px;margin:0 auto 24px}
.pc-games .pc-catalogue .search-popup__form input[type=search]{font-family:"Chakra Petch",sans-serif;font-weight:600;text-transform:none;border-radius:0;-webkit-appearance:none;appearance:none}
.pc-games .pc-catalogue .search-popup__form input[type=search]::placeholder{color:#000;opacity:.6;text-transform:uppercase;font-weight:600}
.pc-games .pc-catalogue .search-popup__form input[type=search]:focus{box-shadow:0 0 0 3px rgba(246,110,97,.35)}
.pc-games .pc-catalogue .search-popup__form input[type=search]::-webkit-search-decoration{-webkit-appearance:none}
.pc-games .pc-catalogue .search-popup__form input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;height:14px;width:14px;cursor:pointer;background:#000;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 2l10 10M12 2L2 12' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 2l10 10M12 2L2 12' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}
.pc-games .pc-catalogue .search-popup__form .search-btn{cursor:pointer}
.pc-games .pc-catalogue .search-popup__form .search-btn:focus-visible{outline:2px solid var(--gt-white);outline-offset:2px}

/* live result count (JS) */
.pc-games .pc-cat-count{text-align:center;font-size:14px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;color:var(--gt-text);margin:0 0 30px}
.pc-games .pc-cat-count:empty{display:none}

/* list: 4 → 3 → 2 → 1 columns; each game is one unbreakable block */
.pc-games .pc-cat-list{column-count:4;column-gap:30px;margin:0;padding:0;list-style:none}
@media (max-width:1199px){.pc-games .pc-cat-list{column-count:3}}
@media (max-width:767px){.pc-games .pc-cat-list{column-count:2;column-gap:24px}}
@media (max-width:575px){.pc-games .pc-cat-list{column-count:1}}
.pc-games .pc-cat-list li{break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;margin:0 0 18px;padding:0 0 14px;border-bottom:1px solid rgba(255,255,255,.06);line-height:1.5;transition:all .4s ease-in-out}
/* template footer list hover: the row nudges 5px right (main-pc.css 4336) */
.pc-games .pc-cat-list li:hover{margin-left:5px}

/* game name (links to the game page) — Chakra Petch 700 uppercase like the template's list links, orange on hover */
.pc-games .pc-cat-game{display:block;font-family:"Chakra Petch",sans-serif;font-size:15px;font-weight:700;line-height:1.4;color:var(--gt-white);text-transform:uppercase;margin-bottom:4px;transition:all .4s ease-in-out}
.pc-games a.pc-cat-game:hover{color:var(--gt-theme)}
.pc-games .pc-cat-game--static{color:var(--gt-text)}

/* products inline: "Name $price · Name $price" with the live status dot */
.pc-games .pc-cat-items{display:block;font-size:14px;line-height:1.8;color:var(--gt-text)}
.pc-games .module-item{color:var(--gt-text);white-space:nowrap;transition:color .3s,opacity .3s}
.pc-games .module-item:hover{color:var(--gt-theme)}
.pc-games .module-item:focus-visible{outline:2px solid var(--gt-theme);outline-offset:2px}
.pc-games .module-item .hack-cost{color:rgba(255,255,255,.45);font-variant-numeric:tabular-nums;transition:color .3s}
.pc-games .module-item:hover .hack-cost{color:var(--gt-theme)}
.pc-games .pc-cat-sep{color:rgba(255,255,255,.22);margin:0 7px;font-weight:700}
.pc-games .t-dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;vertical-align:1px;background:var(--gt-theme);box-shadow:0 0 0 2px rgba(246,110,97,.18)}
.pc-games .t-dot.t-on{background:#3ddc84;box-shadow:0 0 0 2px rgba(61,220,132,.18)}

/* search states (02-games.js): hidden games, dimmed non-matching products, empty message */
.pc-games .hidden{display:none!important}
.pc-games .module-item.pc-dim{opacity:.3}
.pc-games .module-item.pc-dim:hover{opacity:1}
.pc-games .pc-cat-empty{text-align:center;color:var(--gt-white);font-size:16px;font-weight:600;margin:10px 0 0}
.pc-games .pc-cat-empty .pc-cat-q{color:var(--gt-theme)}
.pc-games .pc-cat-reset{color:var(--gt-theme);font-family:"Chakra Petch",sans-serif;font-weight:700;text-transform:uppercase;text-decoration:underline;text-underline-offset:3px;cursor:pointer;margin-left:6px}
.pc-games .pc-cat-reset:hover{color:var(--gt-white)}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:reduce){
  .pc-games .gt-section-title-2 .pc-h6::before,.pc-games .gt-section-title-2 .pc-h6::after{animation:none;width:44px}
  .pc-games .gt-gaming-card-item .gt-gaming-image::before,
  .pc-games .gt-gaming-card-item .gt-gaming-image .icon,
  .pc-games .gt-gaming-card-item .gt-gaming-image .icon::before,
  .pc-games .gt-gaming-card-item .gt-gaming-image .icon i,
  .pc-games .gt-gaming-card-item .gt-gaming-image .gt-gaming-content,
  .pc-games .pc-cat-list li,.pc-games .module-item{transition:none}
}


/* ===== 02b-video.css ===== */
/* 02b · VIDEO — overrides scoped to the section root (.gt-video-section.pc-video). main-pc.css is never edited.
   The template styles the tag and the title by TAG (.gt-video-content h6 / h2); ours are a <span> and a <p> (heading budget),
   so the two rules below mirror the template's h6/h2 look 1:1. Everything else (panel clip-path, gradient, .gt-theme-btn white
   variant, .video-btn ring + .ripple pulse, responsive padding) comes straight from main-pc.css 2980-3086 / 7673-7705. */

/* tag: h1-h6 base (main-pc.css 146-158) + h6 (265-268) + .gt-video-content h6 (3023-3030); line-height 1.2 = bootstrap reboot's heading
   line-height — the template h6 renders 19.2px tall (pill 31px), not body's 28px */
.gt-video-section.pc-video .gt-video-content .subtitle{display:inline-block;font-family:"Chakra Petch",sans-serif;font-size:16px;font-weight:700;line-height:1.2;text-transform:uppercase;color:var(--gt-white);background-color:var(--gt-theme);padding:5px;border:1px solid var(--gt-white);margin:0 0 20px;transition:all .4s ease-in-out}

/* title: h1-h6 base (146-158) + h2 scale (201-240) + .gt-video-content h2 (3031-3033) — p{margin:0} already in the template */
.gt-video-section.pc-video .gt-video-content .tx-title{display:block;font-family:"Chakra Petch",sans-serif;font-size:60px;font-weight:700;line-height:112%;text-transform:uppercase;color:var(--gt-white);margin:0;padding:0;transition:all .4s ease-in-out}
@media (max-width:1399px){.gt-video-section.pc-video .gt-video-content .tx-title{font-size:50px}}
@media (max-width:1199px){.gt-video-section.pc-video .gt-video-content .tx-title{font-size:40px}}
@media (max-width:767px){.gt-video-section.pc-video .gt-video-content .tx-title{font-size:35px}}
@media (max-width:575px){.gt-video-section.pc-video .gt-video-content .tx-title{font-size:30px}}
@media (max-width:470px){.gt-video-section.pc-video .gt-video-content .tx-title{font-size:25px}}

/* phone: the template demo keeps the text block and the play ring side by side (wrapper = flex-wrap + gap 30px, padding 30px → 306px usable
   at 390). The demo's "play now" button is the 200px min-width; our "View Apex cheats" label needs 225px with the template's 30px side
   padding, which pushed the play ring onto a second row. Narrower side padding (min-width released) keeps the label on one line at ~197px
   so the ring stays beside the text like the template. */
@media (max-width:575px){.gt-video-section.pc-video .gt-video-content .gt-theme-btn{min-width:0;padding-left:16px;padding-right:16px}}


/* ===== 02c-shop.css ===== */
/* Section 02c · SHOP ("Cheat store") — overrides on top of main-pc.css.
   Every selector is scoped under the section hook .pc-shop (added next to the template's own
   gt-shop-section classes). main-pc.css is never edited. Template rules referenced by line. */

/* ---------- title block: template h6 / h2 rendered as span / p (heading budget) ---------- */
/* eyebrow: clone of the h6 globals (146-158, 265-268) + .gt-section-title-2 h6 incl. the animated 44px lines (11552-11603) */
.gt-shop-section.pc-shop .gt-section-title-2 .subtitle{font-family:"Chakra Petch",sans-serif;font-size:16px;font-weight:700;letter-spacing:-0.32px;line-height:1;color:var(--gt-white);text-transform:uppercase;position:relative;display:inline-block;margin:0 0 25px;padding:0 60px;transition:all .4s ease-in-out}
.gt-shop-section.pc-shop .gt-section-title-2 .subtitle::before{position:absolute;content:"";background:linear-gradient(90deg,#00130B 0%,#f66e61 100%);width:44px;height:1px;left:0;top:8px;animation:borderAnim 2s infinite alternate ease-in-out}
.gt-shop-section.pc-shop .gt-section-title-2 .subtitle::after{position:absolute;content:"";background:linear-gradient(90deg,#f66e61 0%,#00130B 100%);width:44px;height:1px;right:0;top:8px;left:initial;animation:borderAnim 2s infinite alternate ease-in-out}
@media (max-width:575px){
  .gt-shop-section.pc-shop .gt-section-title-2 .subtitle{padding:0}
  .gt-shop-section.pc-shop .gt-section-title-2 .subtitle::before,.gt-shop-section.pc-shop .gt-section-title-2 .subtitle::after{display:none}
}
/* section title: clone of the h2 globals (146-158 + 201-235, every breakpoint) */
.gt-shop-section.pc-shop .gt-section-title-2 .sec_title{font-family:"Chakra Petch",sans-serif;font-size:60px;font-weight:700;line-height:112%;color:var(--gt-white);text-transform:uppercase;margin:0;padding:0;transition:all .4s ease-in-out}
@media (max-width:1399px){.gt-shop-section.pc-shop .gt-section-title-2 .sec_title{font-size:50px}}
@media (max-width:1199px){.gt-shop-section.pc-shop .gt-section-title-2 .sec_title{font-size:40px}}
@media (max-width:767px){.gt-shop-section.pc-shop .gt-section-title-2 .sec_title{font-size:35px}}
@media (max-width:575px){.gt-shop-section.pc-shop .gt-section-title-2 .sec_title{font-size:30px}}
@media (max-width:470px){.gt-shop-section.pc-shop .gt-section-title-2 .sec_title{font-size:25px}}

/* ---------- slider: equal-height slides (1- and 2-line product names) ---------- */
.pc-shop .gt-shop-slider .swiper-slide{height:auto}
/* the template card carries margin-top:30px (12348) — keep it, fill the rest of the slide */
.pc-shop .gt-shop-card-item{height:calc(100% - 30px);display:flex;flex-direction:column}
.pc-shop .gt-shop-card-item .gt-shop-image{flex:0 0 auto}
.pc-shop .gt-shop-card-item .gt-shop-content{flex:1 1 auto;display:flex;flex-direction:column}

/* ---------- card image: JPEG covers (template PNGs were cutouts) → clip the template's 1.5s zoom (12371-12376, 12425-12428) ---------- */
.pc-shop .gt-shop-card-item .gt-shop-image{overflow:hidden}
.pc-shop .gt-shop-card-item .gt-shop-image img{display:block;width:100%;height:auto;aspect-ratio:460/348;object-fit:cover}

/* ---------- status tag: the template's orange "25% off" span (12356-12367) carrying the live product status ----------
   typography is the template rule as-is (16px / 700 / padding 4px / letter-spacing -0.28px / line-height 1 / top 25 left 25,
   uppercase via body) — only the layout for the pulse dot, the stacking and the green "Online" colour are ours. */
.pc-shop .gt-shop-card-item .pc-shop-status{display:inline-flex;align-items:center;gap:6px;z-index:2;pointer-events:none}
.pc-shop .gt-shop-card-item .pc-shop-status::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gt-white);animation:pcShopPulse 1.8s ease-out infinite}
.pc-shop .gt-shop-card-item .pc-shop-status.is-online{background-color:#128a3e}
@keyframes pcShopPulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.55)}100%{box-shadow:0 0 0 6px rgba(255,255,255,0)}}

/* ---------- hover icons: decorative (ul aria-hidden); the template reveal (li scaleX 0→1, 12384-12388 / 12422-12424) stays ---------- */
.pc-shop .gt-shop-card-item .gt-shop-image .gt-shop-icon li button{cursor:default}
.pc-shop .gt-shop-card-item:focus-within .gt-shop-image .gt-shop-icon li{transform:scaleX(1)}
.pc-shop .gt-shop-card-item:focus-within .gt-shop-image img{transform:scale3d(1.1,1.1,1)}

/* ---------- product name: template h5>a (12407-12421 + h5 globals 259-263) on p.h5>a — Bootstrap's .h5 reset undone ---------- */
/* min-height reserves two lines (longest live name wraps to 2; the template name is always 2 lines) so the price row sits at the
   same height on every card; margin-bottom 20px = the template h5 rule (12408) */
.pc-shop .gt-shop-card-item .gt-shop-content .h5{font-family:"Chakra Petch",sans-serif;font-size:20px;font-weight:700;line-height:150%;min-height:60px;color:var(--gt-white);text-transform:uppercase;margin:0 0 20px;transition:all .4s ease-in-out}
.pc-shop .gt-shop-card-item .gt-shop-content .h5 a{color:var(--gt-white);background-position:0 95%;background-repeat:no-repeat;background-size:0% 2px;display:inline;transition:all .4s ease-in-out}
.pc-shop .gt-shop-card-item .gt-shop-content .h5 a:hover{color:var(--gt-white);background-size:100% 2px;background-image:linear-gradient(180deg,var(--gt-white) 0%,var(--gt-white) 100%)}
.pc-shop .gt-shop-card-item .gt-shop-content .h5 a:focus-visible{outline:2px solid var(--gt-theme);outline-offset:2px}
/* whole card = ONE link: the stretched link's overlay sits above the tag + icons (z 1/2) so every click lands on the product */
.pc-shop .gt-shop-card-item .stretched-link::after{position:absolute;inset:0;z-index:3;content:""}

/* ---------- price (template <p>$185.10-$285.30</p>) + the extra "game · tiers" line ----------
   price = the template's bare <p>: body 16px / 600 / 28px / var(--gt-text), uppercase via body — nothing overridden but tabular digits.
   meta (our extra line) sits one step below it: 13px, same colour dimmed, sentence case like every other secondary line on the page. */
.pc-shop .gt-shop-card-item .gt-shop-content .pc-shop-price{font-variant-numeric:tabular-nums}
.pc-shop .gt-shop-card-item .gt-shop-content .pc-shop-meta{margin-top:4px;font-size:13px;font-weight:600;line-height:1.5;color:var(--gt-text);opacity:.75;text-transform:none;letter-spacing:.2px}

/* ---------- arrows: the template's .array-buttons (7706-7770) centred under the slides, inside .gt-shop-slider ---------- */
.pc-shop .gt-shop-slider .array-buttons{justify-content:center;margin-top:40px}
.pc-shop .gt-shop-slider .array-buttons button{cursor:pointer}
.pc-shop .gt-shop-slider .array-buttons button:focus-visible{outline:2px solid var(--gt-theme);outline-offset:3px}
@media (max-width:767px){.pc-shop .gt-shop-slider .array-buttons{margin-top:30px}}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:reduce){
  .pc-shop .gt-shop-card-item .gt-shop-image img,
  .pc-shop .gt-shop-card-item:hover .gt-shop-image img,
  .pc-shop .gt-shop-card-item:focus-within .gt-shop-image img{transform:none;transition:none}
  .pc-shop .gt-shop-card-item .gt-shop-image .gt-shop-icon li{transition:none}
  .pc-shop .gt-shop-card-item .pc-shop-status::before{animation:none}
  .gt-shop-section.pc-shop .gt-section-title-2 .subtitle::before,
  .gt-shop-section.pc-shop .gt-section-title-2 .subtitle::after{animation:none}
}


/* ===== 03-features.css ===== */
/* Section 3 · FEATURES (#pc_general_features) — overrides on top of main-pc.css.
   Every selector is scoped under the section root; main-pc.css is untouched.
   Template component: index-7 .gt-feature-section-7 / .gt-feature-item-7 (main-pc.css 4060-4148). */

/* --- defuse template globals that hit the card copy ---------------------------------------
   body{text-transform:uppercase;font-weight:600;line-height:28px} → paragraphs read sentence-case.
   (headings keep the template's uppercase look — DOM text is untouched; live Title Case is intact.) */
#pc_general_features .gt-feature-item-7 p{text-transform:none;font-weight:400;line-height:1.7}

/* --- FontAwesome glyph in place of the template's inline SVG -------------------------------
   .icon is a 48px circle (bg #000, color var(--gt-theme)); the template SVGs are 22-31px wide.
   Block-fill the circle so the glyph is dead-centre, same orange, same white-on-orange hover. */
#pc_general_features .gt-feature-item-7 .gt-icon-item .icon{flex:0 0 48px}
#pc_general_features .gt-feature-item-7 .gt-icon-item .icon i{display:block;width:48px;height:48px;line-height:48px;font-size:22px;color:inherit;transition:all .4s ease-in-out}
/* template flips the svg on hover (scaleX(-1)); mirror that for the glyph so the interaction is identical */
#pc_general_features .gt-feature-item-7:hover .icon i{transform:scaleX(-1)}

/* --- grid tidiness ------------------------------------------------------------------------
   Bootstrap stretches the columns but the card is not height:100% → equal-height cards
   (paragraph lengths differ by ~20 chars across the six). */
#pc_general_features .gt-feature-item-7{height:100%}

/* template zeroes .gt-section-title margin-bottom ≤767px (its sections give items margin-top:30px);
   our cards sit in .row.g-4 with no own top margin → keep 30px of air under the H2 on phones. */
@media (max-width:767px){#pc_general_features .gt-section-title{margin-bottom:30px}}

/* integrator (QA 390/768): template sets .gt-icon-item{flex-wrap:wrap} ≤1199 → our longer titles ("Lightning-Fast Updates",
   "User-Friendly Setup") drop UNDER the icon while short ones stay beside it = mixed layouts in one grid. The demo look (and the
   ≥1200 look) is icon + title on one row, so keep the row and let the title wrap its own words instead. */
@media (max-width:1199px){
  #pc_general_features .gt-feature-item-7 .gt-icon-item{flex-wrap:nowrap}
  #pc_general_features .gt-feature-item-7 .gt-icon-item h3{min-width:0}
}

/* integrator: the template's full-section orange slab (::before) is too loud for this page and swallows the next section → off */
#pc_general_features.gt-feature-section-7::before{display:none}
#pc_general_features.gt-feature-section-7{background:#131722}


/* ===== 04-testimonials.css ===== */
/* 04 · TESTIMONIALS — PrivateCheatz overrides on top of main-pc.css for the HOME-1 testimonial slider
   (index.html 1077-1182; template rules main-pc.css 14443-14533 + .swiper-dot 7772-7811 + title area 11541-11652).
   Every selector is scoped under the section root `.gt-testimonial-section.pc-testimonials`. Loads AFTER main-pc.css.
   The slider itself (cards effect, loop, autoplay, dots) is the template's own main.js init — nothing here touches it.
   Title animation = the template's own GSAP SplitText hooks on the markup (tz-sub-tilte/tz-sub-anim + tz-itm-title/tz-itm-anim,
   main.js 557-626) — no CSS needed, the scrub sets opacity/x on the generated .split-line > div > div chars. */

/* ---- eyebrow: the template styles the TAG (.gt-section-title-2 h6, main-pc.css 11552-11603). Live keeps the line as a <p>
   (heading budget) → the h6 rule is cloned onto .subtitle 1:1 — 16px/700/-0.32px, white, inline-block, 25px below, 60px side
   padding for the two 44px gradient ticks (::before/::after, borderAnim pulse 1621-1628); ≤575 the template drops the ticks.
   Also defuses body{font-weight:600} / p defaults so the clone is exact. */
.gt-testimonial-section.pc-testimonials .gt-section-title-2 .subtitle{font-family:"Chakra Petch",sans-serif;font-size:16px;font-weight:700;letter-spacing:-0.32px;line-height:1;color:var(--gt-white);text-transform:uppercase;position:relative;display:inline-block;margin:0 0 25px;padding:0 60px;transition:all .4s ease-in-out}
.gt-testimonial-section.pc-testimonials .gt-section-title-2 .subtitle::before{position:absolute;content:"";background:linear-gradient(90deg,#00130B 0%,#f66e61 100%);width:44px;height:1px;left:0;top:8px;animation:borderAnim 2s infinite alternate ease-in-out}
.gt-testimonial-section.pc-testimonials .gt-section-title-2 .subtitle::after{position:absolute;content:"";background:linear-gradient(90deg,#f66e61 0%,#00130B 100%);width:44px;height:1px;right:0;top:8px;left:initial;animation:borderAnim 2s infinite alternate ease-in-out}
@media (max-width:575px){
  .gt-testimonial-section.pc-testimonials .gt-section-title-2 .subtitle{padding:0}
  .gt-testimonial-section.pc-testimonials .gt-section-title-2 .subtitle::before,.gt-testimonial-section.pc-testimonials .gt-section-title-2 .subtitle::after{display:none}
}
/* the live eyebrow is 37 chars (337px at 16px/700) vs the template's 16 ("OUR TESTIMONIALS") and it lives in the 5/12 column
   (integrator layout, below): ≥1400 the column holds text + 2×60px ticks (457px) on one line; 1200-1399 (xl container 1140 → 451px
   column) the ticks keep their 44px but the text gap shrinks 16→8px so the line still fits; 992-1199 (lg container 960 → 376px column)
   the template's own ≤575 fallback applies (no ticks, no padding); ≤991 the column is full-width again → template rule unchanged */
@media (min-width:1200px) and (max-width:1399px){.gt-testimonial-section.pc-testimonials .gt-section-title-2 .subtitle{padding:0 52px}}
@media (min-width:992px) and (max-width:1199px){
  .gt-testimonial-section.pc-testimonials .gt-section-title-2 .subtitle{padding:0}
  .gt-testimonial-section.pc-testimonials .gt-section-title-2 .subtitle::before,.gt-testimonial-section.pc-testimonials .gt-section-title-2 .subtitle::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  .gt-testimonial-section.pc-testimonials .gt-section-title-2 .subtitle::before,.gt-testimonial-section.pc-testimonials .gt-section-title-2 .subtitle::after{animation:none}
}

/* ---- title (.gt-section-title-2 h3): the template slot is an h2 at 60/50/40/40/35/30/25; live keeps the H3 level and the title
   sits in the 5/12 column (see integrator note below) → 45/38/35/30, the same scale as the page's other section H3s (01-extras) */
.gt-testimonial-section.pc-testimonials .gt-section-title-2 h3{font-size:45px;font-weight:700;line-height:112%;color:var(--gt-white)}
@media (max-width:991px){.gt-testimonial-section.pc-testimonials .gt-section-title-2 h3{font-size:38px}}
@media (max-width:767px){.gt-testimonial-section.pc-testimonials .gt-section-title-2 h3{font-size:35px}}
@media (max-width:575px){.gt-testimonial-section.pc-testimonials .gt-section-title-2 h3{font-size:30px}}
/* ≤767 the template zeroes .gt-section-title-area's margin (11625-11629); the wrapper's own 30px (14443) keeps the gap → no override */

/* ---- card: equal height across the stack (cards effect shows the slides stacked), footer pinned to the bottom ---
   swiper-bundle sets .swiper-slide{height:100%} (= auto here) so every slide is content-tall and a taller card behind a
   short active one peeks out of the stack; height:auto lets the flex wrapper stretch all slides to the tallest (standard
   Swiper equal-height pattern), then the card's 100% resolves against that */
.gt-testimonial-section.pc-testimonials .gt-testimonial-slider .swiper-slide{height:auto}
.gt-testimonial-section.pc-testimonials .gt-testimonial-wrapper .gt-testimonial-card-item{height:100%;display:flex;flex-direction:column}

/* ---- avatar: the template's .image slot holds a 56×56 PNG (demo: round client photo) → 56px letter circle (span) ---- */
.gt-testimonial-section.pc-testimonials .gt-testimonial-wrapper .gt-testimonial-card-item .gt-client-info .image{flex:0 0 56px;width:56px;height:56px}
.gt-testimonial-section.pc-testimonials .gt-testimonial-wrapper .gt-testimonial-card-item .gt-client-info .image .gt-avatar-letter{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:var(--gt-theme);color:var(--gt-white);font-family:"Chakra Petch",sans-serif;font-size:22px;font-weight:700;line-height:1;text-transform:uppercase}

/* ---- client name: template <h6> slot → span; mirrors the template h6 exactly (16px/700, white, caps, line-height 1.2 from
   bootstrap's h6 reboot, mb 5px — main-pc.css 146-158, 265-268, 14464) */
.gt-testimonial-section.pc-testimonials .gt-testimonial-wrapper .gt-testimonial-card-item .gt-client-info .text{min-width:0}
.gt-testimonial-section.pc-testimonials .gt-testimonial-wrapper .gt-testimonial-card-item .gt-client-info .text .gt-client-name{display:block;font-family:"Chakra Petch",sans-serif;font-size:16px;font-weight:700;line-height:1.2;color:var(--gt-white);text-transform:uppercase;margin-bottom:5px;overflow-wrap:anywhere}
/* ---- VERIFIED badge in the template's role <p> slot: same metrics as the template's role line (body p: 16px/600, 28px line, grey,
   caps — demo "SENIOR ENGINEER"), plus the orange check; name 19.2 + 5 + 28 = 52px → centred on the 56px avatar like the template */
.gt-testimonial-section.pc-testimonials .gt-testimonial-wrapper .gt-testimonial-card-item .gt-client-info .text .gt-verified{display:inline-flex;align-items:center;gap:6px;margin:0;font-size:16px;font-weight:600;letter-spacing:normal;line-height:28px;color:var(--gt-text)}
.gt-testimonial-section.pc-testimonials .gt-testimonial-wrapper .gt-testimonial-card-item .gt-client-info .text .gt-verified i{color:var(--gt-theme);font-size:14px;line-height:1}

/* ---- quote: template keeps italic 18px/600 white (14477-14483) and the .icon slot un-styled (img in the inherited 28px line box,
   as the demo renders it); only the body uppercase is defused for the long live reviews — same convention as every other prose
   block on the page (features, news excerpt, trainer text, footer) */
.gt-testimonial-section.pc-testimonials .gt-testimonial-wrapper .gt-testimonial-card-item .gt-testi-content p{text-transform:none}

/* ---- footer (no template slot): 5 stars + "game · product" left, GET ACCESS (template .gt-theme-btn.gt-style-border) right */
.gt-testimonial-section.pc-testimonials .gt-testimonial-wrapper .gt-testimonial-card-item .gt-testi-footer{margin-top:auto;padding-top:30px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px 24px}
.gt-testimonial-section.pc-testimonials .gt-testimonial-wrapper .gt-testimonial-card-item .gt-testi-rating .star{display:flex;gap:3px;color:var(--gt-theme);font-size:14px;line-height:1}
.gt-testimonial-section.pc-testimonials .gt-testimonial-wrapper .gt-testimonial-card-item .gt-testi-rating .star .gt-star-off{color:rgba(255,255,255,.25)}
.gt-testimonial-section.pc-testimonials .gt-testimonial-wrapper .gt-testimonial-card-item .gt-testi-rating .gt-testi-meta{margin:8px 0 0;font-size:14px;font-weight:600;letter-spacing:.3px;line-height:1.5;color:var(--gt-white);text-transform:none}
.gt-testimonial-section.pc-testimonials .gt-testimonial-wrapper .gt-testimonial-card-item .gt-testi-rating .gt-testi-meta .gt-testi-sep{color:var(--gt-theme);margin:0 4px}

/* ---- dot rail: the template parks .swiper-dot at the section's 50%/60% and rotates it 90° about its own centre (14508-14513) — tuned
   for the demo's 3 bullets (61px rail → lands just right of the 620px deck, mid-height). With the live 12 reviews the rail is 277px
   long, so the same rotation pushes it 108px further right and hangs it from 41% to 83% of the section. Same rail, re-anchored:
   rotate about the top-left and centre it on the section's mid-line (= the deck's centre, the row being the only content) → it
   sits in the gutter between the deck and the title column, x≈737 at 1440 exactly like the demo's rail. ≤1199 the template hides
   it (14514-14517) — untouched. */
.gt-testimonial-section.pc-testimonials .gt-testimonial-wrapper .swiper-dot{left:calc(50% + 17px);top:50%;transform-origin:0 0;transform:rotate(90deg) translate(-50%,-100%)}
/* the wrapper's 30px top margin (14443-14445) separates it from the template's title area ABOVE it; here the title area lives inside
   the row, so that margin was a dead 30px that made the section 150/120 instead of the template's symmetric section-padding */
.gt-testimonial-section.pc-testimonials .gt-testimonial-wrapper{margin-top:0}

/* integrator: title area lives in the deck's right column (template slot held the "4.8" graphic) — stacked, centred against the deck */
.gt-testimonial-section.pc-testimonials .pc-testi-side{display:flex;align-items:center}
.gt-testimonial-section.pc-testimonials .pc-testi-side .gt-section-title-area{display:flex;flex-direction:column;align-items:flex-start;gap:28px;margin-bottom:0;width:100%}
.gt-testimonial-section.pc-testimonials .pc-testi-side .gt-section-title-2{margin:0}
@media (max-width:991px){.gt-testimonial-section.pc-testimonials .pc-testi-side .gt-section-title-area{margin-bottom:10px}}
/* (the former 84px padding-left that cleared the dot rail is gone: the re-anchored rail now sits inside the deck column's gutter,
   x≈737-765 at 1440 — exactly where the demo's rail lands — so the title column needs no clearance) */


/* ===== 04b-trainer.css ===== */
/* 04b · TRAINER SUBSCRIPTION teaser — overrides for the home-1 gt-team-section
   (main-pc.css: team 13665-13805 · section-title-2 11541-11603 · array-buttons 7706-7770 · gt-theme-btn 58-107).
   Every selector is scoped under .gt-team-section.pc-trainer and carries at least the template's specificity,
   so it wins regardless of sheet order. main-pc.css is untouched. */

/* --- kicker: the template styles the TAG (.gt-section-title-2 h6, 11552-11603). Heading budget → <span>, so the
   rule is cloned onto .subtitle incl. the two 44px gradient ticks and their borderAnim pulse (keyframes 1621-1628).
   The scroll animation itself is the template's SplitText hook on the markup (tz-sub-tilte/tz-sub-anim) — no CSS here. */
.gt-team-section.pc-trainer .gt-section-title-2 .subtitle{font-family:"Chakra Petch",sans-serif;font-size:16px;font-weight:700;letter-spacing:-0.32px;line-height:1;color:var(--gt-white);position:relative;display:inline-block;margin-bottom:25px;padding-left:60px;padding-right:60px}
.gt-team-section.pc-trainer .gt-section-title-2 .subtitle::before{position:absolute;content:"";background:linear-gradient(90deg,#00130B 0%,#f66e61 100%);width:44px;height:1px;left:0;top:8px;animation:borderAnim 2s infinite alternate ease-in-out}
.gt-team-section.pc-trainer .gt-section-title-2 .subtitle::after{position:absolute;content:"";background:linear-gradient(90deg,#f66e61 0%,#00130B 100%);width:44px;height:1px;right:0;top:8px;left:initial;animation:borderAnim 2s infinite alternate ease-in-out}
@media (max-width:575px){
  .gt-team-section.pc-trainer .gt-section-title-2 .subtitle{padding-left:0;padding-right:0}
  .gt-team-section.pc-trainer .gt-section-title-2 .subtitle::before,.gt-team-section.pc-trainer .gt-section-title-2 .subtitle::after{display:none}
}

/* --- title "One subscription. / Many games." is NOT a heading → <p> carrying the template h2 look
   (h1-h6 globals 146-158 + h2 scale 201-235); its scroll scrub is the template's tz-itm-title/tz-itm-anim hook (main.js 593-626).
   The first line is 17 chars vs the template's 8 ("OUR BEST"),
   so the top two steps are one notch down (50/44 instead of 60/50) to keep "ONE SUBSCRIPTION." on one line;
   below 1200px the column is full-width and the template's own scale (40/35/30/25) applies unchanged. */
.gt-team-section.pc-trainer .gt-section-title-2 .sec_title{font-family:"Chakra Petch",sans-serif;font-size:50px;font-weight:700;line-height:112%;color:var(--gt-white);text-transform:uppercase;margin:0;padding:0;transition:all .4s ease-in-out}
@media (max-width:1399px){.gt-team-section.pc-trainer .gt-section-title-2 .sec_title{font-size:44px}}
@media (max-width:1199px){.gt-team-section.pc-trainer .gt-section-title-2 .sec_title{font-size:40px}}
/* 992-1199: columns still side by side but .gt-team-wrapper drops its -32% (13669-13671) → col-lg-4 is ~296px;
   "SUBSCRIPTION." at 40px is ~294px wide (Chakra Petch bold ≈ 0.565em/char) → one notch down so it never clips */
@media (min-width:992px) and (max-width:1199px){.gt-team-section.pc-trainer .gt-section-title-2 .sec_title{font-size:34px}}
@media (max-width:767px){.gt-team-section.pc-trainer .gt-section-title-2 .sec_title{font-size:35px}}
@media (max-width:575px){.gt-team-section.pc-trainer .gt-section-title-2 .sec_title{font-size:30px}}
@media (max-width:470px){.gt-team-section.pc-trainer .gt-section-title-2 .sec_title{font-size:25px}}

/* --- body copy: body ships text-transform:uppercase + font-weight:600 (112-123) → sentence case like the sibling sections */
.gt-team-section.pc-trainer .gt-team-cont .gt-text{text-transform:none;font-weight:400;line-height:1.7}

/* --- CTA under the arrow pair (.array-buttons is a flex row, the button is inline-block) */
.gt-team-section.pc-trainer .gt-team-cont .gt-theme-btn{margin-top:30px}

/* --- card: template rule targets h3 (13745-13764) → cloned onto span.gt-team-name (no link, no underline-reveal).
   .gt-team-content is absolutely positioned at left:50% with no width, so its shrink-to-fit box is only half the
   card: "BLACK OPS 7 / WARZONE" would wrap word-by-word. Give it the card width + padding; everything else
   (hover gradient wipe, rise from bottom:-30px → 30px, centred text) is the template's. */
.gt-team-section.pc-trainer .gt-team-wrapper .gt-team-card-item .gt-team-image .gt-team-content{width:100%;padding:0 16px}
.gt-team-section.pc-trainer .gt-team-wrapper .gt-team-card-item .gt-team-image .gt-team-content .gt-team-name{display:block;font-family:"Chakra Petch",sans-serif;font-size:30px;font-weight:700;line-height:112%;color:var(--gt-white);text-transform:uppercase;transition:all .4s ease-in-out}
@media (max-width:1199px){.gt-team-section.pc-trainer .gt-team-wrapper .gt-team-card-item .gt-team-image .gt-team-content .gt-team-name{font-size:20px}}
/* role line: the template's p sits directly under the h3 (13765-13767, no extra margin) — nothing to add */

/* --- card image: real 900×962 crops (template: width:100%;height:100% on a 450×481 grey) → block, aspect locked, no CLS */
.gt-team-section.pc-trainer .gt-team-wrapper .gt-team-card-item .gt-team-image img{display:block;width:100%;height:auto;aspect-ratio:450/481;object-fit:cover}

/* --- touch: the hover reveal has no pointer on phones → keep the active slide's name visible there */
@media (hover:none){
  .gt-team-section.pc-trainer .gt-team-wrapper .swiper-slide-active .gt-team-card-item .gt-team-image::before{transform:scale(1,1);z-index:1}
  .gt-team-section.pc-trainer .gt-team-wrapper .swiper-slide-active .gt-team-card-item .gt-team-image .gt-team-content{opacity:1;visibility:visible;bottom:30px}
}

@media (prefers-reduced-motion:reduce){
  .gt-team-section.pc-trainer .gt-section-title-2 .subtitle::before,.gt-team-section.pc-trainer .gt-section-title-2 .subtitle::after{animation:none}
}


/* ===== 05-article.css ===== */
/* =====================================================================
   05 · ARTICLE — overrides for the news-details post-body typography
   Template rules mirrored: main-pc.css 10306-10384 (.gt-news-details-content: h3 36/30/25 + h3.text 24/20,
   .gt-list 20px/12px rhythm + theme check icons), byline cloned from 9200-9218 (.gt-details-post .gt-date-list).
   Every selector is scoped under .news-details-section — main-pc.css untouched. Load AFTER main-pc.css.
   Template defaults left as-is (no override): body{} 16px/28px, h2 globals (uppercase, 700, 112%),
   .gt-list li 16px/600 (uppercase via body), the byline (body default, uppercase 600), .gt-theme-btn.gt-style-border.
   ===================================================================== */

/* Reading column: no hero image above it (template margin-top:24px cleared the image),
   ~72ch measure, centred inside the col-lg-10. */
.news-details-section .gt-news-details-wrapper .gt-news-details-content {
  max-width: 72ch;
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
}

/* Running copy only: defuse body{text-transform:uppercase;font-weight:600} for the ~1,000-word article paragraphs
   (page-wide prose convention — bullets + byline keep the template's uppercase 600). DOM text is untouched. */
.news-details-section .gt-news-details-wrapper .gt-news-details-content p {
  text-transform: none;
  font-weight: 400;
}

/* p{margin:0} global → paragraph rhythm for consecutive paragraphs (the demo never stacks two <p>) */
.news-details-section .gt-news-details-wrapper .gt-news-details-content p {
  margin: 0 0 20px;
}
.news-details-section .gt-news-details-wrapper .gt-news-details-content p:last-child {
  margin-bottom: 0;
}

/* Headings — the template's news-details h3 rules re-targeted to our H2s (the h2 globals 201-235 would give 60→25px):
   article title = plain h3 (36 / 30 / 25px, margin-bottom 10px — 10309-10322);
   every further H2 = the h3.text sub-head variant (24px, 20px ≤1199, margin-top 30px — 10377-10384). Uppercase per h1-h6 global. */
.news-details-section .gt-news-details-wrapper .gt-news-details-content h2 {
  font-size: 36px;
  margin-bottom: 10px;
}
@media (max-width: 1199px) {
  .news-details-section .gt-news-details-wrapper .gt-news-details-content h2 {
    font-size: 30px;
  }
}
@media (max-width: 575px) {
  .news-details-section .gt-news-details-wrapper .gt-news-details-content h2 {
    font-size: 25px;
  }
}
.news-details-section .gt-news-details-wrapper .gt-news-details-content h2.text {
  font-size: 24px;
  margin-top: 30px;
}
@media (max-width: 1199px) {
  .news-details-section .gt-news-details-wrapper .gt-news-details-content h2.text {
    font-size: 20px;
  }
}

/* Byline — 1:1 clone of .gt-match-details-wrapper .gt-details-post .gt-date-list (9200-9218), minus its margin-top
   (that cleared the post image we don't have). Text = body default (16px/28px, 600, uppercase); icons rgb(171,171,171). */
.news-details-section .gt-news-details-wrapper .gt-news-details-content .gt-date-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;          /* template wraps ≤1199; our 3 items (longer than the demo's "11 MARCH 2026") can exceed the 72ch column → wrap as whole items */
  gap: 10px 30px;           /* template: 30px on one row, 10px once wrapped */
  margin-top: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 20px;
  margin-bottom: 20px;
}
.news-details-section .gt-news-details-wrapper .gt-news-details-content .gt-date-list li {
  white-space: nowrap;      /* "AUTHOR: PRIVATECHEATZ TEAM" never breaks mid-item */
}
@media (max-width: 1199px) {
  .news-details-section .gt-news-details-wrapper .gt-news-details-content .gt-date-list {
    gap: 10px;
  }
}
.news-details-section .gt-news-details-wrapper .gt-news-details-content .gt-date-list li i {
  margin-right: 10px;
  color: rgb(171, 171, 171);
}

/* Inline text link (global a{color:#fff}, a:hover theme) → brand orange + underline so it reads as a link in prose
   (the template has no in-prose link rule). */
.news-details-section .gt-news-details-wrapper .gt-news-details-content p a {
  color: var(--gt-theme);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.news-details-section .gt-news-details-wrapper .gt-news-details-content p a:hover {
  color: var(--gt-white);
}

/* ---- read-more clamp (progressive enhancement; the full text is always in the DOM) ---- */
.news-details-section.pc-article .pc-article-clamp{position:relative}
.news-details-section.pc-article .pc-article-clamp.pc-clamp-ready{overflow:hidden;transition:max-height .6s cubic-bezier(.2,.7,.2,1)}
.news-details-section.pc-article .pc-article-clamp.pc-no-anim{transition:none}
.news-details-section.pc-article .pc-article-clamp.is-collapsed{max-height:560px}
.news-details-section.pc-article .pc-article-clamp:not(.is-collapsed){max-height:20000px}
/* bottom fade — only while collapsed */
.news-details-section.pc-article .pc-article-clamp.is-collapsed::after{content:"";position:absolute;left:0;right:0;bottom:0;height:180px;pointer-events:none;
  background:linear-gradient(180deg,rgba(19,23,34,0) 0%,rgba(19,23,34,.85) 60%,#131722 100%)}
/* toggle = the template's .gt-theme-btn.gt-style-border (main-pc.css 60-110) on a <button>; only the icon spacing/flip is ours */
.news-details-section.pc-article .pc-article-more{display:flex;justify-content:center;margin-top:28px}
.news-details-section.pc-article .pc-article-toggle{display:inline-flex;align-items:center;gap:10px}
.news-details-section.pc-article .pc-article-toggle i{transition:transform .3s ease}
.news-details-section.pc-article .pc-article-toggle.is-open i{transform:rotate(180deg)}
@media (max-width:767px){.news-details-section.pc-article .pc-article-clamp.is-collapsed{max-height:620px}}


/* ===== 06-faq.css ===== */
/* 06 · FAQ — overrides scoped to the section root (.pc-faq). Load AFTER main-pc.css. Never edits main-pc.css.
   Template source: faq.html 478-553 accordion (main-pc.css 2809-2884) + service.html 667-672 centred title.
   Everything else is the template rule as-is: .accordion-item bg/box-shadow/border:0, .accordion-button 18px/600/capitalize,
   open = theme colour + "\f077" chevron, collapsed = white + "\f078" chevron + 25px 20px padding, numbering <span> inherits the
   button colour, .accordion-body 15px/30px/50px padding (23px left ≤575px) + 500 weight + --gt-text colour. */

/* Answers: the body{} global is uppercase (112-123) → sentence case for the 2-3 sentence answers (page-wide prose convention);
   weight stays the template's explicit 500 (2866). padding-bottom: the template's 0 relied on the dropped 930×182 .thumb demo
   image (margin-top:30px) for bottom air → mirror the collapsed button's 25px. */
.pc-faq .gt-faq-wrapper .gt-faq-item .gt-faq-content .accordion-item .accordion-collapse .accordion-body{
  text-transform:none;
  padding-bottom:25px;
}

/* <h5 class="accordion-header"> → <div class="accordion-header"> (keeps the heading outline at 1×H2).
   Bootstrap gives .accordion-header margin-bottom:0 and the template h5 is 20px × line-height:150% = a COMPUTED 30px
   that the button inherits (percent line-height resolves before inheritance); mirror both so the question row
   renders identically to the shipped h5 wrapper (verified: 150% on the 16px div gave 24px, 6px shorter). */
.pc-faq .gt-faq-content .accordion-header{
  margin-bottom:0;
  line-height:30px;
}

/* The template separates title and accordion with an intro <p> (margin-bottom:20px) that we drop; ≤767px the
   .gt-section-title margin collapses to 0 in main-pc.css, so restore a gap there. */
@media (max-width:767px){
  .pc-faq .gt-section-title{margin-bottom:24px}
}


/* ===== 06b-news.css ===== */
/* 06b · NEWS — overrides scoped to the section root (.gt-news-section.pc-news). Loads AFTER main-pc.css; main-pc.css is untouched.
   Template source: index.html 1278-1367. Template rules reused as-is: .gt-news-card-item (main-pc.css 9749-9807: cut-corner clip-path,
   gt-list date rule, .icon arrow rotate hover), title area (11541-11652), .gt-theme-btn.gt-style-border (76-110), section-padding, .fix.
   Only the three heading-budget substitutions are re-skinned here, each a 1:1 clone of the rule the template applied to the tag it replaces. */

/* eyebrow: template <h6 class="subtitle …"> → <span class="subtitle …">; clone of h6 globals (146-158) + .gt-section-title-2 h6 (11552-11603),
   including the two 44px gradient rules that pulse via the template's borderAnim keyframes (1621-1628). */
.gt-news-section.pc-news .gt-section-title-2 .subtitle{font-family:"Chakra Petch",sans-serif;font-size:16px;font-weight:700;letter-spacing:-0.32px;line-height:1;color:var(--gt-white);text-transform:uppercase;position:relative;display:inline-block;margin:0 0 25px;padding:0 60px}
.gt-news-section.pc-news .gt-section-title-2 .subtitle::before{position:absolute;content:"";background:linear-gradient(90deg,#00130B 0%,#f66e61 100%);width:44px;height:1px;left:0;top:8px;animation:borderAnim 2s infinite alternate ease-in-out}
.gt-news-section.pc-news .gt-section-title-2 .subtitle::after{position:absolute;content:"";background:linear-gradient(90deg,#f66e61 0%,#00130B 100%);width:44px;height:1px;right:0;top:8px;left:initial;animation:borderAnim 2s infinite alternate ease-in-out}
@media (max-width:575px){
  .gt-news-section.pc-news .gt-section-title-2 .subtitle{padding:0}
  .gt-news-section.pc-news .gt-section-title-2 .subtitle::before,.gt-news-section.pc-news .gt-section-title-2 .subtitle::after{display:none}
}

/* section title: template <h2 class="tx-title sec_title …"> → <p>; clone of the h2 globals (146-158 + 201-235, every breakpoint). */
.gt-news-section.pc-news .gt-section-title-2 .sec_title{font-family:"Chakra Petch",sans-serif;font-size:60px;font-weight:700;line-height:112%;color:var(--gt-white);text-transform:uppercase;margin:0;padding:0}
@media (max-width:1399px){.gt-news-section.pc-news .gt-section-title-2 .sec_title{font-size:50px}}
@media (max-width:1199px){.gt-news-section.pc-news .gt-section-title-2 .sec_title{font-size:40px}}
@media (max-width:767px){.gt-news-section.pc-news .gt-section-title-2 .sec_title{font-size:35px}}
@media (max-width:575px){.gt-news-section.pc-news .gt-section-title-2 .sec_title{font-size:30px}}
@media (max-width:470px){.gt-news-section.pc-news .gt-section-title-2 .sec_title{font-size:25px}}

/* card title: template <h4><a> → <p class="pc-news-title"><a>; clone of the h4 globals (146-158 + 248-257) and of
   .gt-news-card-item .gt-news-content h4 / h4 a / h4 a:hover (9781-9795: white link, 2px underline grows in on hover). */
.gt-news-section.pc-news .gt-news-card-item .gt-news-content .pc-news-title{font-family:"Chakra Petch",sans-serif;font-size:24px;font-weight:700;line-height:150%;color:var(--gt-white);text-transform:uppercase;margin:0 0 20px;padding:0}
@media (max-width:1199px){.gt-news-section.pc-news .gt-news-card-item .gt-news-content .pc-news-title{font-size:20px}}
.gt-news-section.pc-news .gt-news-card-item .gt-news-content .pc-news-title a{color:var(--gt-white);background-position:0 95%;background-repeat:no-repeat;background-size:0% 2px;display:inline}
.gt-news-section.pc-news .gt-news-card-item .gt-news-content .pc-news-title a:hover{color:var(--gt-white);background-size:100% 2px;background-image:linear-gradient(180deg,var(--gt-white) 0%,var(--gt-white) 100%)}

/* excerpt: no override — the template card excerpt (index.html 1304) is the body{} default (16px/28px, 600, uppercase, 112-123), p{margin:0}. */

/* image: real 780×402 post covers (2× the template's 390×201 slot) — block-level, natural ratio, no inline baseline gap. */
.gt-news-section.pc-news .gt-news-card-item .gt-news-image img{display:block;height:auto;aspect-ratio:780/402;object-fit:cover}


/* ===== 07-cta.css ===== */
/* 07 · CTA band — scoped overrides for the home-1 gt-cta-bg-section (main-pc.css 2181-2256). main-pc.css is untouched.
   2026-10-16 rework (owner: "looks like a mess"): no baked band art, no floating squiggle shape — the section carries the site's
   carbon texture + top-centre coral glow (pc-bg-carbon--shop, pc-site.css) and the copy is centred (pc-cta-center, pc-site.css).
   Title motion = the template's own SplitText scrub (main.js 557-626) via the eyebrow/title hook classes in the markup. */

/* The template wrapper pads 80px top + 440px left (room for its baked slash panel) and no bottom (its character stood on the
   band's floor). Without the art: even 80px top and bottom, no side padding, at every width. */
.gt-cta-bg-section .gt-cta-bg-wrapper{padding:80px 0}
@media (max-width:991px){.gt-cta-bg-section .gt-cta-bg-wrapper{padding:64px 0}}
/* hairlines separate the band from the dark sections around it (features above, Discord band below) */
.gt-cta-bg-section.pc-cta{border-top:1px solid rgba(255,255,255,.07);border-bottom:1px solid rgba(255,255,255,.07)}

/* H4 "ELITE UNDETECTED ACCESS" = kicker. Centred copy → the template's centred-section kicker (.gt-section-title-2 h6: the two
   44px gradient ticks either side, 11552-11603), not the left-anchored underline of the left-aligned variant.
   SplitText turns the text into .split-line > word > char divs — inline-block + the pseudo ticks survive that. */
.gt-cta-bg-section .gt-cta-content h4{font-size:16px;font-weight:700;letter-spacing:-0.32px;line-height:1;color:var(--gt-white);font-family:"Chakra Petch",sans-serif;position:relative;display:inline-block;margin:0 0 25px;padding:0 60px}
.gt-cta-bg-section .gt-cta-content h4::before{position:absolute;content:"";background:linear-gradient(90deg,#00130B 0%,#f66e61 100%);width:44px;height:1px;left:0;top:8px}
.gt-cta-bg-section .gt-cta-content h4::after{position:absolute;content:"";background:linear-gradient(90deg,#f66e61 0%,#00130B 100%);width:44px;height:1px;right:0;top:8px}
@media (max-width:575px){
  .gt-cta-bg-section .gt-cta-content h4{padding:0}
  .gt-cta-bg-section .gt-cta-content h4::before,.gt-cta-bg-section .gt-cta-content h4::after{display:none}
}

/* "READY TO DOMINATE?" is NOT a heading on live → p.tx-title.sec_title carrying the template's CTA h2 look
   (h2 globals 201-205 + .gt-cta-bg-wrapper .gt-cta-content h2 2205-2223, breakpoint for breakpoint). */
.gt-cta-bg-section .gt-cta-content .sec_title{font-family:"Chakra Petch",sans-serif;font-size:40px;font-weight:700;line-height:112%;color:var(--gt-white);text-transform:uppercase;margin:0}
@media (max-width:991px){.gt-cta-bg-section .gt-cta-content .sec_title{font-size:35px}}
@media (max-width:767px){.gt-cta-bg-section .gt-cta-content .sec_title{font-size:30px}}
@media (max-width:575px){.gt-cta-bg-section .gt-cta-content .sec_title{font-size:25px}}

/* Bullets: the template's ul.gt-list rules are scoped to news-details (10323-10337) → cloned here; the row layout is pc-cta-center's. */
.gt-cta-bg-section .gt-cta-content .gt-list{margin-top:24px;margin-bottom:24px}
.gt-cta-bg-section .gt-cta-content .gt-list li{font-size:16px;font-weight:600;color:var(--gt-text)}
.gt-cta-bg-section .gt-cta-content .gt-list li i{margin-right:10px;color:var(--gt-theme)}

/* Buttons: both live links side by side under the list, symmetric margins (pc-cta-center sets 0 8px 10px). */
.gt-cta-bg-section .gt-cta-content .gt-theme-btn{margin-top:10px}


/* ===== 07b-newsletter.css ===== */
/* 07b · Newsletter band → Discord band — overrides for the home-1 gt-newsletter-section (main-pc.css 1756-1826).
   Every selector is scoped under the section root (.pc-newsletter) and carries more specificity than the template rule it
   adjusts, so it wins whether this sheet loads before or after main-pc.css. main-pc.css is untouched. */

/* 1. Spacing: in home-1 the band follows the 120px-padded brand slider and keeps only mb-4 (24px) before the footer.
      Here it sits directly under the CTA surface (#1a1f2b) → mirror the template's 24px on top so the band floats
      between the two dark panels. */
.pc-newsletter.gt-newsletter-section{margin-top:1.5rem}

/* 2. Title slot: the template's <h4> (globals main-pc.css 149-157 + 248-256: Chakra Petch, uppercase, 24px/700/150%,
      20px ≤1199, white via .gt-newsletter-wrapper h4). Rendered as <p> for the heading budget → same metrics.
      Beats the template's p{margin:0} + body weight 600. */
.pc-newsletter .gt-newsletter-wrapper .pc-nl-title{font-family:"Chakra Petch",sans-serif;font-size:24px;font-weight:700;line-height:150%;color:var(--gt-white);text-transform:uppercase;margin:0;position:relative;z-index:1}
@media (max-width:1199px){.pc-newsletter .gt-newsletter-wrapper .pc-nl-title{font-size:20px}}

/* 3. Form slot: no input, so the button must not use the template's absolute "inside the input" placement
      (main-pc.css 1814-1826: position:absolute; top/right/bottom:4px; padding:12px 30px; static + margin-top:20px ≤470).
      Static button at the template's normal .gt-theme-btn padding; the wrapper's space-between puts it at the right edge,
      and when the band wraps (≤1199, gap:30px) it drops under the title without the extra 20px. */
.pc-newsletter .gt-newsletter-wrapper .pc-nl-form{flex:0 0 auto;position:relative;z-index:1}
.pc-newsletter .gt-newsletter-wrapper .form-clt .gt-theme-btn{position:static;padding:18px 30px;margin:0;white-space:nowrap}

/* 4. Shape slot: the template parks a 325×117 controller cutout at left:47% / bottom:0 (hidden ≤1199 by main-pc.css
      1769-1773). Ours is the Discord glyph, sized to the same footprint, resting on the band's bottom edge like the
      controller (the section's .fix clips the few px that sit below it). */
.pc-newsletter .gt-newsletter-wrapper .shape{line-height:0;pointer-events:none}
.pc-newsletter .gt-newsletter-wrapper .shape i{display:block;font-size:112px;line-height:1;margin-bottom:-12px;color:var(--gt-white);opacity:.9;
  background:linear-gradient(180deg,#fff 0%,#ffd2c9 55%,var(--gt-theme) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.45))}

/* 5. Band below the desktop breakpoint: the baked-in photo is a 1920×222 strip whose left third is shaded for the
      title. Once the container is narrower than the strip (≤1199, the same range in which the template wraps the band
      and hides the shape) cover crops to the bright helmet/slash region, so the title would lose contrast. Add the same
      left shade the desktop title enjoys as an overlay layer under the content (title/form are z-index:1); on phones,
      where the band is taller than it is wide-ish, also keep the helmet in frame instead of the centre slice. */
@media (max-width:1199px){
  .pc-newsletter .gt-newsletter-wrapper::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(19,23,34,.7) 0%,rgba(19,23,34,.45) 55%,rgba(19,23,34,.25) 100%);pointer-events:none}
}
@media (max-width:767px){
  .pc-newsletter .gt-newsletter-wrapper.bg-cover{background-position:34% center}
}


/* ===== 08-footer.css ===== */
/* 08 · FOOTER — PrivateCheatz overrides on top of main-pc.css (home-1 .gt-footer-section, main-pc.css 4288-4425).
   Every selector is scoped under the section root (.pc-footer) and carries at least the template's specificity,
   so these win regardless of sheet order. main-pc.css is untouched. */

/* 1. Notch triangles (::before/::after, main-pc.css 4396-4425). The template paints them rgb(28,29,32) — that is its
      ORIGINAL --gt-bg-2 (main.css 54), i.e. the footer's own background: two footer-coloured wedges that bite 206px up
      into the band above, giving the footer its angled top corners on wide screens (≥1601px; the template hides them
      below that — unchanged). Re-point the colour to the rebranded footer surface so the shape survives the recolour. */
.pc-footer.gt-footer-section::before,
.pc-footer.gt-footer-section::after{background:var(--gt-bg-2)}

/* 2. Logo: 1280×214 PNG; main-pc.css has no .gt-footer-logo img rule and no img{max-width} → would render at 1280px.
      Same treatment as the header logo (pc-site.css). */
.pc-footer .gt-footer-logo{display:inline-block;line-height:0}
.pc-footer .gt-footer-logo img{height:34px;width:auto;max-width:none;display:block}
@media (max-width:575px){.pc-footer .gt-footer-logo img{height:28px}}

/* 3. Widget heads. The template ships <h5> (20px/700/150%, uppercase, white — main-pc.css 149-158 + 259-263).
      RESOURCES / SUPPORTED GAME HACKS are <h4> (live outline level); "Need help?" / "Latest posts" are <p class="pc-widget-title">
      (heading budget). All four get the identical h5 look. */
.pc-footer .gt-footer-widget-wrapper .gt-footer-widget-items .gt-widget-head h4,
.pc-footer .gt-footer-widget-wrapper .gt-footer-widget-items .gt-widget-head .pc-widget-title{
  font-family:"Chakra Petch",sans-serif;font-size:20px;font-weight:700;line-height:150%;
  color:var(--gt-white);text-transform:uppercase;margin:0;padding:0;
}

/* 4. Casing: the template's body{text-transform:uppercase;font-weight:600;line-height:28px} is the demo's look for the about
      paragraph (max-width 450px, main-pc.css 4305), the link labels and the bottom bar → all left to the template (no override). */

/* 5. Socials: the template centres a FontAwesome <i> inside a 40×40 box via line-height; X ships as an inline SVG
      (fa-x-twitter is absent from the bundled all.min.css) → centre with flex so glyph and SVG sit identically. */
.pc-footer .gt-footer-widget-wrapper .gt-footer-widget-items .gt-footer-content .gt-social-icon a{
  display:inline-flex;align-items:center;justify-content:center;font-weight:400;
}
.pc-footer .gt-social-icon a .pc-x-icon{display:block;width:15px;height:15px}

/* 6. Latest posts — the template's "Recent Post" widget rules are scoped to the news sidebar
      (.gt-main-sideber …, main-pc.css 10219-10240) → cloned 1:1 under the footer scope, incl. the ≤1199 flex-wrap; thumb = 80×80
      like post-1.jpg. The title is a <p> (heading budget) carrying the template's h6 metrics (globals 149-158 + 265-268:
      Chakra Petch 16px/700, uppercase, body line-height 28px, margin-bottom 5px); the date <li> keeps the body look (16px/600,
      uppercase, --gt-text) exactly like the template's widget. */
.pc-footer .gt-recent-post-area .gt-recent-items{display:flex;align-items:center;gap:20px}
@media (max-width:1199px){.pc-footer .gt-recent-post-area .gt-recent-items{flex-wrap:wrap}}
.pc-footer .gt-recent-post-area .gt-recent-items:not(:last-child){margin-bottom:20px}
.pc-footer .gt-recent-post-area .gt-recent-thumb{flex:0 0 80px}
.pc-footer .gt-recent-post-area .gt-recent-thumb img{display:block;width:80px;height:80px;object-fit:cover}
.pc-footer .gt-recent-post-area .gt-recent-content{min-width:0}
.pc-footer .gt-recent-post-area .gt-recent-content .pc-post-title{
  font-family:"Chakra Petch",sans-serif;font-size:16px;font-weight:700;line-height:28px;
  text-transform:uppercase;color:var(--gt-white);margin:0 0 5px;padding:0;transition:all .4s ease-in-out;
}
.pc-footer .gt-recent-post-area .gt-recent-content .pc-post-title a{color:var(--gt-white)}
.pc-footer .gt-recent-post-area .gt-recent-content .pc-post-title a:hover{color:var(--gt-theme)}
.pc-footer .gt-recent-post-area .gt-recent-content ul li{color:var(--gt-text)}

/* 7. SUPPORTED GAME HACKS — 157 links in ul.gt-list-area. The template list is a single vertical stack (20px gaps ≈ 7,500px tall)
      → CSS columns 4 (desktop) / 3 (tablet) / 2 (phone), markup untouched (plain ul > li > a). A top rule mirrors .footer-bottom's
      divider so the block reads as its own band. Long game names stay sentence-case (wall of caps otherwise). */
.pc-footer .gt-footer-widget-wrapper .pc-footer-games{margin-top:50px;padding-top:40px;border-top:1px solid rgba(255,255,255,.2)}
.pc-footer .pc-footer-games .gt-list-area{
  -webkit-columns:4;columns:4;
  -webkit-column-gap:30px;column-gap:30px;
}
.pc-footer .gt-footer-widget-wrapper .pc-footer-games .gt-list-area li{
  -webkit-column-break-inside:avoid;break-inside:avoid;page-break-inside:avoid;
  margin:0 0 6px;
  padding-right:10px;
  font-size:14px;line-height:22px;font-weight:400;text-transform:none;
}
.pc-footer .gt-footer-widget-wrapper .pc-footer-games .gt-list-area li:not(:last-child){margin-bottom:6px}
/* ≥1400 the container is 1386px → five 253px columns still fit the longest name ("MechWarrior 5: Mercenaries Hacks")
   on one line; 157 links drop from 40 to 32 rows (≈ −220px of footer) */
@media (min-width:1400px){
  .pc-footer .pc-footer-games .gt-list-area{-webkit-columns:5;columns:5}
}
/* the template hover nudges the <li> margin-left:5px — inside CSS columns that reflows neighbouring columns;
   move the same 5px nudge onto the <a> (transform, no layout change) so the look is identical */
.pc-footer .gt-footer-widget-wrapper .pc-footer-games .gt-list-area li:hover{margin-left:0}
.pc-footer .gt-footer-widget-wrapper .pc-footer-games .gt-list-area li a{display:inline-block;transition:all .4s ease-in-out}
.pc-footer .gt-footer-widget-wrapper .pc-footer-games .gt-list-area li:hover a{transform:translateX(5px);color:var(--gt-theme)}
@media (max-width:991px){
  .pc-footer .pc-footer-games .gt-list-area{-webkit-columns:3;columns:3}
  .pc-footer .gt-footer-widget-wrapper .pc-footer-games{margin-top:40px;padding-top:30px}
}
@media (max-width:767px){
  .pc-footer .pc-footer-games .gt-list-area{-webkit-columns:2;columns:2;-webkit-column-gap:20px;column-gap:20px}
  .pc-footer .gt-footer-widget-wrapper .pc-footer-games .gt-list-area li{font-size:13px;line-height:20px;padding-right:6px}
}

/* 8. Bottom bar: template layout + typography untouched (p left, ul.gt-footer-list right, centred ≤767; copyright and the
      three legal labels in the body's uppercase/600 exactly like the demo's "© 2026 XPORTS. ALL RIGHTS RESERVED."). */
/* 8b. Clearance for the template's back-to-top button (#gt-back-top: fixed, 50×50, right/bottom 30px, main.js shows it only at the
      very end of the page — i.e. exactly when this bar is on screen). Measured at 1440: the button (1360-1410) covered the last
      link "PRIVACY" (1349-1413). ≥768 the links are right-aligned → keep them ≥ 72px inside the container edge; ≤767 the bar is
      centred → add bottom room so the links sit above the button instead of beside it. */
@media (min-width:768px){
  .pc-footer .footer-bottom .footer-wrapper{padding-right:72px}
}
@media (max-width:767px){
  .pc-footer .footer-bottom{padding-bottom:96px}
}

/* 9. Motion: WOW fadeInUp on the four columns + bottom bar is the template's (WOW still owns visibility — never forced here);
      under reduced-motion the reveal is instant instead of animated. */
@media (prefers-reduced-motion:reduce){
  .pc-footer .wow{animation:none!important}
}

/* integrator: keep the footer about paragraph sentence-case like every other prose block on the page (the demo's all-caps body rule
   is fine for its 3-line blurb; ours is ~45 words and read heavier in caps) */
.pc-footer .gt-footer-widget-wrapper .gt-footer-widget-items .gt-footer-content p{text-transform:none;font-weight:400}


/* ===== 02-grid.css ===== */
/* 02 · GAME LIBRARY GRID (#hack-search) — the old live grid (live-oxygen/17-block-1.php) restyled with the template's tokens.
   Every rule is scoped under .pc-games .pc-grid (prefix pc-grid-); the old live site's bare .search-wrap/.game-module names are never used.
   Tokens: --gt-theme #f66e61 · --gt-bg #131722 · --gt-bg-2 #1a1f2b · --gt-text #aeb6c4 · --gt-white; border rgba(255,255,255,.08).
   Toolbar = row 1 the alpha bar (.pc-grid-alpha: [All games] · letter squares · search) + row 2 chips · price · count.
   Paging (02-grid.js): the cards container gets .pc-grid--paged and the cards beyond the current page .pc-grid-card--more; only that
   pair hides a card (plain display:none, no height animation). The "Load more" row (.pc-grid-more) is appended by the JS.
   Motion policy: hover/active transitions only (≤ .25s), no per-card animation, nothing hidden until JS runs (the no-results box is the
   one [hidden] element, by design). Only the toolbar carries a wow fadeInUp (markup); the cards container has none — the template keyframe
   translates by 100% of own height, which on a ~14,500px grid would make every card streak upward on reveal. */

.pc-games .pc-grid{margin:50px auto 0;max-width:1440px;text-transform:none;font-weight:600}
@media (max-width:991px){.pc-games .pc-grid{margin-top:40px}}

/* =========================================================================
   Toolbar: row 1 alpha bar (All games · letters · search) · row 2 chips · price · count
   ========================================================================= */
.pc-games .pc-grid .pc-grid-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:14px 16px;margin:0 0 30px}

/* alpha bar: a dark rounded strip that always takes the full first row */
.pc-games .pc-grid .pc-grid-alpha{display:flex;flex:1 1 100%;flex-wrap:wrap;align-items:center;gap:10px;min-width:0;padding:14px 18px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);border-radius:10px}
.pc-games .pc-grid .pc-grid-letter{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;width:40px;height:40px;margin:0;padding:0;background:rgba(255,255,255,.05);border:1px solid transparent;border-radius:8px;color:#f3f1ee;font-family:"Chakra Petch",sans-serif;font-size:14px;font-weight:700;line-height:1;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:border-color .2s ease,background-color .2s ease,color .2s ease}
.pc-games .pc-grid .pc-grid-letter:hover{border-color:rgba(246,110,97,.5);color:#fff}
.pc-games .pc-grid .pc-grid-letter:focus-visible{outline:2px solid var(--gt-white);outline-offset:2px}
.pc-games .pc-grid .pc-grid-letter[aria-pressed=true]{border-color:var(--gt-theme);background:rgba(246,110,97,.12);color:#fff}
.pc-games .pc-grid .pc-grid-letter--all{width:auto;padding:0 16px;letter-spacing:.5px}

/* search (anchor #hack-search; scroll-margin keeps it clear of the sticky header when deep-linked) — right end of the alpha bar.
   It grows into whatever room its row leaves (≥260px); with 20+ letters that is usually its own full-width row under the letters. */
.pc-games .pc-grid .pc-grid-search{position:relative;flex:1 1 260px;min-width:260px;margin-left:auto}
.pc-games .pc-grid .pc-grid-search i{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:15px;line-height:1;color:var(--gt-text);pointer-events:none;transition:color .25s ease}
.pc-games .pc-grid .pc-grid-search:focus-within i{color:var(--gt-theme)}
.pc-games .pc-grid .pc-grid-input{display:block;width:100%;height:44px;margin:0;padding:0 16px 0 44px;background:var(--gt-bg-2);border:1px solid rgba(255,255,255,.08);border-radius:8px;color:var(--gt-white);font-family:"Chakra Petch",sans-serif;font-size:15px;font-weight:600;line-height:42px;outline:none;scroll-margin-top:120px;-webkit-appearance:none;appearance:none;transition:border-color .25s ease,box-shadow .25s ease}
.pc-games .pc-grid .pc-grid-input::placeholder{color:var(--gt-text);opacity:.85}
.pc-games .pc-grid .pc-grid-input:hover{border-color:rgba(255,255,255,.18)}
.pc-games .pc-grid .pc-grid-input:focus{border-color:var(--gt-theme);box-shadow:0 0 0 3px rgba(246,110,97,.2)}
.pc-games .pc-grid .pc-grid-input::-webkit-search-decoration{-webkit-appearance:none}
.pc-games .pc-grid .pc-grid-input::-webkit-search-cancel-button{-webkit-appearance:none;height:14px;width:14px;cursor:pointer;background:var(--gt-text);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 2l10 10M12 2L2 12' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 2l10 10M12 2L2 12' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat}

/* chips + price select */
.pc-games .pc-grid .pc-grid-filters{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.pc-games .pc-grid .pc-grid-chip{display:inline-flex;align-items:center;gap:8px;height:44px;margin:0;padding:0 18px;background:var(--gt-bg-2);border:1px solid rgba(255,255,255,.08);border-radius:6px;color:var(--gt-text);font-family:"Chakra Petch",sans-serif;font-size:13px;font-weight:700;letter-spacing:.5px;line-height:1;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:border-color .2s ease,background-color .2s ease,color .2s ease}
.pc-games .pc-grid .pc-grid-chip::before{content:"";width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.18);transition:background-color .2s ease,box-shadow .2s ease}
.pc-games .pc-grid .pc-grid-chip:hover{border-color:var(--gt-theme);color:var(--gt-white)}
.pc-games .pc-grid .pc-grid-chip:focus-visible{outline:2px solid var(--gt-white);outline-offset:2px}
.pc-games .pc-grid .pc-grid-chip[aria-pressed=true]{background:rgba(246,110,97,.15);border-color:var(--gt-theme);color:var(--gt-white)}
.pc-games .pc-grid .pc-grid-chip[aria-pressed=true]::before{background:var(--gt-theme);box-shadow:0 0 8px var(--gt-theme)}

/* native <select> (before niceSelect runs / without JS) */
.pc-games .pc-grid select.pc-grid-price{height:44px;margin:0;padding:0 40px 0 18px;background:var(--gt-bg-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23aeb6c4' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") right 18px center/10px 6px no-repeat;border:1px solid rgba(255,255,255,.08);border-radius:6px;color:var(--gt-text);font-family:"Chakra Petch",sans-serif;font-size:13px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;cursor:pointer;outline:none;-webkit-appearance:none;appearance:none;transition:border-color .2s ease}
.pc-games .pc-grid select.pc-grid-price:hover,.pc-games .pc-grid select.pc-grid-price:focus{border-color:var(--gt-theme)}
.pc-games .pc-grid select.pc-grid-price option{background:var(--gt-bg-2);color:var(--gt-white)}
/* niceSelect replacement (main.js inits .single-select; the plugin copies the select's classes onto its div) — dark restyle of nice-select.css */
.pc-games .pc-grid .nice-select.pc-grid-price{float:none;width:auto;min-width:160px;height:44px;margin:0;padding:0 44px 0 18px;background:var(--gt-bg-2);border:1px solid rgba(255,255,255,.08);border-radius:6px;color:var(--gt-text);font-family:"Chakra Petch",sans-serif;font-size:13px;font-weight:700;letter-spacing:.5px;line-height:42px;text-transform:uppercase;transition:border-color .2s ease,color .2s ease}
.pc-games .pc-grid .nice-select.pc-grid-price:hover,.pc-games .pc-grid .nice-select.pc-grid-price:focus,.pc-games .pc-grid .nice-select.pc-grid-price.open{border-color:var(--gt-theme);color:var(--gt-white)}
.pc-games .pc-grid .nice-select.pc-grid-price::after{right:18px;width:7px;height:7px;margin-top:-5px;border-color:var(--gt-text)}
.pc-games .pc-grid .nice-select.pc-grid-price .current{color:inherit}
.pc-games .pc-grid .nice-select.pc-grid-price .list{min-width:100%;margin-top:6px;padding:4px 0;background:var(--gt-bg-2);border:1px solid rgba(255,255,255,.08);border-radius:6px;box-shadow:0 14px 30px rgba(0,0,0,.45)}
.pc-games .pc-grid .nice-select.pc-grid-price .option{min-height:38px;padding:0 18px;color:var(--gt-text);font-weight:700;line-height:38px;transition:background-color .2s ease,color .2s ease}
.pc-games .pc-grid .nice-select.pc-grid-price .option:hover,.pc-games .pc-grid .nice-select.pc-grid-price .option.focus,.pc-games .pc-grid .nice-select.pc-grid-price .option.selected.focus{background:rgba(246,110,97,.12);color:var(--gt-white)}
.pc-games .pc-grid .nice-select.pc-grid-price .option.selected{color:var(--gt-white)}

/* live count */
.pc-games .pc-grid .pc-grid-count{margin-left:auto;font-size:13px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--gt-text);white-space:nowrap}

/* =========================================================================
   Grid: 4 → 3 → 2 → 1 columns, 24px gap
   ========================================================================= */
.pc-games .pc-grid .pc-grid-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
@media (max-width:1199px){.pc-games .pc-grid .pc-grid-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:991px){.pc-games .pc-grid .pc-grid-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:575px){.pc-games .pc-grid .pc-grid-cards{grid-template-columns:minmax(0,1fr)}}

/* card */
.pc-games .pc-grid .pc-grid-card{display:flex;flex-direction:column;min-width:0;background:var(--gt-bg-2);border:1px solid rgba(255,255,255,.08);border-radius:6px;overflow:hidden;transition:border-color .25s ease}
.pc-games .pc-grid .pc-grid-card:hover{border-color:var(--gt-theme)}

/* header: 16:9 cover, bottom fade, centred name, badges */
.pc-games .pc-grid .pc-grid-head{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--gt-bg);text-decoration:none}
.pc-games .pc-grid a.pc-grid-head:focus-visible{outline:2px solid var(--gt-white);outline-offset:-2px}
.pc-games .pc-grid .pc-grid-cover{display:block;width:100%;height:100%;object-fit:cover;object-position:center;opacity:.85;transition:transform .25s ease,opacity .25s ease}
.pc-games .pc-grid .pc-grid-card:hover .pc-grid-cover{transform:scale(1.04);opacity:1}
.pc-games .pc-grid .pc-grid-cover--none{background:linear-gradient(135deg,#242a38 0%,var(--gt-bg) 100%)}
.pc-games .pc-grid .pc-grid-fade{position:absolute;left:0;right:0;bottom:0;height:75%;background:linear-gradient(180deg,rgba(26,31,43,0) 0%,rgba(26,31,43,.55) 55%,var(--gt-bg-2) 100%);pointer-events:none}
.pc-games .pc-grid .pc-grid-name{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:36px 16px 14px;text-align:center;font-family:"Chakra Petch",sans-serif;font-size:16px;font-weight:700;letter-spacing:1.5px;line-height:1.25;color:var(--gt-white);text-transform:uppercase;text-shadow:0 2px 12px rgba(0,0,0,.8);transition:color .25s ease}
.pc-games .pc-grid a.pc-grid-head:hover .pc-grid-name{color:var(--gt-theme)}
.pc-games .pc-grid .pc-grid-badge{position:absolute;top:12px;padding:5px 8px;font-family:"Chakra Petch",sans-serif;font-size:11px;font-weight:700;letter-spacing:.5px;line-height:1;text-transform:uppercase;color:var(--gt-white);border-radius:3px}
.pc-games .pc-grid .pc-grid-badge--online{left:12px;background:var(--gt-theme)}
.pc-games .pc-grid .pc-grid-badge--trend{right:12px;background:rgba(19,23,34,.65);border:1px solid rgba(255,255,255,.55)}

/* product rows */
.pc-games .pc-grid .pc-grid-list{display:flex;flex-direction:column;gap:6px;flex:1 1 auto;padding:14px 14px 16px}
.pc-games .pc-grid .pc-grid-item{display:flex;align-items:center;gap:10px;min-width:0;padding:9px 12px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);border-radius:4px;color:var(--gt-white);font-size:13px;font-weight:700;line-height:1.3;text-decoration:none;transition:border-color .2s ease,background-color .2s ease,transform .2s ease}
.pc-games .pc-grid .pc-grid-item:hover{border-color:var(--gt-theme);background:rgba(246,110,97,.06);color:var(--gt-white);transform:translateX(3px)}
.pc-games .pc-grid .pc-grid-item:focus-visible{outline:2px solid var(--gt-theme);outline-offset:2px}
.pc-games .pc-grid .pc-grid-item-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#e1e1e6}
.pc-games .pc-grid .pc-grid-item-price{flex:0 0 auto;padding:3px 8px;background:rgba(0,0,0,.3);border-radius:3px;color:var(--gt-text);font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;transition:color .2s ease}
.pc-games .pc-grid .pc-grid-item:hover .pc-grid-item-price{color:var(--gt-theme)}
.pc-games .pc-grid .pc-grid-dot{flex:0 0 auto;width:7px;height:7px;border-radius:50%;color:#f87171;background:currentColor;box-shadow:0 0 6px currentColor}
.pc-games .pc-grid .pc-grid-dot.t-on{color:#4ade80}
.pc-games .pc-grid .pc-grid-dot.t-up{color:#fd7e14}
.pc-games .pc-grid .pc-grid-dot.t-test{color:#ffeb3b}
.pc-games .pc-grid .pc-grid-dot.t-off{color:#f87171}
.pc-games .pc-grid .pc-grid-empty{margin:0;padding:22px 14px;text-align:center;border:1px dashed rgba(255,255,255,.12);border-radius:4px;color:var(--gt-text);font-size:12px;font-weight:600;letter-spacing:.5px;text-transform:uppercase}

/* filter states (02-grid.js) */
.pc-games .pc-grid .pc-grid-hide{display:none!important}
.pc-games .pc-grid .pc-grid-none{grid-column:1/-1;padding:40px 16px;text-align:center;color:var(--gt-white);font-size:16px;font-weight:600}
.pc-games .pc-grid .pc-grid-none[hidden]{display:none}
.pc-games .pc-grid .pc-grid-reset{margin:0 0 0 6px;padding:0;background:none;border:0;color:var(--gt-theme);font-family:"Chakra Petch",sans-serif;font-weight:700;text-transform:uppercase;text-decoration:underline;text-underline-offset:3px;cursor:pointer;transition:color .2s ease}
.pc-games .pc-grid .pc-grid-reset:hover{color:var(--gt-white)}

/* paging (02-grid.js): only the container+card class pair hides a card — a plain toggle, no height animation; no filter active ⇒ paged */
.pc-games .pc-grid .pc-grid-cards.pc-grid--paged .pc-grid-card--more{display:none}
/* "Load more games (N more)" row — appended by the JS after the cards container; the template button (.gt-theme-btn.gt-style-border)
   already carries the look, these rules only centre it and neutralise <button> defaults */
.pc-games .pc-grid .pc-grid-more{display:flex;justify-content:center;margin-top:32px}
.pc-games .pc-grid .pc-grid-more[hidden]{display:none}
.pc-games .pc-grid .pc-grid-more-btn{background-color:transparent;line-height:inherit;cursor:pointer}
.pc-games .pc-grid .pc-grid-more-btn:hover{border-color:var(--gt-theme);color:var(--gt-theme)}
.pc-games .pc-grid .pc-grid-more-btn:focus-visible{outline:2px solid var(--gt-white);outline-offset:3px}

/* =========================================================================
   Mobile: toolbar stacks, 16px gutters (bootstrap's container-fluid gives 12px; +4px here), nothing wider than the viewport.
   The stacked toolbar and the 16px gutter switch together at the same 767px breakpoint.
   Alpha bar: 36px letters wrap into rows (8px gap); the search drops to its own full-width row under them.
   ========================================================================= */
@media (max-width:767px){
  .pc-games .pc-grid{padding:0 4px}
  .pc-games .pc-grid .pc-grid-toolbar{flex-direction:column;align-items:stretch;gap:12px}
  .pc-games .pc-grid .pc-grid-alpha{flex:0 0 auto;gap:8px;padding:12px}
  .pc-games .pc-grid .pc-grid-letter{width:36px;height:36px;font-size:13px}
  .pc-games .pc-grid .pc-grid-letter--all{width:auto;padding:0 14px}
  .pc-games .pc-grid .pc-grid-search{flex:1 1 100%;min-width:0;margin:4px 0 0}
  .pc-games .pc-grid .pc-grid-filters{gap:8px}
  .pc-games .pc-grid .pc-grid-chip{flex:1 1 auto;justify-content:center;padding:0 12px}
  .pc-games .pc-grid select.pc-grid-price,.pc-games .pc-grid .nice-select.pc-grid-price{flex:1 1 100%;width:100%}
  .pc-games .pc-grid .pc-grid-count{margin-left:0;text-align:center;white-space:normal}
  .pc-games .pc-grid .pc-grid-more{margin-top:28px}
  .pc-games .pc-grid .pc-grid-more-btn{min-width:0;width:100%}
}
@media (max-width:575px){
  .pc-games .pc-grid .pc-grid-name{font-size:18px}
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:reduce){
  .pc-games .pc-grid .pc-grid-input,.pc-games .pc-grid .pc-grid-search i,.pc-games .pc-grid .pc-grid-letter,.pc-games .pc-grid .pc-grid-chip,.pc-games .pc-grid .pc-grid-chip::before,
  .pc-games .pc-grid select.pc-grid-price,.pc-games .pc-grid .nice-select.pc-grid-price,.pc-games .pc-grid .nice-select.pc-grid-price .option,
  .pc-games .pc-grid .pc-grid-card,.pc-games .pc-grid .pc-grid-cover,.pc-games .pc-grid .pc-grid-name,.pc-games .pc-grid .pc-grid-item,
  .pc-games .pc-grid .pc-grid-item-price,.pc-games .pc-grid .pc-grid-reset,.pc-games .pc-grid .pc-grid-more-btn{transition:none}
  .pc-games .pc-grid .pc-grid-card:hover .pc-grid-cover,.pc-games .pc-grid .pc-grid-item:hover{transform:none}
}


/* ===== 01-extras-rotate.css ===== */
/* 01 · ABOUT — feature-box pager: two "pages" of 4 boxes share the template's 2×2 .gt-about-box-wrapper.
   Markup: .gt-about-box-wrapper > .pc-feat-pages > .pc-feat-page[data-page] (×2, each = two .gt-about-box-item rows) ; the pager
   .pc-feat-dots (role=tablist) sits right AFTER the wrapper so the wrapper keeps its exact height and stays the positioned ancestor of
   the template's border lights (main-pc.purged.css 296-316: ::before rides the top line, ::after the row divider at bottom:49.5%).
   01-extras-rotate.js adds .pc-feat-rotate to the wrapper; before/without it nothing is hidden — the two pages simply stack (8 boxes, 4 rows). */

/* pages share one grid cell → the wrapper reserves the taller page's height and never jumps between pages */
.gt-about-section.pc-extras .gt-about-box-wrapper.pc-feat-rotate .pc-feat-pages{display:grid;grid-template-columns:minmax(0,1fr)}
.gt-about-section.pc-extras .gt-about-box-wrapper.pc-feat-rotate .pc-feat-page{grid-area:1/1;display:flex;flex-direction:column;min-width:0;opacity:1;visibility:visible;transition:opacity .3s ease,visibility 0s linear 0s}
/* both rows split the cell evenly on every page → the ::after light stays on the divider whichever page is showing */
.gt-about-section.pc-extras .gt-about-box-wrapper.pc-feat-rotate .pc-feat-page > .gt-about-box-item{flex:1 1 0}
/* subgrid engines (Chrome 117+, Safari 16+, Firefox 71+): row 1 of both pages shares one track, row 2 the other, so each track is the
   taller of the two pages' rows and the wrapper is exactly today's 4-box height (page-1 captions are kept ≤ page-0's widths); the divider
   sits at the same y on both pages. `auto` not `1fr`: 1fr would equalise the two rows and add a line below 1200px where the template
   already hides the ::after light. Flex above is the fallback. */
@supports (grid-template-rows:subgrid){
  .gt-about-section.pc-extras .gt-about-box-wrapper.pc-feat-rotate .pc-feat-pages{grid-template-rows:auto auto}
  .gt-about-section.pc-extras .gt-about-box-wrapper.pc-feat-rotate .pc-feat-page{grid-area:1/1/3/2;display:grid;grid-template-rows:subgrid;grid-template-columns:minmax(0,1fr)}
  .gt-about-section.pc-extras .gt-about-box-wrapper.pc-feat-rotate .pc-feat-page > .gt-about-box-item{flex:none;min-width:0}
}
.gt-about-section.pc-extras .gt-about-box-wrapper.pc-feat-rotate .pc-feat-page:not(.is-active){opacity:0;visibility:hidden;pointer-events:none;transition:opacity .3s ease,visibility 0s linear .3s}
/* first two frames after JS collapses the pages: no fade, so page 1 never ghosts over page 0 (01-extras-rotate.js removes the class) */
.gt-about-section.pc-extras .gt-about-box-wrapper.pc-feat-rotate.pc-feat-init .pc-feat-page{transition:none}
@media (prefers-reduced-motion:reduce){
  .gt-about-section.pc-extras .gt-about-box-wrapper.pc-feat-rotate .pc-feat-page,
  .gt-about-section.pc-extras .gt-about-box-wrapper.pc-feat-rotate .pc-feat-page:not(.is-active){transition:none}
}

/* pager — the template's .swiper-dot bullets (main-pc.purged.css 3305-3344) at 8px, 15px apart, accent + 20px ring when active; 24px hit area */
.gt-about-section.pc-extras .pc-feat-dots{display:none;align-items:center;gap:3px;margin:4px 0 0 -12px;padding:0;line-height:0}
/* the pager only exists once the JS pages the boxes (no-JS = 8 boxes stacked, no inert buttons) */
.gt-about-section.pc-extras .gt-about-box-wrapper.pc-feat-rotate ~ .pc-feat-dots{display:flex}
.gt-about-section.pc-extras .pc-feat-dots button{position:relative;display:block;width:32px;height:32px;margin:0;padding:0;border:0;background:transparent;cursor:pointer;-webkit-appearance:none;appearance:none} /* 32px hit box, 8px dot */
.gt-about-section.pc-extras .pc-feat-dots button::before{content:"";position:absolute;top:50%;left:50%;width:8px;height:8px;transform:translate(-50%,-50%);background-color:var(--gt-white);transition:background-color .3s ease}
.gt-about-section.pc-extras .pc-feat-dots button::after{content:"";position:absolute;top:50%;left:50%;width:20px;height:20px;transform:translate(-50%,-50%);border:1px solid var(--gt-theme);opacity:0;transition:opacity .3s ease}
.gt-about-section.pc-extras .pc-feat-dots button:hover::before{background-color:var(--gt-theme)}
.gt-about-section.pc-extras .pc-feat-dots button[aria-selected="true"]::before{background-color:var(--gt-theme)}
.gt-about-section.pc-extras .pc-feat-dots button[aria-selected="true"]::after{opacity:1}
.gt-about-section.pc-extras .pc-feat-dots button:focus{outline:0}
.gt-about-section.pc-extras .pc-feat-dots button:focus-visible{outline:2px solid var(--gt-theme);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  .gt-about-section.pc-extras .pc-feat-dots button::before,
  .gt-about-section.pc-extras .pc-feat-dots button::after{transition:none}
}


/* ===== 02b-showcase.css ===== */
/* 02b · SHOWCASE — "See the cheats in action" as a carousel (scoped to the section root .pc-showcase; loads after main-pc.css,
   swiper-bundle.min.css and 02b-video.css). Each slide is the template's home-1 video panel (.gt-video-wrapper: padding 130/120
   → 60 → 50 → 40 → 30 by breakpoint, cut-corner clip-path, ::before gradient rgba(11,14,19,0 → .9), content left, play ring
   right — main-pc.css 2980-3086); the panel's background-image becomes an absolutely positioned <img> under that gradient.
   The eyebrow/title/button metrics come from 02b-video.css (.gt-video-section.pc-video …) — the section keeps the pc-video class.
   Motion: Swiper speed 600 (track), 0 under reduced motion; every other transition ≤ .3s; nothing is hidden until JS runs
   (without Swiper the flex wrapper shows slide 1, the rest overflow-hidden). */

/* ---- slider box: equal-height slides (swiper-bundle sets .swiper-slide{height:100%} = auto → stretch instead) ---- */
.pc-showcase .pc-showcase-slider{position:relative;overflow:hidden}
.pc-showcase .pc-showcase-slider .swiper-slide{height:auto}
/* no overflow:hidden here: the wrapper's clip-path already clips the img, and a clipped panel would hide content that outgrows it */
.pc-showcase .pc-showcase-panel{height:100%;background-color:#131722}

/* ---- background image: below the template's gradient (::before is z-index:-1 inside the wrapper's own stacking context) ---- */
.pc-showcase .pc-showcase-panel .pc-showcase-img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2;pointer-events:none;margin:0;display:block}

/* ---- controls: dots bottom-left, arrows bottom-right, overlaid inside the panel's padding box (≥992) ---- */
.pc-showcase .pc-showcase-controls{position:absolute;left:120px;right:120px;bottom:36px;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:20px;pointer-events:none}
.pc-showcase .pc-showcase-controls > *{pointer-events:auto}
@media (max-width:1199px){.pc-showcase .pc-showcase-controls{left:60px;right:60px;bottom:30px}}
/* 992–1199: the template's 60px panel padding leaves the overlaid dots touching the CTA button; give the controls row its own room
   (button bottom ≥ 24px above the dots' hit box, tolerant of a two-line label). Not applied ≤991 where the controls are in flow. */
@media (min-width:992px) and (max-width:1199px){.pc-showcase .pc-showcase-panel{padding-bottom:84px}}
@media (max-width:991px){
  /* stacked layouts: the controls sit under the panel in flow (the panel wraps text + ring there and has no spare room) */
  .pc-showcase .pc-showcase-controls{position:static;margin-top:20px;left:auto;right:auto;bottom:auto}
}

/* dots: 24×3 bars (36 when active, accent), 15px tall hit area via content-box padding */
.pc-showcase .pc-showcase-dots{display:flex;align-items:center;gap:4px;min-height:15px}
.pc-showcase .pc-showcase-dots .swiper-pagination-bullet{display:block;box-sizing:content-box;width:24px;height:3px;padding:6px 0;margin:0;border-radius:0;background-color:rgba(255,255,255,.35);background-clip:content-box;opacity:1;cursor:pointer;transition:background-color .25s ease,width .25s ease}
.pc-showcase .pc-showcase-dots .swiper-pagination-bullet:hover{background-color:rgba(255,255,255,.7)}
.pc-showcase .pc-showcase-dots .swiper-pagination-bullet.swiper-pagination-bullet-active{width:36px;background-color:#f66e61}
.pc-showcase .pc-showcase-dots .swiper-pagination-bullet:focus-visible{outline:2px solid #f66e61;outline-offset:2px}
.pc-showcase .pc-showcase-dots.swiper-pagination-lock{display:none}

/* arrows: the template's .array-buttons (main-pc.css 7706-7770) with the diagonal icon rotation reset for left/right arrows,
   transitions ≤ .3s, explicit button reset, disabled ends (loop:false) dimmed */
.pc-showcase .pc-showcase-arrows{gap:12px;flex-wrap:nowrap}
.pc-showcase .pc-showcase-arrows button{padding:0;margin:0;cursor:pointer;font-size:16px;appearance:none;-webkit-appearance:none;transition:background-color .25s ease,color .25s ease,border-color .25s ease}
.pc-showcase .pc-showcase-arrows .array-next{border:1px solid var(--gt-white)}
.pc-showcase .pc-showcase-arrows .array-next:hover{border-color:var(--gt-theme)}
.pc-showcase .pc-showcase-arrows button i{transform:none;transition:none}
.pc-showcase .pc-showcase-arrows button:hover i{transform:none}
.pc-showcase .pc-showcase-arrows button:focus-visible{outline:2px solid #f66e61;outline-offset:3px}
.pc-showcase .pc-showcase-arrows button.swiper-button-disabled{opacity:.35;cursor:default;pointer-events:none}
.pc-showcase .pc-showcase-arrows.swiper-navigation-lock{display:none}

/* ---- phone: the panel reads as AT LEAST a 16:9 card and always grows for its content (min-height, never aspect-ratio: with the
   panel's height:100% against the stretched slide an aspect-ratio box stays locked at 16:9 and clips the button + play ring).
   576–767: bootstrap container 540px → panel 516px → 16:9 = 290px; ≤575: panel = 100vw − 2×12px container padding.
   Text sizes = 02b-video.css (unchanged). ---- */
@media (max-width:767px){
  .pc-showcase .pc-showcase-panel{min-height:290px}
  .pc-showcase .pc-showcase-panel .gt-video-content{position:relative;z-index:1}
}
@media (max-width:575px){
  .pc-showcase .pc-showcase-panel{min-height:calc((100vw - 24px) * 9 / 16)}
  /* 8 bullets + arrows must fit a 296–366px panel: narrower bars (16/28px) and the row may wrap instead of clipping the Next arrow */
  .pc-showcase .pc-showcase-controls{flex-wrap:wrap;row-gap:12px;gap:12px}
  .pc-showcase .pc-showcase-dots{flex:1 1 auto;min-width:0;flex-wrap:wrap}
  .pc-showcase .pc-showcase-dots .swiper-pagination-bullet{width:16px}
  .pc-showcase .pc-showcase-dots .swiper-pagination-bullet.swiper-pagination-bullet-active{width:28px}
}

/* ---- reduced motion: no slide transition, no ripple pulse on the play ring ---- */
@media (prefers-reduced-motion:reduce){
  .pc-showcase .pc-showcase-slider .swiper-wrapper{transition-duration:0s!important}
  .pc-showcase .video-btn.ripple::before,.pc-showcase .video-btn.ripple::after{animation:none}
  .pc-showcase .pc-showcase-dots .swiper-pagination-bullet,.pc-showcase .pc-showcase-arrows button{transition:none}
}

/* ---- inline video modal (02b-showcase.js builds #pc-showcase-modal in <body> and opens it with magnificPopup type:'inline';
   it lives outside the section, so it is scoped by its own class + the popup's mainClass) ---- */
.pc-showcase-modal{position:relative;width:92vw;max-width:1100px;margin:0 auto;background:#131722;border:1px solid rgba(255,255,255,.08);border-radius:6px}
.pc-showcase-modal .pc-showcase-video{display:block;width:100%;aspect-ratio:16/9;max-height:80vh;background:#000;outline:none;border-radius:6px}
.pc-showcase-mfp .mfp-container{padding:0 16px}
.pc-showcase-mfp .mfp-close{color:#fff;opacity:.85;top:-44px;right:0;padding-right:0;width:44px;text-align:right;font-family:Arial,sans-serif;font-size:32px}
.pc-showcase-mfp .mfp-close:hover,.pc-showcase-mfp .mfp-close:focus{opacity:1}
/* dead file (02b-showcase.js adds .is-error on the <video> error event): message instead of a black player */
.pc-showcase-modal .pc-showcase-err{display:none;margin:0;padding:28px 20px;text-align:center;font-family:"Chakra Petch",sans-serif;font-size:16px;line-height:1.5;color:#fff}
.pc-showcase-modal.is-error .pc-showcase-video{display:none}
.pc-showcase-modal.is-error .pc-showcase-err{display:block}


/* ===== 02c-shop-buy.css ===== */
/* Section 02c · SHOP — buy from the card (TRACK A). Scoped under .gt-shop-section.pc-shop; sits on top of 02c-shop.css.
   Card = template .gt-shop-card-item (position:relative, padding 50px 30px, ~300px wide in the 4-up slider).
   Stacking inside a card: status tag z1 · stretched-link overlay z3 (02c-shop.css) · actions row z4 · picker z6.
   Template pitfall: `.gt-shop-card-item span` turns EVERY span into the absolute orange tag → reset inside our blocks. */

/* ---------- actions row (replaces the decorative hover icons; always visible, above the stretched link) ---------- */
.gt-shop-section.pc-shop .gt-shop-card-item .pc-buy-actions{position:relative;z-index:4;display:flex;align-items:center;justify-content:center;gap:14px;margin-top:auto;padding-top:18px}
/* "Add to cart" = the template button in miniature: Chakra Petch 700 12px uppercase, the gradient + angled clip-path of .gt-theme-btn.
   The gradient + clip-path live on ::before (own stacking context via z-index:0, pseudo at z-index:-1), NOT on the button box:
   clip-path clips everything the element paints, outline included, which made the keyboard focus ring invisible. The box
   itself is unclipped, so :focus-visible's outline paints outside it like every other control's. Same for the <a> fallback. */
.gt-shop-section.pc-shop .gt-shop-card-item .pc-buy-btn{position:relative;z-index:0;display:inline-flex;align-items:center;justify-content:center;gap:7px;min-width:0;height:36px;padding:0 18px;border:0;border-radius:0;font-family:"Chakra Petch",sans-serif;font-size:12px;font-weight:700;letter-spacing:.5px;line-height:1;text-transform:uppercase;text-decoration:none;color:var(--gt-white);background:transparent;cursor:pointer;transition:color .3s ease}
.gt-shop-section.pc-shop .gt-shop-card-item .pc-buy-btn::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;background-color:#f66e61;background-size:200% auto;background-image:linear-gradient(to right,#f66e61 0%,#9e3a31 50%,#f66e61 100%);clip-path:polygon(24% 0,88% 0,100% 0,100% 77%,100% 100%,0 100%,0 80%,0 30%,7% 0);transition:background-position .3s ease}
.gt-shop-section.pc-shop .gt-shop-card-item .pc-buy-btn:hover,
.gt-shop-section.pc-shop .gt-shop-card-item .pc-buy-btn[aria-expanded="true"]{color:var(--gt-white)}
.gt-shop-section.pc-shop .gt-shop-card-item .pc-buy-btn:hover::before,
.gt-shop-section.pc-shop .gt-shop-card-item .pc-buy-btn[aria-expanded="true"]::before{background-position:right center}
/* !important on the anchor rings: the template's base rule is `a{outline:none !important}` (main-pc.css:270), which would
   otherwise erase the ring on the <a class="pc-buy-btn"> fallback, Details and View details. :focus-visible only → no mouse ring. */
.gt-shop-section.pc-shop .gt-shop-card-item .pc-buy-btn:focus-visible{outline:2px solid var(--gt-white) !important;outline-offset:2px}
.gt-shop-section.pc-shop .gt-shop-card-item .pc-buy-btn i{font-size:12px;line-height:1}
/* "Details" = quiet text link beside it */
.gt-shop-section.pc-shop .gt-shop-card-item .pc-buy-view{display:inline-flex;align-items:center;gap:6px;font-family:"Chakra Petch",sans-serif;font-size:12px;font-weight:700;letter-spacing:.5px;line-height:1;text-transform:uppercase;text-decoration:none;color:var(--gt-text);transition:color .25s ease}
.gt-shop-section.pc-shop .gt-shop-card-item .pc-buy-view:hover{color:var(--gt-white)}
.gt-shop-section.pc-shop .gt-shop-card-item .pc-buy-view:focus-visible{outline:2px solid var(--gt-theme) !important;outline-offset:3px}
.gt-shop-section.pc-shop .gt-shop-card-item .pc-buy-view i{font-size:11px;line-height:1}

/* ---------- picker: overlays the cover area from the top of the card, grows downwards as far as it needs ---------- */
.gt-shop-section.pc-shop .gt-shop-card-item .pc-buy-picker{position:absolute;top:14px;left:14px;right:14px;z-index:6;max-height:calc(100% - 28px);overflow:auto;display:flex;flex-direction:column;padding:12px;background:#1a1f2b;border:1px solid rgba(255,255,255,.08);border-radius:6px;box-shadow:0 14px 34px rgba(0,0,0,.5);text-align:left;text-transform:none;cursor:default}
.gt-shop-section.pc-shop .gt-shop-card-item .pc-buy-picker[hidden]{display:none !important}
/* template span rule reset (position/padding/background/z-index of the orange tag) */
.gt-shop-section.pc-shop .gt-shop-card-item .pc-buy-picker span{position:static;top:auto;left:auto;padding:0;background:none;letter-spacing:normal;line-height:1.3;z-index:auto;color:inherit;font-weight:inherit}
.gt-shop-section.pc-shop .gt-shop-card-item .pc-buy-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 8px}
.gt-shop-section.pc-shop .gt-shop-card-item .pc-buy-heading{margin:0;font-family:"Chakra Petch",sans-serif;font-size:13px;font-weight:700;letter-spacing:.4px;line-height:1.2;text-transform:uppercase;color:var(--gt-white)}
.gt-shop-section.pc-shop .gt-shop-card-item .pc-buy-close{flex:0 0 auto;width:28px;height:28px;padding:0;border:1px solid rgba(255,255,255,.08);border-radius:6px;background:transparent;color:var(--gt-text);font-size:13px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:color .25s ease,border-color .25s ease}
.gt-shop-section.pc-shop .gt-shop-card-item .pc-buy-close:hover{color:var(--gt-white);border-color:rgba(255,255,255,.3)}
.gt-shop-section.pc-shop .gt-shop-card-item .pc-buy-close:focus-visible{outline:2px solid var(--gt-theme);outline-offset:2px}
/* option rows: 44px tall, label left / price right, hover + focus = accent border */
.gt-shop-section.pc-shop .gt-shop-card-item .pc-buy-opts{display:flex;flex-direction:column;gap:6px}
.gt-shop-section.pc-shop .gt-shop-card-item .pc-buy-opt{display:flex;align-items:center;justify-content:space-between;gap:10px;height:44px;padding:0 12px;border:1px solid rgba(255,255,255,.08);border-radius:6px;background:rgba(255,255,255,.02);color:var(--gt-white);text-decoration:none;font-family:"Chakra Petch",sans-serif;font-size:14px;font-weight:600;line-height:1;transition:border-color .25s ease,background-color .25s ease}
.gt-shop-section.pc-shop .gt-shop-card-item .pc-buy-opt:hover,
.gt-shop-section.pc-shop .gt-shop-card-item .pc-buy-opt:focus-visible{border-color:#f66e61;background:rgba(246,110,97,.08);color:var(--gt-white);outline:none}
.gt-shop-section.pc-shop .gt-shop-card-item .pc-buy-opt:focus-visible{box-shadow:inset 0 0 0 1px #f66e61}  /* keyboard: 2px accent ring (border + inset), hover stays 1px */
.gt-shop-section.pc-shop .gt-shop-card-item .pc-buy-opt-label{white-space:nowrap}
/* span.… : the picker's generic span reset above (color:inherit) is one class more specific than a bare .pc-buy-opt-price */
.gt-shop-section.pc-shop .gt-shop-card-item .pc-buy-picker span.pc-buy-opt-price{font-weight:700;font-variant-numeric:tabular-nums;color:#f66e61;white-space:nowrap}
.gt-shop-section.pc-shop .gt-shop-card-item .pc-buy-more{display:block;margin:10px 0 0;text-align:center;font-size:12px;font-weight:600;line-height:1.4;color:var(--gt-text);text-decoration:underline;text-underline-offset:3px;transition:color .25s ease}
.gt-shop-section.pc-shop .gt-shop-card-item .pc-buy-more:hover{color:var(--gt-white)}
.gt-shop-section.pc-shop .gt-shop-card-item .pc-buy-more:focus-visible{outline:2px solid var(--gt-theme) !important;outline-offset:2px}

/* the card's hover zoom (02c-shop.css / template 12425) keeps working: the picker is outside .gt-shop-image, so hovering it still counts as hovering the card */

/* ---------- small screens (1-up slider; cards stretch wider, keep the row readable) ---------- */
@media (max-width:575px){
  .gt-shop-section.pc-shop .gt-shop-card-item .pc-buy-actions{gap:12px}
  .gt-shop-section.pc-shop .gt-shop-card-item .pc-buy-picker{top:12px;left:12px;right:12px;max-height:calc(100% - 24px)}
}
/* touch devices: 44px targets for the two controls (the desktop pill stays 36px) */
@media (pointer:coarse){
  .gt-shop-section.pc-shop .gt-shop-card-item .pc-buy-btn{height:44px;padding:0 20px}
  .gt-shop-section.pc-shop .gt-shop-card-item .pc-buy-view{min-height:44px}
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:reduce){
  .gt-shop-section.pc-shop .gt-shop-card-item .pc-buy-btn,
  .gt-shop-section.pc-shop .gt-shop-card-item .pc-buy-btn::before,
  .gt-shop-section.pc-shop .gt-shop-card-item .pc-buy-view,
  .gt-shop-section.pc-shop .gt-shop-card-item .pc-buy-close,
  .gt-shop-section.pc-shop .gt-shop-card-item .pc-buy-opt,
  .gt-shop-section.pc-shop .gt-shop-card-item .pc-buy-more{transition:none}
}


/* ===== 10-game.css ===== */
/* ===== GAME PAGE (wp/game/sections/*) — brand overrides on top of the TEMPLATE components, scoped to .pcx-game =====
   The page is built from the Xports components as shipped (game-details.html, pricing.html, index-2 news strip, home-1 testimonials,
   index-7 features) and main-pc.purged.css carries their rules (the purge content list includes wp/game/sections). This file only
   (a) re-applies the template's look to the heading slots the live outline forbids us to use (h4/h5/h6 → p/span/div),
   (b) defuses the template's uppercase/600 body globals for prose, (c) sizes real content in slots the demo filled with placeholders,
   (d) keeps the sidebar sticky (template news.html `.sticky-style`). Motion: nothing beyond ≤.4s hovers (site motion policy). */

/* ---------- shared ---------- */
.pcx-game .gt-section-title .sec_title,
.pcx-game .gt-section-title-2 .sec_title{font-size:45px;font-weight:700;line-height:112%;color:var(--gt-white);text-transform:uppercase}
@media (max-width:991px){.pcx-game .gt-section-title .sec_title,.pcx-game .gt-section-title-2 .sec_title{font-size:38px}}
@media (max-width:767px){.pcx-game .gt-section-title .sec_title,.pcx-game .gt-section-title-2 .sec_title{font-size:35px}}
@media (max-width:575px){.pcx-game .gt-section-title .sec_title,.pcx-game .gt-section-title-2 .sec_title{font-size:30px}}
/* eyebrow = the template's h6 rule on a span (heading budget): -2 variant with the two 44px ticks, plain variant with the 116px underline */
.pcx-game .gt-section-title-2 .subtitle{font-family:"Chakra Petch",sans-serif;font-size:16px;font-weight:700;letter-spacing:-0.32px;line-height:1;color:var(--gt-white);text-transform:uppercase;position:relative;display:inline-block;margin:0 0 25px;padding:0 60px}
.pcx-game .gt-section-title-2 .subtitle::before{position:absolute;content:"";background:linear-gradient(90deg,#00130B 0%,#f66e61 100%);width:44px;height:1px;left:0;top:8px}
.pcx-game .gt-section-title-2 .subtitle::after{position:absolute;content:"";background:linear-gradient(90deg,#f66e61 0%,#00130B 100%);width:44px;height:1px;right:0;top:8px;left:initial}
.pcx-game .gt-section-title .subtitle{font-family:"Chakra Petch",sans-serif;font-size:16px;font-weight:700;letter-spacing:-0.32px;line-height:1;color:var(--gt-white);text-transform:uppercase;position:relative;display:inline-block;margin:0 0 25px}
.pcx-game .gt-section-title .subtitle::after{position:absolute;content:"";background:linear-gradient(90deg,#f66e61 0%,#00130B 100%);width:116px;height:1px;left:0;bottom:-8px}
@media (max-width:575px){
  .pcx-game .gt-section-title-2 .subtitle{padding:0}
  .pcx-game .gt-section-title-2 .subtitle::before,.pcx-game .gt-section-title-2 .subtitle::after{display:none}
}
/* status dot (sidebar strips) */
.pcx-game .pc-gbox-status::before{content:"";width:7px;height:7px;border-radius:50%;background:#7c8698;flex:0 0 auto}
.pcx-game .pc-gbox-status.st-on::before{background:#2fd27a;box-shadow:0 0 0 3px rgba(47,210,122,.18)}
.pcx-game .pc-gbox-status.st-up::before{background:#f6b23f;box-shadow:0 0 0 3px rgba(246,178,63,.16)}
.pcx-game .pc-gbox-status.st-te::before{background:#53a8ff;box-shadow:0 0 0 3px rgba(83,168,255,.16)}

/* ---------- 10 · page header (template .gt-breadcrumb-wrapper) ---------- */
/* template: margin-top 110px clears its absolute header; ours is the same header-1 + the promo bar when that is present */
.pcx-game .gt-breadcrumb-wrapper{margin-top:110px}
body.pcx-game .pc-promo ~ #smooth-wrapper .gt-breadcrumb-wrapper{margin-top:150px}
@media (max-width:1199px){
  .pcx-game .gt-breadcrumb-wrapper{margin-top:86px}
  body.pcx-game .pc-promo ~ #smooth-wrapper .gt-breadcrumb-wrapper{margin-top:126px}
}
/* plain carbon band (owner 2026-10-16: no glow, no shapes — "clean & super basic"): a hairline closes it at the bottom */
.pcx-game .gt-breadcrumb-wrapper.pc-gheader{border-bottom:1px solid rgba(255,255,255,.07)}
.pcx-game .gt-breadcrumb-wrapper .gt-page-heading{padding:56px 0 60px}
@media (max-width:767px){.pcx-game .gt-breadcrumb-wrapper .gt-page-heading{padding:40px 0 44px}}
/* crumbs first (small, quiet) — the template puts them under the H1 at 16px/700 */
.pcx-game .gt-breadcrumb-wrapper .gt-page-heading .gt-breadcrumb-items{margin:0 0 22px;gap:8px}
.pcx-game .gt-breadcrumb-wrapper .gt-page-heading .gt-breadcrumb-items li{font-size:13px;font-weight:600;letter-spacing:.04em;color:#8e97a6}
.pcx-game .gt-breadcrumb-wrapper .gt-page-heading .gt-breadcrumb-items li a{color:#aeb6c4;text-transform:uppercase}
.pcx-game .gt-breadcrumb-wrapper .gt-page-heading .gt-breadcrumb-items li.color,.pcx-game .gt-breadcrumb-wrapper .gt-page-heading .gt-breadcrumb-items li.color a{color:var(--gt-theme)}
/* 72px/800 is sized for "OUR GAMES DETAILS"; a 60-char live H1 needs the article scale */
.pcx-game .gt-breadcrumb-wrapper .gt-page-heading h1{font-size:clamp(26px,3.3vw,46px);font-weight:700;line-height:1.15;max-width:1000px;margin:0 auto}
/* the live rail line (count + starting price), then ONE primary button to the packages */
.pcx-game .pc-gline{max-width:860px;margin:18px auto 0;font-family:"Chakra Petch",sans-serif;font-size:16px;font-weight:600;line-height:1.5;color:#c7cedb;text-transform:none}
.pcx-game .pc-gline-num{color:var(--gt-theme);font-weight:800}
.pcx-game .pc-gheader-cta{margin-top:26px}
/* the live trust row, as a gt-list */
.pcx-game .pc-gtrust{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 32px;margin:30px 0 0;padding:0;list-style:none}
.pcx-game .pc-gtrust li{font-family:"Chakra Petch",sans-serif;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#aeb6c4}
.pcx-game .pc-gtrust li i{color:var(--gt-theme);margin-right:7px}
@media (max-width:575px){.pcx-game .pc-gtrust{gap:8px 18px}}

/* ---------- 11 · details ---------- */
/* sticky needs a clip-free ancestor chain: the template's section wears `fix` (dropped in the partial); keep the rest open */
.pcx-game .gt-game-details-section,.pcx-game .gt-game-details-section .container,.pcx-game .gt-game-detaills-wrapper,
.pcx-game .gt-game-details-section .row,.pcx-game .gt-game-details-section .col-lg-4{overflow:visible}
.pcx-game .gt-game-details-section{padding-top:80px}
@media (max-width:991px){.pcx-game .gt-game-details-section{padding-top:60px}}
/* media: the template slot is a plain 930×450 img; ours may carry the video-popup play button (clone of .gt-video-wrapper .video-btn) */
.pcx-game .pc-gmedia{position:relative;overflow:hidden;background:#0b0e13}
.pcx-game .pc-gmedia img,.pcx-game .pc-gmedia video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.pcx-game .pc-gmedia .pc-gplay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background-color:var(--gt-white);color:var(--gt-theme);display:inline-block;font-size:16px;height:84px;width:84px;line-height:84px;border-radius:50%;text-align:center;transition:background-color .3s ease,color .3s ease}
.pcx-game .pc-gmedia .pc-gplay::before{position:absolute;content:"";left:50%;top:50%;transform:translate(-50%,-50%);width:132px;height:132px;border:1px solid rgba(255,255,255,.3)}
.pcx-game .pc-gmedia .pc-gplay:hover{background-color:var(--gt-theme);color:var(--gt-white)}
@media (max-width:767px){
  .pcx-game .pc-gmedia .pc-gplay{width:70px;height:70px;line-height:70px}
  .pcx-game .pc-gmedia .pc-gplay::before{width:90px;height:90px}
}
/* byline (template: ul.gt-list with icon rows) + intro: prose, not the uppercase/600 body global */
.pcx-game .pc-gmeta{display:flex;flex-wrap:wrap;gap:8px 22px;margin:0 0 14px;padding:0;list-style:none}
.pcx-game .pc-gmeta li{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#8e97a6}
.pcx-game .pc-gmeta li i{color:var(--gt-theme);margin-right:7px}
.pcx-game .gt-details-content>p{font-size:17px;font-weight:400;line-height:1.75;color:#c7cedb;text-transform:none}
/* TOC = a panel in the sidebar-widget language (bg-2, 30px, ruled title) on the template's list-wrapper (its 40/40 margins stay);
   entries numbered like the template's FAQ (01 02 …, coral Chakra) in two columns — numbering runs on across the columns via a
   CSS counter reset per column (no extra text in the DOM) */
.pcx-game .pc-gtoc{background-color:var(--gt-bg-2);border:1px solid rgba(255,255,255,.06);padding:30px}
@media (max-width:575px){.pcx-game .pc-gtoc{padding:24px 20px}}
.pcx-game .pc-gtoc-head{font-family:"Chakra Petch",sans-serif;font-size:20px;font-weight:700;line-height:1.3;color:var(--gt-white);text-transform:uppercase;border-bottom:1.5px solid rgba(255,255,255,.2);padding-bottom:12px;margin:0 0 22px}
.pcx-game .pc-gtoc-list{margin:0;padding:0;list-style:none}
.pcx-game .pc-gtoc-list li{counter-increment:pc-toc;position:relative;padding-left:40px;font-size:16px;line-height:1.45;text-transform:none;font-weight:500}
.pcx-game .pc-gtoc-list li:not(:last-child){margin-bottom:13px}
.pcx-game .pc-gtoc-list li::before{content:counter(pc-toc,decimal-leading-zero);position:absolute;left:0;top:2px;font-family:"Chakra Petch",sans-serif;font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--gt-theme)}
.pcx-game .pc-gtoc-list li.is-sub{padding-left:62px;font-size:15px}
.pcx-game .pc-gtoc-list li.is-sub::before{left:22px}
.pcx-game .pc-gtoc-list li a{color:var(--gt-white);transition:color .3s ease}
.pcx-game .pc-gtoc-list li a:hover{color:var(--gt-theme)}
@media (max-width:991px){.pcx-game .pc-gtoc .col-lg-6+.col-lg-6{margin-top:13px}}
/* article: WP post content; headings keep the template's content-h3 scale (36px), lists wear the gt-list check rows */
.pcx-game .pc-garticle{color:#c0c8d6;font-size:16px;font-weight:400;line-height:1.75;text-transform:none}
.pcx-game .pc-garticle h2{font-size:clamp(24px,2.6vw,36px);line-height:1.2;margin:48px 0 16px;scroll-margin-top:120px}
.pcx-game .pc-garticle h3{font-size:22px;line-height:1.25;margin:32px 0 12px;scroll-margin-top:120px}
.pcx-game .pc-garticle h4{font-size:18px;margin:26px 0 10px}
.pcx-game .pc-garticle p{margin:0 0 18px}
.pcx-game .pc-garticle strong{color:var(--gt-white);font-weight:700}
.pcx-game .pc-garticle a{color:var(--gt-theme);text-decoration:underline;text-underline-offset:3px}
.pcx-game .pc-garticle ul.gt-list{margin:0 0 24px;padding:0;list-style:none}
.pcx-game .pc-garticle ul.gt-list li{position:relative;padding-left:26px;font-size:16px}
.pcx-game .pc-garticle ul.gt-list li:not(:last-child){margin-bottom:10px}
.pcx-game .pc-garticle ul.gt-list li i{position:absolute;left:0;top:6px;color:var(--gt-theme);margin:0}
.pcx-game .pc-garticle ol{margin:0 0 24px;padding-left:22px}
.pcx-game .pc-garticle ol li{margin-bottom:8px}
.pcx-game .pc-garticle .gt-thumb{margin:0 0 24px}
.pcx-game .pc-garticle .gt-thumb img{display:block;width:100%;height:auto}
.pcx-game .pc-garticle img{max-width:100%;height:auto}
.pcx-game .pc-garticle table{width:100%;border-collapse:collapse;margin:0 0 24px;display:block;overflow-x:auto}
.pcx-game .pc-garticle th,.pcx-game .pc-garticle td{border:1px solid rgba(255,255,255,.12);padding:10px 12px;text-align:left}
/* pull-quote: template block (bg-2 panel, 50px 110px, corner quote icon, italic white p) WITHOUT its .gt-x-shape (the Xports brand
   mark); stars + attribution are ours */
.pcx-game .gt-game-sideber{border:1px solid rgba(255,255,255,.06)}
.pcx-game .gt-game-sideber p{text-transform:none;font-weight:500;line-height:1.7}
.pcx-game .gt-game-sideber p.pc-gquote-by{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin:16px 0 0;font-style:normal;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#aeb6c4}
.pcx-game .pc-gquote-stars{display:inline-flex;gap:3px;color:var(--gt-theme);font-size:13px}
@media (max-width:767px){.pcx-game .gt-game-sideber{padding:30px 24px 30px 56px}.pcx-game .gt-game-sideber .icon{left:18px;top:30px;display:block}.pcx-game .gt-game-sideber .icon img{width:26px;height:auto}}
/* FAQ: title = the template h4 slot on an H3 (live outline); accordion = template, header = div (06-faq.css pattern) */
.pcx-game .gt-faq-content h3{font-size:24px;line-height:150%;margin-bottom:20px}
@media (max-width:1199px){.pcx-game .gt-faq-content h3{font-size:20px}}
.pcx-game .gt-faq-content .accordion-header{margin-bottom:0;line-height:30px}
.pcx-game .gt-faq-content .accordion-button{text-align:left}
.pcx-game .gt-faq-content .accordion-item .accordion-collapse .accordion-body{text-transform:none;padding-bottom:25px}

/* ---------- 11 · sidebar (template .gt-main-sideber) ---------- */
.pcx-game .sticky-style{top:110px}
@media (max-width:991px){.pcx-game .sticky-style{position:static!important}}
/* widget title = the template h4 slot (24px/700, 1.5px rule, mb 40) on a p — compact widgets take 20px / mb 24 */
.pcx-game .pc-gwidget-head{font-family:"Chakra Petch",sans-serif;font-size:20px;font-weight:700;line-height:1.3;color:var(--gt-white);text-transform:uppercase;border-bottom:1.5px solid rgba(255,255,255,.2);padding-bottom:10px;margin:0 0 24px}
.pcx-game .gt-main-sideber .gt-single-sideber-widget{margin-bottom:30px}
.pcx-game .gt-main-sideber .gt-single-sideber-widget ul{margin:0;padding:0;list-style:none}
.pcx-game .gt-main-sideber .gt-single-sideber-widget ul li{text-transform:none;gap:12px}
.pcx-game .gt-main-sideber .gt-single-sideber-widget ul li:not(:last-child){margin-bottom:14px}
.pcx-game .gt-main-sideber .gt-single-sideber-widget ul li span:first-child{color:var(--gt-text);font-weight:500}
.pcx-game .gt-main-sideber .gt-single-sideber-widget ul li span:last-child{font-family:"Chakra Petch",sans-serif;font-weight:700;text-align:right}
.pcx-game .gt-main-sideber .gt-single-sideber-widget ul li .pc-gaccent{color:var(--gt-theme)}
/* product strips = the template's bg-cover boxes (their 3px theme rule + hover gradient stay); ours are links with a legible scrim */
/* the strip list shows the first 5 packages (online first) and NEVER scrolls inside (owner: a native scrollbar reads low-end); so the
   sticky sidebar (≈ 480px fixed + 82px per strip) still fits under the 110px header on short screens, the last strips give way —
   every package is one click away in Compare All */
/* sidebar fixed part ≈ 513px + 82px per strip; sticky top 110 → 5 strips need ≥ 1030px of viewport */
@media (min-width:992px) and (max-height:1030px){.pcx-game .pc-ghacks .gt-sideber-box:nth-child(n+5){display:none}}
@media (min-width:992px) and (max-height:950px){.pcx-game .pc-ghacks .gt-sideber-box:nth-child(n+4){display:none}}
/* short viewports (most 1366×768 laptops): no sticky at all — the template's own game-details sidebar is static — and all 5 strips */
@media (min-width:992px) and (max-height:860px){
  .pcx-game .sticky-style{position:static!important}
  .pcx-game .pc-ghacks .gt-sideber-box{display:block!important}
}
.pcx-game .gt-sideber-box{display:block;text-decoration:none;background-color:#0b0e13;background-position:center}
.pcx-game .gt-main-sideber .gt-single-sideber-widget .gt-sideber-box .gt-box-item{background:linear-gradient(90deg,rgba(11,14,19,.94) 0%,rgba(11,14,19,.78) 55%,rgba(11,14,19,.4) 100%);gap:10px;padding:14px 18px}
.pcx-game .pc-gbox-name{display:flex;flex-direction:column;gap:4px;min-width:0;font-family:"Chakra Petch",sans-serif;font-size:16px;font-weight:700;line-height:1.2;color:var(--gt-white);text-transform:uppercase}
.pcx-game .pc-gbox-status{display:inline-flex;align-items:center;gap:6px;font-family:"Saira",sans-serif;font-size:11px;font-weight:600;letter-spacing:.05em;color:#9aa3b2;text-transform:uppercase}
.pcx-game .pc-gbox-price{margin-left:auto;font-family:"Chakra Petch",sans-serif;font-size:15px;font-weight:800;color:var(--gt-theme);white-space:nowrap}
.pcx-game .gt-sideber-box .gt-box-item .icon{flex:0 0 auto;font-size:14px;transition:transform .3s ease}
.pcx-game .gt-sideber-box:hover .gt-box-item .icon{transform:translateX(3px)}
.pcx-game .pc-gside-cta{width:100%;margin-top:4px}
/* no-product state on the template contact box */
.pcx-game .pc-gnotify .gt-contact-content{padding:30px}
.pcx-game .pc-ghelp-head{font-family:"Chakra Petch",sans-serif;font-size:24px;font-weight:700;color:var(--gt-white);text-transform:uppercase;margin:0 0 10px}
.pcx-game .pc-gnotify .gt-contact-content p{text-transform:none;font-weight:400;line-height:1.65}
.pcx-game .pc-gnotify .gt-contact-item .gt-list{margin:0;padding:0;list-style:none}
.pcx-game .pc-gnotify .gt-contact-item .gt-list li a{color:var(--gt-theme)}

/* ---------- 12 · compare (template .gt-pricing-box-items-2) ---------- */
.pcx-game .gt-pricing-box-items-2.gt-style-new{margin-top:0;height:100%;display:flex;flex-direction:column}
.pcx-game .gt-pricing-box-items-2 .gt-pricing-header .gt-icon img{display:block;width:64px;height:64px;object-fit:cover}
.pcx-game .gt-pricing-box-items-2 .gt-pricing-header h3{font-size:24px;line-height:1.25;margin-bottom:12px}
.pcx-game .gt-pricing-box-items-2 .gt-pricing-header h3 a{color:var(--gt-white);transition:color .3s ease}
.pcx-game .gt-pricing-box-items-2 .gt-pricing-header h3 a:hover{color:var(--gt-theme)}
.pcx-game .pc-gtags{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0 0 12px;font-family:"Chakra Petch",sans-serif;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#c7cedb}
.pcx-game .pc-gtags i{color:var(--gt-theme);margin-right:5px}
.pcx-game .gt-pricing-box-items-2 .gt-pricing-header p{text-transform:none;font-weight:400;font-size:15px;line-height:1.6;color:var(--gt-text);margin:0}
.pcx-game .gt-pricing-box-items-2 .gt-pricing-header p.pc-gtags{text-transform:uppercase;font-weight:700}
/* duration rows = the template's outlined button (gt-theme-btn gt-style-border), full width, label left / price right, the gradient
   sweep + white text on hover — each one IS the checkout link */
.pcx-game .gt-pricing-box-items-2 .gt-pricing-list.pc-gopts{margin-top:26px}
.pcx-game .gt-pricing-box-items-2 .gt-pricing-list.pc-gopts li{display:block}
.pcx-game .gt-pricing-box-items-2 .gt-pricing-list.pc-gopts li:not(:last-child){margin-bottom:10px}
.pcx-game .pc-gopt{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-width:0;padding:14px 22px;font-size:15px;letter-spacing:.4px;line-height:1.3;text-align:left;color:var(--gt-white);border-color:rgba(255,255,255,.35)}
.pcx-game .pc-gopt .pc-gopt-label i{color:var(--gt-theme);margin-right:6px;transition:color .5s}
.pcx-game .pc-gopt .pc-gopt-price{font-weight:800;font-variant-numeric:tabular-nums;color:var(--gt-theme);white-space:nowrap;transition:color .5s}
.pcx-game .pc-gopt .pc-gopt-price i{font-size:12px;margin-left:6px;transition:transform .3s ease}
.pcx-game .pc-gopt:hover,.pcx-game .pc-gopt:hover .pc-gopt-label i,.pcx-game .pc-gopt:hover .pc-gopt-price{color:var(--gt-white)}
.pcx-game .pc-gopt:hover .pc-gopt-price i{transform:translateX(3px)}
.pcx-game .pc-gopt:focus-visible{outline:2px solid var(--gt-theme);outline-offset:2px}
.pcx-game .gt-pricing-box-items-2 .gt-pricing-btn{margin-top:auto;padding-top:50px}
/* the ribbon carries the live status: colour per state (template: theme / black) */
.pcx-game .gt-pricing-box-items-2 .gt-price-tag.pc-gst{background-color:#4a5160}
.pcx-game .gt-pricing-box-items-2 .gt-price-tag.pc-gst.st-on{background-color:#128a3e}
.pcx-game .gt-pricing-box-items-2 .gt-price-tag.pc-gst.st-up{background-color:#b57a12}
.pcx-game .gt-pricing-box-items-2 .gt-price-tag.pc-gst.st-te{background-color:#2d6fc2}

/* ---------- 13 · guides (template .gt-news-section-2 strip) ---------- */
.pcx-game .gt-news-section-2 .gt-section-title-area{margin-bottom:10px}
.pcx-game .pc-gguides-slider .swiper-slide{height:auto}
/* the strip is full-bleed in the template; the first/last card sit at the container edge instead of the viewport edge */
.pcx-game .pc-gguides-slider{padding:0 max(12px,calc((100% - 1320px) / 2))}
@media (max-width:1399px){.pcx-game .pc-gguides-slider{padding:0 max(12px,calc((100% - 1140px) / 2))}}
@media (max-width:1199px){.pcx-game .pc-gguides-slider{padding:0 max(12px,calc((100% - 960px) / 2))}}
@media (max-width:991px){.pcx-game .pc-gguides-slider{padding:0 max(12px,calc((100% - 720px) / 2))}}
@media (max-width:767px){.pcx-game .pc-gguides-slider{padding:0 max(12px,calc((100% - 540px) / 2))}}
@media (max-width:575px){.pcx-game .pc-gguides-slider{padding:0 12px}}
.pcx-game .gt-news-box-items-2{height:100%;display:flex;flex-direction:column;background-color:#0b0e13}
.pcx-game .gt-news-box-items-2 .gt-thumb a{display:block}
.pcx-game .gt-news-box-items-2 .gt-thumb img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
/* card title = the template h3 slot on an h4 (live outline): 18px at every width (the demo's 24px is its ≥1600 6-up value) */
.pcx-game .gt-news-box-items-2 .gt-content h4{font-size:18px;line-height:125%;margin:0}
@media (max-width:575px){.pcx-game .gt-news-box-items-2 .gt-content h4{font-size:22px}}
.pcx-game .gt-news-box-items-2 .gt-content h4 a{color:var(--gt-white);background-position:0 95%;background-repeat:no-repeat;background-size:0% 2px;display:inline;transition:all .4s ease-in-out}
.pcx-game .gt-news-box-items-2 .gt-content h4 a:hover{color:var(--gt-theme);background-size:100% 2px;background-image:linear-gradient(180deg,var(--gt-theme) 0%,var(--gt-theme) 100%)}
.pcx-game .gt-news-box-items-2 .gt-content span{text-transform:none;font-weight:500;font-size:14px}
.pcx-game .pc-gguide-all{justify-content:center;text-align:center;background:rgba(246,110,97,.08)}
.pcx-game .pc-gguide-all .gt-content span{display:block;line-height:1.5}
.pcx-game .pc-gguide-all .gt-content span i{display:none}

/* ---------- 15 · features: the home card's h3 slot carries an h4 here (live outline) ---------- */
.pcx-game #pc_general_features .gt-feature-item-7 .gt-icon-item h4{font-size:20px;line-height:112%;margin:0}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .pcx-game .gt-sideber-box .gt-box-item .icon,.pcx-game .pc-gmedia .pc-gplay,.pcx-game .gt-pricing-list li a{transition:none}
  .pcx-game .gt-sideber-box:hover .gt-box-item .icon{transform:none}
}
