/* ===================== trueMythic Arena layout layer (loads after theme.css) ===================== */

/* ===================== Xbox skin: dark first, green, aggressive =====================
   Everything below overrides the tokens and shapes above. Remove this block to go back to the soft purple look. */
:root,
html[data-theme="light"] {
	--bg: #edf3ee; --surface: #ffffff; --surface2: #e1eae3; --text: #06100a; --muted: #4a6150; --border: #c9d8cc;
	--primary: #0e7a10; --on-primary: #ffffff; --mint: #12a44a; --on-mint: #02140a;
	--amber: #f0b92e; --on-amber: #241800; --dot: #cddbd0;
	--shadow: 0 1px 2px rgba(6,16,10,.08), 0 10px 30px rgba(6,16,10,.08);
	--glow: 0 0 0 rgba(0,0,0,0);
}
html[data-theme="dark"] {
	--bg: #070808; --surface: #121514; --surface2: #1a1e1c; --text: #f1f5f2; --muted: #98a39c; --border: #272d29;
	--primary: #2ee66b; --on-primary: #021207; --mint: #2ee66b; --on-mint: #021207;
	--amber: #ffc83d; --on-amber: #241800; --dot: #1b201d;
	--shadow: 0 1px 2px rgba(0,0,0,.6), 0 12px 34px rgba(0,0,0,.5);
	--glow: 0 0 26px rgba(46,230,107,.38);
}
:root {
	--font-head: 'Rajdhani', 'Sora', system-ui, sans-serif;
	--r-card: 8px; --r-tile: 6px; --r-badge: 4px; --r-pill: 6px;
}
h1, h2, h3, h4 { text-transform: uppercase; letter-spacing: .02em; font-weight: 700; }
.gs-h2 { font-size: clamp(30px, 5.4vw, 46px); }
.gs-hero__title { font-size: clamp(40px, 8.5vw, 78px); line-height: .98; letter-spacing: .01em; }
.gs-eyebrow, .gs-label { letter-spacing: 2px; }
.gs-eyebrow::before { content: ""; display: inline-block; width: 22px; height: 3px; background: var(--primary); margin-right: 10px; vertical-align: middle; }
.gs-accent { color: var(--primary); text-shadow: 0 0 28px rgba(46,230,107,.35); }

/* Buttons: squared, uppercase, glowing */
.gs-btn, .wp-block-button__link, input[type="submit"], button[type="submit"], .gsx-btn { text-transform: uppercase; letter-spacing: .07em; font-weight: 700; border-radius: var(--r-pill); }
.gs-btn:not(.gs-btn--outline):not(.gs-btn--ghost):not(.gs-btn--soft):not(.gs-btn--gold):not(.gs-btn--white),
.gsx-btn:not(.gsx-btn--ghost):not(.gsx-btn--gold) { box-shadow: var(--glow); transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; }
.gs-btn:hover, .gsx-btn:hover { transform: translateY(-1px); filter: brightness(1.08); }
.gs-btn--outline.gs-btn--lg { background: transparent; border-color: var(--primary); color: var(--primary); }
.gs-btn--gold, .gsx-btn--gold { box-shadow: 0 0 22px rgba(255,200,61,.28); }
.gs-icon-btn, .gs-theme-toggle, .gs-points-pill { border-radius: var(--r-pill); }
.gs-logo__mark { border-radius: 8px; box-shadow: var(--glow); }
.gs-logo__text { font-size: 26px; text-transform: uppercase; letter-spacing: .04em; }

/* Header + announcement */
.gs-announce { background: var(--primary); color: var(--on-primary); text-transform: uppercase; letter-spacing: .08em; font-size: 13px; }
.gs-header { background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); box-shadow: 0 1px 0 rgba(46,230,107,.08); }
.gs-nav__list a { text-transform: uppercase; letter-spacing: .06em; font-weight: 700; border-radius: var(--r-pill); font-size: 14px; }
.gs-nav__list a:hover, .gs-nav__list .current-menu-item > a, .gs-nav__list .current_page_item > a { background: transparent; color: var(--primary); box-shadow: inset 0 -3px 0 var(--primary); border-radius: 0; }
input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="url"], select, textarea { border-radius: var(--r-tile); }
.gs-search { border-radius: var(--r-tile); }

/* Hero */
.gs-hero { background: radial-gradient(900px 420px at 85% -10%, rgba(46,230,107,.22), transparent 60%), radial-gradient(700px 360px at -5% 110%, rgba(16,124,16,.28), transparent 60%), var(--bg); }
.gs-hero__dots { background-image: linear-gradient(rgba(46,230,107,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(46,230,107,.07) 1px, transparent 1px); background-size: 56px 56px; opacity: 1; -webkit-mask-image: linear-gradient(180deg, #000, transparent 90%); mask-image: linear-gradient(180deg, #000, transparent 90%); }
.gs-hero__glow { background: var(--primary); opacity: .22; }
.gs-hero__glow--b { background: #107c10; }
.gs-chip { border-radius: var(--r-badge); text-transform: uppercase; letter-spacing: .12em; border-color: rgba(46,230,107,.4); background: rgba(46,230,107,.1); color: var(--primary); }

/* Cards and sections */
.gs-card, .gsx-card { border-radius: var(--r-card); }
.gs-card { transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.gs-card:hover { border-color: rgba(46,230,107,.55); box-shadow: var(--shadow), 0 0 0 1px rgba(46,230,107,.25), var(--glow); }
.gs-game-card__media { border-radius: 0; }
.gs-game-card__price, .gs-package__price { color: var(--primary); }
.gs-package--best, .gs-plan--best { box-shadow: 0 0 0 2px var(--primary), var(--glow); }
.gs-plan__tag { border-radius: var(--r-badge); text-transform: uppercase; letter-spacing: .1em; }
.gs-package__head .gs-ico-tile, .gs-ico-tile { border-radius: var(--r-tile); }
.gsx-badge, .gs-tab, .gs-pill, .gsx-pill { border-radius: var(--r-badge); }
.gs-tab { text-transform: uppercase; letter-spacing: .06em; font-weight: 700; }
.gs-tab[aria-selected="true"] { background: var(--primary); color: var(--on-primary); border-color: var(--primary); box-shadow: var(--glow); }

/* Dark panels that were purple */
.gs-feature { border-radius: var(--r-card); background: linear-gradient(135deg, #030a05, #07200f 55%, #0f5a24); border: 1px solid rgba(46,230,107,.35); box-shadow: var(--shadow), var(--glow); }
.gs-feature__badge { border-radius: var(--r-badge); letter-spacing: .1em; }
.gs-btn--white { color: #07200f; }
.gs-feature .gsx-countdown__unit:last-child, .gs-feature .gsx-countdown__unit:last-child .gsx-countdown__label { color: #07200f; }
.gs-compare__col--premium { background: linear-gradient(160deg, #030a05, #0a2a14); border: 1px solid var(--amber); }
.gs-grad-0 { background: linear-gradient(150deg, #04200c, #1fbf55); }
.gs-grad-7 { background: linear-gradient(150deg, #06120a, #0e7a10); }
.gs-grad-4 { background: linear-gradient(150deg, #0a2a14, #2ee66b); }
.gs-grad-5 { background: linear-gradient(150deg, #0b1d10, #107c10); }

/* Plugin elements */
.gsx-card, .gsx-custom, .gsx-opt, .gsx-total, .gsx-switch { border-radius: var(--r-card); }
.gsx-switch__btn { border-radius: var(--r-tile); text-transform: uppercase; letter-spacing: .06em; }
@media (min-width: 861px) { .gs-nav__list a { padding: 12px 12px; } }

:root { --cham: 14px; --cham-s: 8px; }
body { background: var(--bg); background-image: radial-gradient(1200px 500px at 50% -200px, rgba(46,230,107,.08), transparent 70%); }
html[data-theme="light"] body { background-image: none; }

/* Chamfered shapes */
.gs-btn, .gsx-btn, .gs-tab, .gs-chip, .gs-plan__tag, .gs-float, .gs-points-pill, .gs-hero__chips li, .gs-stat {
	border-radius: 0; clip-path: polygon(var(--cham-s) 0, 100% 0, 100% calc(100% - var(--cham-s)), calc(100% - var(--cham-s)) 100%, 0 100%, 0 var(--cham-s));
}
.gs-btn--lg { clip-path: polygon(var(--cham) 0, 100% 0, 100% calc(100% - var(--cham)), calc(100% - var(--cham)) 100%, 0 100%, 0 var(--cham)); min-height: 54px; padding-left: 30px; padding-right: 30px; font-size: 15px; }
.gs-btn--outline, .gsx-btn--ghost { box-shadow: none; }
.gs-btn:not(.gs-btn--outline):not(.gs-btn--ghost):not(.gs-btn--soft):not(.gs-btn--gold):not(.gs-btn--white),
.gsx-btn:not(.gsx-btn--ghost):not(.gsx-btn--gold) { box-shadow: none; filter: drop-shadow(0 0 14px rgba(46,230,107,.35)); }
.gs-btn--outline { border-width: 2px; }

/* Cards: dark panel, thin border, green corner mark */
.gs-card { border-radius: 4px; background: linear-gradient(180deg, var(--surface2), var(--surface)); position: relative; }
.gs-card::after { content: ""; position: absolute; left: -1px; top: -1px; width: 22px; height: 22px; border-left: 3px solid var(--primary); border-top: 3px solid var(--primary); border-top-left-radius: 4px; pointer-events: none; opacity: .0; transition: opacity .15s; }
.gs-card:hover::after { opacity: 1; }
.gs-game-card__media { aspect-ratio: 3/4; }
.gs-game-card .gs-btn, .gs-game-card .button, .gs-game-card a.add_to_cart_button { width: 100%; justify-content: center; }

/* Section headings: green slash + rule */
.gs-section__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px 24px; padding-bottom: 14px; border-bottom: 1px solid var(--border); position: relative; }
.gs-section__head::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 96px; height: 3px; background: var(--primary); box-shadow: var(--glow); }
.gs-h2 { margin: 2px 0 0; }
.gs-h2::before { content: "//"; color: var(--primary); margin-right: 10px; font-weight: 700; }

/* Header */
.gs-header { background: rgba(4,7,5,.92); }
html[data-theme="light"] .gs-header { background: rgba(255,255,255,.94); }
.gs-header__inner { padding-top: 14px; padding-bottom: 14px; }
.gs-logo__mark { border-radius: 0; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); background: var(--primary); color: var(--on-primary); box-shadow: none; filter: drop-shadow(0 0 10px rgba(46,230,107,.5)); }
.gs-search { max-width: none; }
.gs-search__input { background: var(--surface2); border: 1px solid var(--border); border-radius: 4px; text-transform: none; }
.gs-search__input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(46,230,107,.18); outline: none; }

/* Hero: big, left aligned, controller on the right */
.gs-hero { border-bottom: 1px solid var(--border); }
.gs-hero::before { content: ""; position: absolute; right: -10%; top: -30%; width: 70%; height: 160%; background: repeating-linear-gradient(115deg, transparent 0 22px, rgba(46,230,107,.05) 22px 24px); pointer-events: none; }
.gs-hero__inner { padding-top: 56px; padding-bottom: 64px; }
.gs-hero__copy { flex: 1 1 420px; }
.gs-hero__title { font-size: clamp(44px, 9vw, 92px); line-height: .92; margin: 22px 0 18px; font-style: italic; }
.gs-hero__text { color: var(--muted); border-left: 3px solid var(--primary); padding-left: 16px; }
.gs-trust li { text-transform: uppercase; letter-spacing: .06em; font-size: 12.5px; }
.gs-hero__art { flex: 1 1 380px; display: flex; flex-direction: column; align-items: center; padding: 20px 0; }
.gs-pad { width: 100%; max-width: 520px; height: auto; position: relative; z-index: 1; filter: drop-shadow(0 20px 40px rgba(0,0,0,.6)) drop-shadow(0 0 30px rgba(46,230,107,.25)); animation: gs-hover 6s ease-in-out infinite; }
@keyframes gs-hover { 0%,100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-10px) rotate(1deg); } }
.gs-hero__ring { position: absolute; border: 2px solid rgba(46,230,107,.25); border-radius: 50%; pointer-events: none; }
.gs-hero__ring--a { width: 78%; aspect-ratio: 1; top: 4%; left: 11%; }
.gs-hero__ring--b { width: 56%; aspect-ratio: 1; top: 15%; left: 22%; border-style: dashed; border-color: rgba(46,230,107,.35); }
.gs-hero__art .gs-float { background: var(--surface); border: 0; text-transform: uppercase; letter-spacing: .06em; font-size: 12px; z-index: 2; border-left: 3px solid var(--primary); }
.gs-hero__chips { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; max-width: 520px; margin: 14px 0 0; padding: 0; position: relative; z-index: 2; }
.gs-hero__chips li { background: var(--surface2); border-bottom: 2px solid var(--primary); padding: 12px 10px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; display: flex; flex-direction: column; gap: 6px; color: var(--text); }
.gs-hero__chips svg { color: var(--primary); }
@media (max-width: 560px) { .gs-hero__chips { grid-template-columns: 1fr; } .gs-hero__chips li { flex-direction: row; align-items: center; } }

/* Stats strip */
.gs-stats { gap: 0; border: 1px solid var(--border); background: var(--surface); }
.gs-stat { border: 0; border-right: 1px solid var(--border); background: transparent; box-shadow: none; clip-path: none; padding: 22px 12px; }
.gs-stat:last-child { border-right: 0; }
.gs-stat__num { font-size: clamp(30px, 5vw, 44px); text-shadow: 0 0 24px rgba(46,230,107,.4); }
.gs-stat__label { text-transform: uppercase; letter-spacing: .1em; font-size: 11.5px; }

/* Packages / plans */
.gs-package, .gs-plan { border-radius: 4px; }
.gs-package .gs-btn, .gs-plan .gs-btn { width: 100%; justify-content: center; }

/* Footer */
.gs-footer { border-radius: 0; background: #020402; border-top: 3px solid var(--primary); box-shadow: 0 -18px 50px rgba(46,230,107,.06); }
html[data-theme="light"] .gs-footer { background: #0a140d; color: #e8f2ea; }
html[data-theme="light"] .gs-footer a, html[data-theme="light"] .gs-footer__text, html[data-theme="light"] .gs-footer__legal { color: #9fb5a5; }
.gs-footer__title { text-transform: uppercase; letter-spacing: .12em; font-size: 13px; color: var(--primary); }
.gs-footer__name { text-transform: uppercase; letter-spacing: .04em; font-size: 30px; }

/* Misc */
.gs-theme-toggle { clip-path: none; }
::selection { background: var(--primary); color: var(--on-primary); }
@media (prefers-reduced-motion: reduce) { .gs-pad { animation: none; } }

/* ===================== Layout v2: different structure, not just colour ===================== */
/* Header: logo | wide search | actions on row one, full-width menu bar on row two */
@media (min-width: 861px) {
	.gs-header__inner { row-gap: 0; padding-bottom: 0; }
	.gs-logo { order: 1; }
	.gs-search { order: 2; flex: 1 1 320px; max-width: 620px; margin: 0 auto; }
	.gs-header__actions { order: 3; }
	.gs-nav { order: 4; flex: 1 1 100%; margin-top: 12px; border-top: 1px solid var(--border); }
	.gs-nav__list { flex-wrap: wrap; justify-content: flex-start; gap: 0; }
	.gs-nav__list a { padding: 14px 18px; font-size: 13.5px; letter-spacing: .1em; }
	.gs-nav__list a:hover, .gs-nav__list .current-menu-item > a, .gs-nav__list .current_page_item > a { background: rgba(46,230,107,.08); }
}

/* Hero: left copy on black, right side is a slanted green slab with the controller on it */
@media (min-width: 900px) {
	.gs-hero::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 48%; z-index: 0; pointer-events: none;
		background: linear-gradient(160deg, #2ee66b 0%, #14a94a 55%, #0b6b27 100%);
		clip-path: polygon(24% 0, 100% 0, 100% 100%, 0 100%); }
	.gs-hero::before { display: none; }
	.gs-hero__dots { z-index: 0; }
	.gs-hero__inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 24px; padding-top: 72px; padding-bottom: 110px; }
	.gs-hero__ring { border-color: rgba(2,18,7,.28); }
	.gs-hero__ring--b { border-color: rgba(2,18,7,.4); }
	.gs-pad { filter: drop-shadow(0 28px 36px rgba(0,0,0,.55)); }
	.gs-hero__chips li { background: #0d0f0e; border-bottom-color: #2ee66b; }
	.gs-hero__art .gs-float { background: #0d0f0e; color: #f1f7f2; }
}
@media (max-width: 899px) { .gs-hero__inner { padding-bottom: 72px; } }
.gs-hero__title { text-shadow: 0 0 40px rgba(46,230,107,.18); }

/* Numbers strip overlaps the bottom of the hero */
.gs-stats-wrap { margin-top: -44px; padding-top: 0; position: relative; z-index: 3; }
.gs-stats { background: #0d0f0e; border: 1px solid rgba(46,230,107,.4); border-top: 3px solid var(--primary); box-shadow: 0 20px 50px rgba(0,0,0,.5); }
html[data-theme="light"] .gs-stats { background: #0d0f0e; }
html[data-theme="light"] .gs-stat__label { color: #9fb5a5; }

/* Games: vertical tab rail on the left, four-up grid on the right */
@media (min-width: 1000px) {
	.gs-tabs { display: grid; grid-template-columns: 210px minmax(0, 1fr); column-gap: 28px; align-items: start; }
	.gs-tabs__list { grid-column: 1; grid-row: 1; flex-direction: column; overflow: visible; gap: 0; margin: 0; padding: 0; position: sticky; top: 150px; border: 1px solid var(--border); background: var(--surface); counter-reset: t; }
	.gs-tabs__panel { grid-column: 2; grid-row: 1; }
	.gs-tabs .gs-tab { clip-path: none; border: 0; border-bottom: 1px solid var(--border); border-left: 4px solid transparent; background: transparent; color: var(--muted); text-align: left; justify-content: flex-start; min-height: 58px; padding: 0 18px; font-size: 14px; counter-increment: t; box-shadow: none; }
	.gs-tabs .gs-tab::before { content: "0" counter(t); color: var(--primary); font-family: var(--font-head); font-weight: 700; margin-right: 12px; font-size: 18px; }
	.gs-tabs .gs-tab:last-child { border-bottom: 0; }
	.gs-tabs .gs-tab[aria-selected="true"] { background: rgba(46,230,107,.1); color: var(--text); border-left-color: var(--primary); box-shadow: none; }
	.gs-tabs .gs-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* How it works: horizontal timeline with big outlined numbers */
.gs-how { counter-reset: step; gap: 0; border-top: 0; }
.gs-how__item { background: none; border: 0; border-top: 3px solid var(--border); border-radius: 0; padding: 26px 22px 6px 0; position: relative; counter-increment: step; }
.gs-how__item:first-child { border-top-color: var(--primary); }
.gs-how__item::before { content: "0" counter(step); display: block; font-family: var(--font-head); font-weight: 700; font-size: clamp(54px, 7vw, 84px); line-height: .9; color: transparent; -webkit-text-stroke: 1.5px var(--primary); margin-bottom: 8px; }
.gs-how__item::after { content: ""; position: absolute; top: -8px; left: 0; width: 13px; height: 13px; background: var(--primary); box-shadow: var(--glow); transform: rotate(45deg); }
.gs-how__item .gs-ico-tile { display: none; }
.gs-how__item:hover { transform: none; box-shadow: none; }

/* Footer: oversized wordmark */
.gs-footer__name { font-size: clamp(34px, 6vw, 64px); line-height: .95; font-style: italic; -webkit-text-stroke: 1px var(--primary); color: transparent; }

/* Stars in the rating box + trust strip */
.gs-stat__stars { display: flex; justify-content: center; gap: 4px; }
.gs-star svg { fill: var(--amber); stroke: var(--amber); filter: drop-shadow(0 0 8px rgba(255,200,61,.45)); }
.gs-star.is-off svg { fill: none; opacity: .35; filter: none; }
.gs-trustbar { padding-top: 22px; }
.gs-trustbar__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.gs-trustbar__item { display: flex; align-items: center; gap: 14px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--primary); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; font-size: 13px; line-height: 1.25; }
.gs-trustbar__ico { flex: 0 0 auto; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: rgba(46,230,107,.12); color: var(--primary); clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
@media (max-width: 900px) { .gs-trustbar__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .gs-trustbar__list { grid-template-columns: 1fr; } }

/* Featured release banner: slanted green slab, chamfered image */
.gs-feature { border-radius: 4px; background: linear-gradient(120deg, #0b0d0c 0%, #111512 55%, #13301f 100%); border: 1px solid rgba(46,230,107,.35); border-left: 4px solid var(--primary); box-shadow: var(--shadow), var(--glow); }
.gs-feature::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 46%; background: linear-gradient(160deg, #2ee66b, #0e7a10); clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%); opacity: .9; pointer-events: none; }
.gs-feature__dots { background-image: linear-gradient(rgba(46,230,107,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(46,230,107,.08) 1px, transparent 1px); background-size: 40px 40px; z-index: 0; }
.gs-feature__copy, .gs-feature__art { z-index: 1; }
.gs-feature__img { border-radius: 0; clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px); box-shadow: 0 18px 40px rgba(0,0,0,.5); }
.gs-feature__badge { background: var(--amber); color: #241800; border-radius: 0; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); letter-spacing: .12em; }
.gs-feature__title { text-transform: uppercase; font-style: italic; }
.gs-feature__text { color: #cfe3d4; }
.gs-feature__price { color: #fff; }
.gs-feature__price del { opacity: .55; }
.gs-feature__price ins { color: var(--primary); text-decoration: none; }
.gs-feature .gs-btn--white { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.gs-feature .gsx-countdown__unit { background: rgba(46,230,107,.12); border: 1px solid rgba(46,230,107,.35); border-radius: 0; color: #fff; }
.gs-feature .gsx-countdown__unit:last-child { background: var(--primary); color: var(--on-primary); }
.gs-feature .gsx-countdown__unit:last-child .gsx-countdown__label { color: var(--on-primary); }
@media (max-width: 760px) { .gs-feature::after { width: 100%; opacity: .12; clip-path: none; } }

/* Plugin boxes that were hard-coded purple */
.gsx-member-box, .gsx-quote--premium { border-radius: 4px; background: linear-gradient(160deg, #0b0d0c, #141a16 60%, #10281a); border: 1px solid rgba(46,230,107,.4); border-left: 4px solid var(--primary); box-shadow: var(--shadow), var(--glow); position: relative; overflow: hidden; }
.gsx-member-box::after { content: ""; position: absolute; right: 0; top: 0; width: 38%; height: 100%; background: linear-gradient(160deg, rgba(46,230,107,.22), transparent 70%); clip-path: polygon(40% 0, 100% 0, 100% 100%, 0 100%); pointer-events: none; }
.gsx-member-box > * { position: relative; z-index: 1; }
.gsx-member-box__icon { border-radius: 0; clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px); }
.gsx-member-box__label { text-transform: uppercase; letter-spacing: .14em; color: var(--primary); }
.gsx-member-box__price { color: #fff; text-shadow: 0 0 22px rgba(46,230,107,.35); }
.gsx-member-box__list li { padding-left: 18px; position: relative; }
.gsx-member-box__list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 8px; height: 8px; background: var(--primary); transform: rotate(45deg); }
.gsx-member-box__btn { border-radius: 0; background: var(--primary); color: var(--on-primary); text-transform: uppercase; letter-spacing: .08em; clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px); filter: drop-shadow(0 0 14px rgba(46,230,107,.4)); }
.gsx-quote__tag { border-radius: 0; clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px); }

/* Customer ranks: game-style tier plates */
.gs-ranks { counter-reset: lvl; }
.gs-rank-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; }
.gs-rank { counter-increment: lvl; position: relative; border: 0; border-radius: 0; padding: 30px 12px 18px; min-height: 176px; justify-content: flex-end; overflow: hidden;
	background: linear-gradient(170deg, color-mix(in srgb, var(--rank-color) 28%, #050806) 0%, #050806 62%);
	clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
	transition: transform .15s ease, filter .15s ease; }
.gs-rank::before { content: "LV " counter(lvl); position: absolute; left: 12px; top: 8px; font-family: var(--font-head); font-weight: 700; font-size: 13px; letter-spacing: .16em; color: var(--rank-color); }
.gs-rank::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; background: var(--rank-color); }
.gs-rank:hover { transform: translateY(-3px); filter: drop-shadow(0 0 14px var(--rank-color)); }
.gs-rank__dot { width: 56px; height: 62px; border-radius: 0; margin: 0 0 12px; background: linear-gradient(160deg, color-mix(in srgb, var(--rank-color) 60%, #fff), var(--rank-color) 55%, color-mix(in srgb, var(--rank-color) 55%, #000)); clip-path: polygon(50% 0, 100% 22%, 100% 78%, 50% 100%, 0 78%, 0 22%); }
.gs-rank__name { text-transform: uppercase; letter-spacing: .08em; font-size: 20px; color: #fff; text-shadow: 0 0 18px var(--rank-color); }
.gs-rank__off { color: var(--rank-color); text-transform: uppercase; letter-spacing: .1em; font-size: 12px; }
.gs-rank.is-current { box-shadow: none; outline: 0; background: linear-gradient(170deg, color-mix(in srgb, var(--rank-color) 45%, #050806) 0%, #050806 70%); filter: drop-shadow(0 0 12px var(--primary)); }
.gs-rank.is-current::after { height: 8px; background: var(--primary); }
.gs-rank.is-current .gs-rank__name::after { content: "YOU"; display: block; margin-top: 6px; font-size: 11px; letter-spacing: .2em; color: var(--primary); text-shadow: none; }
html[data-theme="light"] .gs-rank__name { color: #fff; }

/* Last blue/purple leftovers */
.gsx-badge--rank { background: #0d0f0e; color: var(--primary); border: 1px solid rgba(46,230,107,.4); }
.gs-search__thumb--letter { background: linear-gradient(135deg, #2ee66b, #0e7a10); color: #021207; }
.gs-member-perk, .gs-plan { border-radius: 4px; }
.gs-plan--best { background: linear-gradient(160deg, #0b0d0c, #141a16 60%, #10281a); border-color: var(--primary); }
.gs-plan--best .gs-plan__price { color: var(--primary); }

/* Membership box: beat the plugin stylesheet, which loads later */
body .gsx-member-box, body .gsx-quote--premium { background: linear-gradient(160deg, #0b0d0c, #141a16 60%, #10281a) !important; border-radius: 4px !important; border: 1px solid rgba(46,230,107,.4) !important; border-left: 4px solid #2ee66b !important; }
body .gsx-member-box__btn { background: #2ee66b !important; color: #021207 !important; border-radius: 0 !important; text-transform: uppercase; letter-spacing: .08em; }
body .gsx-member-box__icon { border-radius: 0 !important; }
body .gsx-member-box__label { color: #2ee66b !important; }
body .gsx-quote__tag { border-radius: 0 !important; }

/* ===================== Background: animated gradient + texture ===================== */
html[data-theme="dark"] { background: #040505; }
html[data-theme="light"] { background: #e9f3ec; }
html[data-theme="dark"] body { background: transparent; }
body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
	background:
		url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .75  0 0 0 0 .8  0 0 0 0 .77  0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"),
		repeating-linear-gradient(135deg, rgba(255,255,255,.03) 0 1px, transparent 1px 6px),
		linear-gradient(135deg, #030404 0%, #121514 34%, #0a0c0b 62%, #020303 100%);
	background-blend-mode: soft-light, normal, normal; }
body::after { content: ""; position: fixed; inset: -25%; z-index: -1; pointer-events: none; will-change: transform;
	background:
		radial-gradient(38% 32% at 18% 24%, rgba(46,230,107,.16), transparent 70%),
		radial-gradient(34% 30% at 82% 68%, rgba(16,160,70,.17), transparent 70%),
		radial-gradient(28% 28% at 62% 14%, rgba(0,200,120,.10), transparent 70%),
		radial-gradient(30% 26% at 30% 85%, rgba(20,150,50,.15), transparent 70%);
	animation: gs-drift 14s ease-in-out infinite alternate; }
html[data-theme="light"] body::before { background: linear-gradient(135deg, #f4faf6, #e2f1e7 50%, #eef7f1); }
html[data-theme="light"] body::after { opacity: .5; }
@keyframes gs-drift {
	0% { transform: translate3d(-8%, -6%, 0) rotate(0deg) scale(1); }
	50% { transform: translate3d(8%, 6%, 0) rotate(8deg) scale(1.15); }
	100% { transform: translate3d(-5%, 9%, 0) rotate(-6deg) scale(1.05); }
}
.gs-hero { background: transparent !important; }
.gs-hero__dots { opacity: .8; }
.gs-footer { background: linear-gradient(180deg, rgba(10,12,11,.9), #050606); }

/* ===================== Motion ===================== */
@keyframes gs-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes gs-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes gs-spin { to { transform: rotate(360deg); } }
@keyframes gs-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes gs-pulse { 0%,100% { filter: drop-shadow(0 0 8px rgba(46,230,107,.35)); } 50% { filter: drop-shadow(0 0 24px rgba(46,230,107,.8)); } }
@keyframes gs-stripes { to { background-position: 56px 0; } }
@keyframes gs-pop { 0% { transform: scale(.3) rotate(-30deg); opacity: 0; } 70% { transform: scale(1.25) rotate(6deg); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes gs-grow { from { width: 0; } to { width: 96px; } }
@keyframes gs-slab { from { opacity: .72; } to { opacity: .95; } }
@keyframes gs-sheen { 0%, 70% { transform: translateX(-130%) skewX(-20deg); } 100% { transform: translateX(330%) skewX(-20deg); } }

main { animation: gs-fade .5s ease both; }
.gs-hero__copy > * { animation: gs-rise .7s cubic-bezier(.2,.7,.2,1) both; }
.gs-hero__copy > :nth-child(1) { animation-delay: .05s; }
.gs-hero__copy > :nth-child(2) { animation-delay: .15s; }
.gs-hero__copy > :nth-child(3) { animation-delay: .27s; }
.gs-hero__copy > :nth-child(4) { animation-delay: .38s; }
.gs-hero__copy > :nth-child(5) { animation-delay: .5s; }
.gs-hero__art { animation: gs-fade 1s ease .25s both; }
.gs-hero__ring--a { animation: gs-spin 48s linear infinite; border-style: dashed; }
.gs-hero__ring--b { animation: gs-spin 30s linear infinite reverse; }
.gs-float--a { animation: gs-bob 4.2s ease-in-out infinite; }
.gs-float--b { animation: gs-bob 5.2s ease-in-out -2s infinite; }
.gs-hero__cta .gs-btn:first-child { animation: gs-pulse 2.6s ease-in-out infinite; }
.gs-announce { background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.14) 0 14px, transparent 14px 28px); background-size: 56px 100%; animation: gs-stripes 2.4s linear infinite; }

/* Scroll reveal (classes are added by arena.js, so nothing is hidden without JS) */
.gs-reveal { opacity: 0; transform: translateY(30px); transition: opacity .65s ease var(--d, 0ms), transform .65s cubic-bezier(.2,.7,.2,1) var(--d, 0ms) !important; }
.gs-reveal.is-in { opacity: 1; transform: none; }
.gs-stat--live .gs-star { animation: gs-pop .55s cubic-bezier(.2,.8,.3,1.2) both; }
.gs-stat--live .gs-star:nth-child(2) { animation-delay: .1s; }
.gs-stat--live .gs-star:nth-child(3) { animation-delay: .2s; }
.gs-stat--live .gs-star:nth-child(4) { animation-delay: .3s; }
.gs-stat--live .gs-star:nth-child(5) { animation-delay: .4s; }
@supports (animation-timeline: view()) {
	.gs-section__head::after { animation: gs-grow linear both; animation-timeline: view(); animation-range: entry 10% entry 90%; }
}

/* Hover life */
.gs-btn, .gsx-btn { position: relative; overflow: hidden; }
.gs-btn::before, .gsx-btn::before { content: ""; position: absolute; top: 0; left: 0; width: 38%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent); transform: translateX(-130%) skewX(-20deg); pointer-events: none; }
.gs-btn:not(.gs-btn--outline):hover::before, .gsx-btn:hover::before { animation: gs-sheen .9s ease; }
.gs-btn:active, .gsx-btn:active { transform: translateY(1px) scale(.98); }
.gs-game-card { transition: transform .25s ease, border-color .15s ease, box-shadow .15s ease; }
.gs-game-card:hover { transform: translateY(-6px); }
.gs-game-card__media img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.gs-game-card:hover .gs-game-card__media img { transform: scale(1.08); }
.gs-trustbar__ico { transition: transform .2s ease, background .2s ease; }
.gs-trustbar__item:hover .gs-trustbar__ico { transform: rotate(-8deg) scale(1.12); background: rgba(46,230,107,.25); }
.gs-trustbar__item { transition: transform .2s ease, border-color .2s ease; }
.gs-trustbar__item:hover { transform: translateY(-3px); border-color: var(--primary); }
.gs-stat__num { transition: text-shadow .3s ease; }
.gs-stat:hover .gs-stat__num { text-shadow: 0 0 34px rgba(46,230,107,.8); }
.gs-nav__list a { transition: color .15s ease, background .15s ease, box-shadow .2s ease; }
.gs-feature::after { animation: gs-slab 5s ease-in-out infinite alternate; }
.gs-package, .gs-plan { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.gs-package:hover, .gs-plan:hover { transform: translateY(-5px); }
.gs-tab { transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .2s ease; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
	.gs-reveal { opacity: 1 !important; transform: none !important; }
}


/* Stronger background: moving light beams + transparent wrappers so the layers show through */
html::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .9;
	background: linear-gradient(115deg, transparent 0 38%, rgba(46,230,107,.04) 44%, rgba(46,230,107,.11) 50%, rgba(46,230,107,.04) 56%, transparent 62% 100%);
	background-size: 260% 100%; animation: gs-beam 9s ease-in-out infinite alternate; }
@keyframes gs-beam { from { background-position: 100% 0; } to { background-position: 0% 0; } }
html[data-theme="light"]::before { opacity: .35; }
.gs-main, .gs-home, .gs-section, .gs-page { background: transparent; }
@media (prefers-reduced-motion: reduce) { html::before { animation: none; } }

/* Dark gray panels with green accents */
.gs-hero__chips li, .gs-stats { background: #0d0f0e; }
.gs-footer { background: linear-gradient(180deg, rgba(10,12,11,.9), #050606); }
.gs-compare__col--premium, .gsx-quote--premium { background: linear-gradient(160deg, #0b0d0c, #151a17 60%, #0f2a18); }

/* Game cover images fill the whole tall card image, no gradient strip underneath */
.gs-game-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center top; }

/* Phone menu: the header blur trapped the fixed drawer inside the header, so it is removed. */
.gs-header { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; background: rgba(8,10,9,.97); }
html[data-theme="light"] .gs-header { background: rgba(255,255,255,.97); }
@media (max-width: 860px) {
	.gs-nav { width: min(88vw, 360px); background: #0b0d0c; border-right: 3px solid var(--primary); box-shadow: 18px 0 50px rgba(0,0,0,.6); padding: 0 0 24px; }
	html[data-theme="light"] .gs-nav { background: #0b0d0c; }
	.gs-nav__top { padding: 16px 16px 14px; border-bottom: 1px solid var(--border); }
	.gs-nav__title { font-size: 22px; text-transform: uppercase; letter-spacing: .12em; color: var(--primary); }
	.gs-nav__list { padding: 8px 0; }
	.gs-nav__list a { padding: 17px 20px; font-size: 16px; letter-spacing: .1em; color: #f1f5f2; border-bottom: 1px solid var(--border); border-left: 4px solid transparent; border-radius: 0; box-shadow: none !important; }
	.gs-nav__list a:hover, .gs-nav__list a:focus, .gs-nav__list .current-menu-item > a, .gs-nav__list .current_page_item > a { background: rgba(46,230,107,.1); color: var(--primary); border-left-color: var(--primary); }
	.gs-nav__extra { padding: 16px; margin-top: 8px; }
	.gs-overlay { background: rgba(0,0,0,.72); }
	.gs-nav .gs-points-pill, .gs-nav .gs-btn { clip-path: none; }
}

/* Homepage game cards: square cover images (the shop page keeps the tall covers) */
.gs-home .gs-game-card__media { aspect-ratio: 1 / 1; }
.gs-home .gs-game-card__media img { object-position: center 20%; }

/* Placeholder gradients (games without a cover): only gray and green shades */
.gs-grad-0 { background: linear-gradient(150deg, #0e1210, #1e8a45); }
.gs-grad-1 { background: linear-gradient(150deg, #151918, #2f4a3a); }
.gs-grad-2 { background: linear-gradient(150deg, #0b1a12, #16a34a); }
.gs-grad-3 { background: linear-gradient(150deg, #1a1e1c, #3d5a49); }
.gs-grad-4 { background: linear-gradient(150deg, #0e1210, #2ee66b); }
.gs-grad-5 { background: linear-gradient(150deg, #121615, #107c10); }
.gs-grad-6 { background: linear-gradient(150deg, #0b0d0c, #24704a); }
.gs-grad-7 { background: linear-gradient(150deg, #181c1a, #0e7a10); }

/* All game cards everywhere: the cover is a square and nothing else shows under it */
.gs-game-card .gs-game-card__media, .gs-home .gs-game-card__media { aspect-ratio: 1 / 1 !important; height: auto; }
.gs-game-card .gs-game-card__media.has-img { background: var(--surface2); }
.gs-game-card .gs-game-card__img, .gs-game-card .gs-game-card__media img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover !important; object-position: center center; }


/* Main menu bar: dark gray to almost black, slightly see-through */
.gs-header { background: linear-gradient(180deg, rgba(48,51,50,.9) 0%, rgba(22,24,23,.88) 55%, rgba(8,9,8,.86) 100%) !important; border-bottom: 1px solid rgba(46,230,107,.18); box-shadow: 0 8px 30px rgba(0,0,0,.35); }
@media (min-width: 861px) { .gs-header { -webkit-backdrop-filter: blur(12px) !important; backdrop-filter: blur(12px) !important; } }
@media (max-width: 860px) { .gs-header { background: linear-gradient(180deg, rgba(48,51,50,.96), rgba(12,13,12,.95)) !important; } }
html[data-theme="light"] .gs-header { background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(236,243,238,.92)) !important; }
.gs-nav { border-top-color: rgba(255,255,255,.07); }

/* Gamerscore page: the side panel is sticky; the generic card rule (position: relative) had pushed it down by its top offset */
@media (min-width: 1000px) { .gs-card.gs-gs-aside { position: sticky; top: 150px; } }

/* Wheel frame: off-white rim */
body .gsx-wheel__rim { stroke: #e6eae7 !important; stroke-width: 7 !important; }
body .gs-wheel .w-ring { stroke: #e6eae7 !important; }
body .gsx-wheel__disc { box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 14px 40px rgba(0,0,0,.55), 0 0 36px rgba(46,230,107,.18) !important; }
body .gsx-wheel__hub { stroke: #e6eae7 !important; }