/* ==========================================================================
   ArcanePlayer — Banner system (inc/ads.php, assets/js/ads.js)

   Cache-safe by design: the server prints the same HTML for everyone, and
   the visitor's OS / screen decide what is visible, here, in CSS:

     <html class="sg-js is-desktop|is-mobile is-win|is-mac">  <- set by a tiny
                                                   inline script in <head>
     data-sg-platforms="win" | "mac" | "win mac"   <- which OS the offer is for
     data-sg-bp="all|desktop|tablet-up|mobile|rail" <- which screens show it

   A banner is shown when the visitor's OS is in its platforms list; the
   "Copy link for your PC" box is shown instead when it isn't. Everything
   reserves its size up front (width/height + aspect-ratio), so showing or
   hiding never shifts the layout after first paint.
   ========================================================================== */

:root {
	--sg-z-sticky-ad: 40;
	--sg-z-popup: 100001; /* above the WP admin bar (99999), so it can never hide the popup */
}

/* ---- 1) Visibility: OS gate -------------------------------------------- */

.sg-ad,
.sg-ad-copy,
.sg-ad-sticky,
.sg-navbar__ad {
	display: none;
}

html.is-win .sg-ad[data-sg-platforms~="win"],
html.is-mac .sg-ad[data-sg-platforms~="mac"] {
	display: block;
}

html.is-win .sg-ad-sticky[data-sg-platforms~="win"],
html.is-mac .sg-ad-sticky[data-sg-platforms~="mac"] {
	display: block;
}

/* Copy box: the exact opposite of the banner gate (and it needs JS to copy). */
html.sg-js:not(.is-win) .sg-ad-copy[data-sg-platforms="win"],
html.sg-js:not(.is-mac) .sg-ad-copy[data-sg-platforms="mac"],
html.sg-js:not(.is-win):not(.is-mac) .sg-ad-copy[data-sg-platforms="win mac"] {
	display: flex;
}

/* Other-OS fallback (sg_fallback_game): its CTA box / CTA pill carry the
   fallback's OS list and show like a banner; whatever they replace (the copy
   box, the game's own CTA pill) carries data-sg-fb-hide and hides for them. */
.sg-ad-fallback,
.sg-fb-cta {
	display: none;
}

html.is-win .sg-ad-fallback[data-sg-platforms~="win"],
html.is-mac .sg-ad-fallback[data-sg-platforms~="mac"],
html.is-win .sg-fb-cta[data-sg-platforms~="win"],
html.is-mac .sg-fb-cta[data-sg-platforms~="mac"] {
	display: flex;
}

html.is-win [data-sg-fb-hide~="win"],
html.is-mac [data-sg-fb-hide~="mac"] {
	display: none !important;
}

/* ---- 2) Visibility: screen gate ---------------------------------------- */

@media (max-width: 1023px) {
	[data-sg-bp="desktop"] {
		display: none !important;
	}
}

@media (max-width: 767px) {
	[data-sg-bp="tablet-up"] {
		display: none !important;
	}
}

@media (min-width: 768px) {
	[data-sg-bp="mobile"] {
		display: none !important;
	}
}

@media (max-width: 1499px) {
	[data-sg-bp="rail"] {
		display: none !important;
	}
}

/* The closed mobile bar never comes back during this visit. */
html.sg-sticky-closed .sg-ad-sticky {
	display: none !important;
}

/* ---- 3) The banner itself ---------------------------------------------- */

.sg-ad {
	margin: 28px auto;
	text-align: center;
	line-height: 0;
}

.sg-ad__label {
	display: block;
	margin: 0 0 6px;
	font-family: var(--sg-font-body, 'Manrope', sans-serif);
	font-size: 10px;
	line-height: 1;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--sg-color-dash, #4A5A4A);
}

.sg-ad a.sg-ad__link {
	position: relative;
	display: block;
	width: 100%;
	margin: 0 auto;
	text-decoration: none;
	border: 0;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.sg-ad .sg-ad__img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: 100%;
	margin: 0;
	border: 0;
	object-fit: cover;
	background-color: var(--sg-color-card-bg, #121812);
}

/* ---- 3b) Attention effects (banners + homepage popup) ------------------
   Drawn on top of the image with two pseudo-elements, so the creatives
   themselves are never touched. Only opacity and transform animate (GPU
   composited, no repaint of the image, no layout shift):
     ::before  neon border glow, opacity pulses every 2.5s
     ::after   diagonal light sweep, ~0.8s pass every 4.5s
   The link clips the sweep (overflow: hidden); its own faint outer glow is
   a static box-shadow, which overflow never clips. */

.sg-ad a.sg-ad__link,
.sg-popup a.sg-popup__link {
	position: relative;
	overflow: hidden;
	box-shadow: 0 0 10px rgba(57, 255, 20, 0.18);
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.sg-ad a.sg-ad__link::before,
.sg-ad a.sg-ad__link::after,
.sg-popup a.sg-popup__link::before,
.sg-popup a.sg-popup__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.sg-ad a.sg-ad__link::before,
.sg-popup a.sg-popup__link::before {
	box-shadow: inset 0 0 0 1px #39FF14, inset 0 0 14px rgba(57, 255, 20, 0.45);
	opacity: 0.35;
	animation: sg-ad-pulse 2.5s ease-in-out infinite;
}

.sg-ad a.sg-ad__link::after,
.sg-popup a.sg-popup__link::after {
	background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.28) 50%, transparent 65%);
	transform: translateX(-100%);
	animation: sg-ad-shine 4.5s ease-in-out 1s infinite;
}

@keyframes sg-ad-pulse {
	0%, 100% { opacity: 0.35; }
	50%      { opacity: 0.8; }
}

/* 18% of 4.5s ~ 0.8s sweep, then it rests off-screen until the next loop. */
@keyframes sg-ad-shine {
	0%        { transform: translateX(-100%); }
	18%, 100% { transform: translateX(100%); }
}

/* Hover / keyboard focus: pulse stops at full strength, brighter outer
   glow, slight zoom. */
.sg-ad a.sg-ad__link:hover,
.sg-ad a.sg-ad__link:focus-visible,
.sg-ad--pending.is-visible a.sg-ad__link:hover,
.sg-ad--pending.is-visible a.sg-ad__link:focus-visible,
.sg-popup a.sg-popup__link:hover,
.sg-popup a.sg-popup__link:focus-visible {
	box-shadow: 0 0 0 1px rgba(57, 255, 20, 0.7), 0 0 26px rgba(57, 255, 20, 0.45);
	transform: scale(1.02);
	outline: none;
}

.sg-ad a.sg-ad__link:hover::before,
.sg-ad a.sg-ad__link:focus-visible::before,
.sg-popup a.sg-popup__link:hover::before,
.sg-popup a.sg-popup__link:focus-visible::before {
	animation: none;
	opacity: 1;
}

/* One rule per size: max width + the aspect ratio that reserves the space. */
.sg-ad--970x250 a.sg-ad__link { max-width: 970px; aspect-ratio: 970 / 250; }
.sg-ad--728x90 a.sg-ad__link  { max-width: 728px; aspect-ratio: 728 / 90; }
.sg-ad--468x60 a.sg-ad__link  { max-width: 468px; aspect-ratio: 468 / 60; }
.sg-ad--300x600 a.sg-ad__link { max-width: 300px; aspect-ratio: 300 / 600; }
.sg-ad--300x250 a.sg-ad__link { max-width: 300px; aspect-ratio: 300 / 250; }
.sg-ad--250x250 a.sg-ad__link { max-width: 250px; aspect-ratio: 250 / 250; }
.sg-ad--200x200 a.sg-ad__link { max-width: 200px; aspect-ratio: 200 / 200; }
.sg-ad--160x600 a.sg-ad__link { max-width: 160px; aspect-ratio: 160 / 600; }
.sg-ad--120x600 a.sg-ad__link { max-width: 120px; aspect-ratio: 120 / 600; }
.sg-ad--320x100 a.sg-ad__link { max-width: 320px; aspect-ratio: 320 / 100; }
.sg-ad--320x50 a.sg-ad__link  { max-width: 320px; aspect-ratio: 320 / 50; }

/* ---- 4) Fade-in on scroll ---------------------------------------------- */
/* ads.js adds .sg-ad--pending only to banners that start BELOW the fold, so
   nothing visible on load ever flashes; without JS they're simply visible. */

.sg-ad--pending a.sg-ad__link {
	opacity: 0;
	transform: translateY(14px);
}

.sg-ad--pending.is-visible a.sg-ad__link {
	opacity: 1;
	transform: none;
	transition: opacity 0.7s ease, transform 0.7s ease, box-shadow 0.25s ease;
}

/* ---- 5) "Copy link for your PC" box ------------------------------------ */

.sg-ad-copy,
.sg-ad-fallback {
	flex-direction: column;
	align-items: center;
	gap: 8px;
	max-width: 468px;
	margin: 28px auto;
	padding: 16px 20px;
	text-align: center;
	background-color: var(--sg-color-card-bg, #121812);
	border: 1px dashed var(--sg-color-border, #2A332A);
	border-left: 3px solid var(--sg-color-accent-start, #39FF14);
}

.sg-ad-copy__btn,
.sg-ad-fallback__btn {
	cursor: pointer;
	font-family: var(--sg-font-display, 'Rajdhani', sans-serif);
	font-weight: 700;
	font-size: 14px;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: #05130a;
	background: linear-gradient(90deg, var(--sg-color-accent-start, #39FF14), var(--sg-color-accent-end, #00B140));
	border: 0;
	border-radius: 999px;
	padding: 10px 24px;
	transition: box-shadow 0.25s ease;
}

.sg-ad-copy__btn:hover,
.sg-ad-copy__btn:focus-visible,
.sg-ad-fallback__btn:hover,
.sg-ad-fallback__btn:focus-visible {
	box-shadow: 0 0 20px rgba(57, 255, 20, 0.45);
	outline: none;
}

.sg-ad-copy__btn.is-copied {
	background: var(--sg-color-card-notch, #1A231A);
	color: var(--sg-color-accent-start, #39FF14);
	box-shadow: inset 0 0 0 1px var(--sg-color-accent-start, #39FF14);
}

.sg-ad-copy__note {
	font-family: var(--sg-font-body, 'Manrope', sans-serif);
	font-size: 12px;
	line-height: 1.4;
	color: var(--sg-color-text-meta, #7C8A7C);
}

/* Fallback: the link is a real <a> (class "cta", go./to. host), so the
   tracking snippets treat it like any other CTA. */
a.sg-ad-fallback__btn {
	display: inline-block;
	line-height: 1.2;
	text-decoration: none;
}

a.sg-ad-fallback__btn:hover,
a.sg-ad-fallback__btn:focus-visible {
	color: #05130a;
}

/* The "Not available on Mac? Try this instead:" line above a fallback CTA. */
.sg-ad-fallback__note,
.sg-ad__fallback-note,
.sg-fb-cta__note {
	display: block;
	margin: 0 0 8px;
	font-family: var(--sg-font-body, 'Manrope', sans-serif);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--sg-color-text-body, #A9B8A9);
}

.sg-ad-fallback__note {
	margin: 0;
}

.sg-fb-cta {
	flex-direction: column;
	align-items: flex-start;
}

.sg-game-card--centered .sg-fb-cta {
	align-items: center;
	align-self: center;
	text-align: center;
}

.sg-sidebar-cta .sg-fb-cta {
	align-items: center;
	text-align: center;
}

/* ---- 6) Placement: articles -------------------------------------------- */

.sg-single {
	position: relative; /* anchor for the side rails */
}

.sg-ad-bar {
	max-width: 1280px;
	margin: 0 auto 8px;
	text-align: center;
}

.sg-ad-bar .sg-ad {
	margin: 0 auto 24px;
}

.sg-single .sg-ad-bar {
	position: relative;
	z-index: var(--sg-z-content, 10);
}

/* Banners inside the article body and the sidebar. */
.sg-prose .sg-ad,
.sg-article .sg-ad-group .sg-ad {
	margin: 32px auto;
}

.sg-article .sg-ad-group--disclosure .sg-ad {
	margin: 20px auto 0;
}

.sg-prose .sg-ad-copy,
.sg-prose .sg-ad-fallback {
	margin: 32px auto;
}

/* Sidebar: three zones. Zone A holds the sticky CTA card (it sticks only
   inside zone A); zone C holds the sticky 300x600 and stretches to the
   bottom of the column, so each sticky piece has its own space and they
   can never overlap. */
.sg-sidebar {
	display: flex;
	flex-direction: column;
	align-self: stretch;
}

.sg-sidebar__zone {
	min-width: 0;
}

.sg-sidebar__zone--c {
	flex: 1 1 auto;
}

.sg-sidebar__zone--c .sg-ad--sticky-slot {
	position: sticky;
	top: 24px;
	z-index: var(--sg-z-sidebar-sticky, 20);
	margin: 0 auto;
}

.sg-sidebar .sg-ad {
	margin: 0 auto 32px;
}

/* Header banner (728x90, right of the logo). The row only switches layout
   for visitors who will really see the banner. */
@media (min-width: 1024px) {
	html.is-win .sg-navbar__inner--with-ad[data-sg-platforms~="win"] .sg-navbar__ad,
	html.is-mac .sg-navbar__inner--with-ad[data-sg-platforms~="mac"] .sg-navbar__ad {
		display: block;
	}

	html.is-win .sg-navbar__inner--with-ad[data-sg-platforms~="win"],
	html.is-mac .sg-navbar__inner--with-ad[data-sg-platforms~="mac"] {
		grid-template-columns: auto minmax(0, 1fr);
	}

	html.is-win .sg-navbar__inner--with-ad[data-sg-platforms~="win"] .sg-navbar__socials,
	html.is-mac .sg-navbar__inner--with-ad[data-sg-platforms~="mac"] .sg-navbar__socials {
		display: none;
	}

	html.is-win .sg-navbar__inner--with-ad[data-sg-platforms~="win"] .sg-navbar__logo,
	html.is-mac .sg-navbar__inner--with-ad[data-sg-platforms~="mac"] .sg-navbar__logo {
		justify-self: start;
	}
}

.sg-navbar__ad {
	justify-self: end;
	width: 100%;
	max-width: 728px;
}

.sg-navbar__ad .sg-ad {
	margin: 0 auto;
}

/* ---- 7) Side rails (160x600 left, 120x600 right; screens >= 1500px) ---- */

.sg-rail {
	display: none;
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: var(--sg-z-content, 10);
	pointer-events: none;
}

.sg-rail__sticky {
	position: sticky;
	top: 24px;
	padding-top: 24px;
	pointer-events: auto;
}

.sg-rail .sg-ad {
	margin: 0;
}

.sg-rail--left {
	width: 160px;
	right: calc(50% + 550px + 16px);
}

.sg-rail--right {
	width: 120px;
	left: calc(50% + 550px + 16px);
}

@media (min-width: 1500px) {
	.sg-rail {
		display: block;
	}

	/* Leave room for the rails on both sides of the content. */
	body.sg-has-rails .sg-single-layout,
	body.sg-has-rails .sg-ad-bar,
	body.sg-has-rails .sg-home-wrap {
		max-width: 1100px;
	}
}

.sg-rail-zone {
	position: relative;
}

/* ---- 8) Mobile sticky bar (320x50, closable) --------------------------- */

.sg-ad-sticky {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: var(--sg-z-sticky-ad, 40);
	padding: 6px 8px calc(6px + env(safe-area-inset-bottom, 0px));
	text-align: center;
	line-height: 0;
	background-color: rgba(5, 8, 5, 0.94);
	border-top: 1px solid var(--sg-color-border, #2A332A);
}

.sg-ad-sticky .sg-ad {
	margin: 0 auto;
}

.sg-ad-sticky__close {
	position: absolute;
	top: -26px;
	right: 8px;
	width: 26px;
	height: 26px;
	padding: 0;
	cursor: pointer;
	font-size: 18px;
	line-height: 24px;
	color: var(--sg-color-text-body, #A9B8A9);
	background-color: rgba(5, 8, 5, 0.94);
	border: 1px solid var(--sg-color-border, #2A332A);
	border-bottom: 0;
}

.sg-ad-sticky__close:hover,
.sg-ad-sticky__close:focus-visible {
	color: var(--sg-color-accent-start, #39FF14);
}

/* While the bar is showing: keep the page's last line and the floating
   video mini-player clear of it. */
@media (max-width: 767px) {
	html.is-win:not(.sg-sticky-closed) body.sg-bar-win,
	html.is-mac:not(.sg-sticky-closed) body.sg-bar-mac {
		padding-bottom: 66px;
	}

	html.is-win:not(.sg-sticky-closed) body.sg-bar-win .sg-sticky-video-dock,
	html.is-mac:not(.sg-sticky-closed) body.sg-bar-mac .sg-sticky-video-dock {
		bottom: 72px;
	}
}

/* ---- 9) Homepage layout + slots ---------------------------------------- */

.sg-home-wrap {
	width: calc(100% - 12vw);
	max-width: 1280px;
	margin: 0 auto;
}

.sg-home-content {
	min-width: 0;
}

.sg-home-content .sg-section {
	padding: 48px 0;
}

.sg-home-between {
	margin: 0;
}

.sg-home-slot {
	display: none;
}

/* Slots only exist for visitors who can see a matching banner (or the copy
   box), and reserve their height so filling them never shifts the page. */
html.is-win .sg-home-slot,
html.is-mac .sg-home-slot {
	display: block;
}

html.is-win .sg-home-slot--970x250,
html.is-mac .sg-home-slot--970x250 { min-height: 250px; }
html.is-win .sg-home-slot--728x90,
html.is-mac .sg-home-slot--728x90 { min-height: 90px; }
html.is-win .sg-home-slot--300x250,
html.is-mac .sg-home-slot--300x250 { min-height: 250px; }
html.is-win .sg-home-slot--300x600,
html.is-mac .sg-home-slot--300x600 { min-height: 600px; }

.sg-home-slot.is-empty {
	display: none !important;
}

.sg-home-slot .sg-ad {
	margin: 0 auto;
}

.sg-home-slot--970x250,
.sg-home-slot--728x90 {
	margin: 0 auto;
	max-width: 970px;
}

.sg-home-between .sg-home-slot--728x90 {
	margin: 8px auto;
}

.sg-home-aside {
	display: none;
	min-width: 0;
	align-self: stretch; /* full height of the sections, so the sticky 300x600 has room to travel */
}

@media (min-width: 1024px) {
	html.is-win .sg-home-wrap--with-aside,
	html.is-mac .sg-home-wrap--with-aside {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 300px;
		gap: 40px;
		align-items: start;
	}

	html.is-win .sg-home-wrap--with-aside .sg-home-aside,
	html.is-mac .sg-home-wrap--with-aside .sg-home-aside {
		display: block;
		padding-top: 48px;
	}

	.sg-home-aside .sg-home-slot--300x250 {
		margin-bottom: 32px;
	}

	.sg-home-aside__sticky {
		position: sticky;
		top: 24px;
	}
}

.sg-home-wrap--no-aside {
	display: block !important;
}

.sg-home-wrap--no-aside .sg-home-aside {
	display: none !important;
}

/* ---- 10) Homepage popup (desktop only) --------------------------------- */

.sg-popup[hidden] {
	display: none;
}

.sg-popup {
	position: fixed;
	inset: 0;
	z-index: var(--sg-z-popup, 200);
}

.sg-popup__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background-color: rgba(0, 0, 0, 0.75);
	opacity: 0;
	transition: opacity 0.3s ease;
}

.sg-popup.is-open .sg-popup__overlay {
	opacity: 1;
}

.sg-popup__panel {
	position: relative;
	/* Square, never wider than 520px or 80% of the screen width, and never
	   taller than 80% of the screen height (short screens scale it down). */
	width: min(520px, 80vw, 80vh);
	max-height: 80vh;
	aspect-ratio: 1 / 1;
	flex: 0 0 auto;
	transform: scale(0.96);
	transition: transform 0.3s ease;
	box-shadow: 0 0 0 1px rgba(57, 255, 20, 0.5), 0 0 48px rgba(57, 255, 20, 0.25);
	background-color: var(--sg-color-card-bg, #121812);
}

.sg-popup.is-open .sg-popup__panel {
	transform: none;
}

@supports (height: 1dvh) {
	.sg-popup__panel {
		width: min(520px, 80vw, 80dvh);
		max-height: 80dvh;
	}
}

.sg-popup__link,
.sg-popup__link img {
	display: block;
	width: 100%;
	height: 100%;
}

.sg-popup__link img {
	object-fit: cover;
}

/* Fallback popup: the "Not available on Mac? Try this instead:" line, laid
   over the top of the image (left of the close button). */
.sg-popup__note {
	position: absolute;
	top: 10px;
	left: 10px;
	right: 58px;
	z-index: 2;
	margin: 0;
	padding: 8px 12px;
	font-family: var(--sg-font-body, 'Manrope', sans-serif);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: #fff;
	background-color: rgba(0, 0, 0, 0.75);
	pointer-events: none;
}

.sg-popup__close {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 1;
	width: 38px;
	height: 38px;
	padding: 0;
	cursor: pointer;
	font-size: 26px;
	line-height: 34px;
	color: #fff;
	background-color: rgba(0, 0, 0, 0.7);
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	transition: box-shadow 0.25s ease, color 0.25s ease;
}

.sg-popup__close:hover,
.sg-popup__close:focus-visible {
	color: var(--sg-color-accent-start, #39FF14);
	box-shadow: 0 0 16px rgba(57, 255, 20, 0.5);
	outline: none;
}

/* Popup is a desktop feature: never rendered on narrow screens. */
@media (max-width: 1023px) {
	.sg-popup {
		display: none !important;
	}
}

/* ---- 11) Reduced motion ------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.sg-ad a.sg-ad__link,
	.sg-ad--pending.is-visible a.sg-ad__link,
	.sg-popup__overlay,
	.sg-popup__panel {
		transition: none;
	}

	.sg-ad--pending a.sg-ad__link {
		opacity: 1;
		transform: none;
	}

	.sg-ad a.sg-ad__link:hover,
	.sg-ad a.sg-ad__link:focus-visible,
	.sg-ad--pending.is-visible a.sg-ad__link:hover,
	.sg-ad--pending.is-visible a.sg-ad__link:focus-visible,
	.sg-popup a.sg-popup__link:hover,
	.sg-popup a.sg-popup__link:focus-visible {
		transform: none;
	}

	/* No pulse, no sweep: the border glow stays, static. */
	.sg-ad a.sg-ad__link::before,
	.sg-popup a.sg-popup__link::before {
		animation: none;
		opacity: 0.5;
	}

	.sg-ad a.sg-ad__link::after,
	.sg-popup a.sg-popup__link::after {
		animation: none;
		display: none;
	}
}