/**
 * Download interstitial — styled to match xgame9's GameX theme.
 *
 * Tokens below are copied from gamex-theme/assets/css/variables.css so this page
 * reads as part of the same family. Kept standalone (no theme CSS is loaded
 * here) so nothing from the main site can drag rails, pop scripts or extra ad
 * slots onto the page.
 */

@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 100 900;
	font-display: optional;
	src: url('/go/assets/fonts/inter-var-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
}

:root {
	--gx-accent:         hsl(211, 100%, 50%);
	--gx-accent-hover:   hsl(211, 100%, 60%);

	--gx-bg-primary:     hsl(0, 0%, 0%);
	--gx-bg-secondary:   hsl(0, 0%, 5%);
	--gx-bg-tertiary:    hsl(0, 0%, 14%);
	--gx-bg-card:        hsl(0, 0%, 10%);
	--gx-bg-card-hover:  hsl(0, 0%, 14%);

	--gx-text-primary:   hsl(0, 0%, 98%);
	--gx-text-secondary: hsl(0, 0%, 72%);
	--gx-text-muted:     hsl(0, 0%, 50%);

	--gx-border:         hsl(0, 0%, 15%);
	--gx-border-light:   hsl(0, 0%, 20%);

	--gx-tag-bg:         hsl(0, 0%, 18%);
	--gx-tag-text:       hsl(0, 0%, 72%);

	--gx-shadow-card:    0 2px 8px rgba(0, 0, 0, .3);
	--gx-shadow-md:      0 4px 12px rgba(0, 0, 0, .4);

	--gx-font-sans:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

	--gx-text-xs:        .75rem;
	--gx-text-sm:        .8125rem;
	--gx-text-base:      .9375rem;
	--gx-text-md:        1rem;
	--gx-text-lg:        1.125rem;
	--gx-text-xl:        1.25rem;
	--gx-text-2xl:       1.5rem;
	--gx-text-3xl:       1.875rem;

	--gx-sp-1: .25rem;  --gx-sp-2: .5rem;   --gx-sp-3: .75rem;
	--gx-sp-4: 1rem;    --gx-sp-5: 1.25rem; --gx-sp-6: 1.5rem;
	--gx-sp-8: 2rem;    --gx-sp-10: 2.5rem; --gx-sp-12: 3rem;

	--gx-container-max: 1400px;
	--gx-content-max:   1120px;   /* nav and content share this width */
	--gx-container-pad: 1rem;
	--gx-navbar-height: 56px;
	--gx-card-radius:  .5rem;
	--gx-radius-sm:    .25rem;
	--gx-radius-md:    .5rem;
	--gx-radius-lg:    .75rem;
	--gx-radius-full:  50rem;

	--gx-transition: 150ms ease;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: var(--gx-font-sans);
	font-size: var(--gx-text-base);
	line-height: 1.5;
	color: var(--gx-text-primary);
	background-color: var(--gx-bg-primary);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	min-height: 100vh;
	padding-top: var(--gx-navbar-height);
}

a { color: var(--gx-accent); text-decoration: none; }
a:hover { color: var(--gx-accent-hover); }

.gx-container {
	width: 100%;
	max-width: var(--gx-container-max);
	margin-inline: auto;
	padding-inline: var(--gx-container-pad);
}

/* ─────────────────────────────────────────────────────────── navbar */
.gx-navbar {
	position: fixed;
	top: 0; left: 0; right: 0;
	height: var(--gx-navbar-height);
	background: rgba(17, 19, 23, .75);
	border-bottom: 1px solid rgba(46, 49, 56, .4);
	z-index: 300;
	backdrop-filter: saturate(180%) blur(20px);
	-webkit-backdrop-filter: saturate(180%) blur(20px);
	display: flex;
	align-items: center;
}

.gx-navbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--gx-sp-4);
	/* Overrides .gx-container's 1400px so the logo and back link line up with
	   the column below rather than sitting wider than it. */
	max-width: var(--gx-content-max);
}
.gx-navbar__brand { display: inline-flex; align-items: center; }
.gx-navbar__logo { display: block; height: 26px; width: auto; }

.gx-navbar__back {
	font-size: var(--gx-text-sm);
	font-weight: 500;
	color: var(--gx-text-secondary);
}
.gx-navbar__back:hover { color: var(--gx-text-primary); }

/* ─────────────────────────────────────────────────────────── shell */
/* Top padding is deliberately small: the navbar already offsets the body by its
   own height, and this is the most valuable space on the page. */
.gx-main { max-width: var(--gx-content-max); margin-inline: auto; padding: var(--gx-sp-5) var(--gx-container-pad) var(--gx-sp-12); }

/* ─────────────────────────────────────────────────────────── hero */
/* No panel behind the countdown: it sits directly on the page background so the
   button and the ad below are the only things carrying visual weight. */
/* No top padding -- .gx-main already spaces this off the navbar, and stacking
   both pushed the countdown and the first ad below the fold for no reason. */
.gx-dl {
	padding: 0 var(--gx-sp-5) var(--gx-sp-6);
	text-align: center;
}

.gx-dl__title {
	margin: 0 0 var(--gx-sp-3);
	font-size: var(--gx-text-2xl);
	font-weight: 700;
	letter-spacing: -.02em;
	color: var(--gx-text-primary);
	line-height: 1.25;
}

.gx-tags { display: flex; flex-wrap: wrap; gap: var(--gx-sp-2); justify-content: center; min-height: 28px; }

.gx-tag {
	display: inline-flex;
	align-items: center;
	gap: var(--gx-sp-1);
	padding: var(--gx-sp-1) var(--gx-sp-3);
	border-radius: var(--gx-radius-full);
	background: var(--gx-tag-bg);
	color: var(--gx-tag-text);
	font-size: var(--gx-text-xs);
	font-weight: 500;
	line-height: 1.6;
}
.gx-tag strong { color: var(--gx-text-primary); font-weight: 600; }

/* The waiting and ready states occupy the SAME grid cell, so the stage is always
   exactly as tall as the taller of the two and the swap shifts nothing below it.
   The inactive one is hidden with visibility rather than display:none, because
   display:none would remove it from layout and take the reservation with it --
   which is what caused the jog when the button appeared. No hardcoded height. */
.gx-dl__stage {
	display: grid;
	justify-items: center;
	align-items: center;
}

.gx-dl__stage > div {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

.is-off { visibility: hidden; pointer-events: none; }

/* ─────────────────────────────────────────────────── linear countdown */
.gx-progress {
	width: 100%;
	height: 6px;
	background: var(--gx-bg-tertiary);
	border-radius: var(--gx-radius-full);
	overflow: hidden;
}

.gx-progress__bar {
	width: 0;
	height: 100%;
	background: var(--gx-accent);
	border-radius: inherit;
}

.gx-dl__label { margin: var(--gx-sp-3) 0 0; font-size: var(--gx-text-sm); color: var(--gx-text-muted); }

/* ─────────────────────────────────────────────────────────── buttons */
.gx-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--gx-sp-2);
	padding: var(--gx-sp-2) var(--gx-sp-4);
	font-family: inherit;
	font-size: var(--gx-text-sm);
	font-weight: 600;
	border-radius: var(--gx-radius-md);
	border: 1px solid transparent;
	cursor: pointer;
	transition: background var(--gx-transition), color var(--gx-transition), border-color var(--gx-transition);
	white-space: nowrap;
	line-height: 1.5;
	max-width: 100%;
}

.gx-btn--primary { background: var(--gx-accent); color: #fff; }
.gx-btn--primary:hover { background: var(--gx-accent-hover); color: #fff; }

.gx-btn--secondary {
	background: var(--gx-bg-card);
	color: var(--gx-text-primary);
	border-color: var(--gx-border);
}
.gx-btn--secondary:hover { background: var(--gx-bg-card-hover); border-color: var(--gx-border-light); color: var(--gx-text-primary); }

.gx-btn--lg {
	padding: var(--gx-sp-3) var(--gx-sp-6);
	font-size: var(--gx-text-md);
	border-radius: var(--gx-radius-lg);
	white-space: normal;
}

.gx-btn:focus { outline: none; }
.gx-btn:focus-visible { outline: 2px solid var(--gx-accent); outline-offset: 2px; }

/* Reserve one line even while empty. This sits inside the ready state, so
   without it the block grows by a line at the moment the text is written and the
   whole stage -- and everything under it -- shifts down. */
.gx-dl__note {
	margin: var(--gx-sp-3) 0 0;
	font-size: var(--gx-text-xs);
	color: var(--gx-text-muted);
	min-height: 1.5em;
	line-height: 1.5;
}

.gx-actions { display: flex; flex-wrap: wrap; gap: var(--gx-sp-2); }

.gx-alert__msg { margin: 0 0 var(--gx-sp-3); }

.gx-alert {
	max-width: 620px;
	border: 1px solid var(--gx-border-light);
	background: var(--gx-bg-secondary);
	border-radius: var(--gx-radius-md);
	padding: var(--gx-sp-3) var(--gx-sp-4);
	text-align: left;
	color: var(--gx-text-secondary);
	font-size: var(--gx-text-sm);
}

/* Always in layout: this is populated from the token a moment after load, and
   collapsing it until then made everything below jump. .is-off hides it without
   giving the space back. */
.gx-hint {
	min-height: calc(1.5em + var(--gx-sp-3) * 2 + 2px);
	margin: 0 0 var(--gx-sp-8);
	padding: var(--gx-sp-3) var(--gx-sp-4);
	background: var(--gx-bg-secondary);
	border: 1px solid var(--gx-border);
	border-left: 2px solid var(--gx-accent);
	border-radius: var(--gx-radius-sm);
	font-size: var(--gx-text-sm);
	color: var(--gx-text-secondary);
	text-align: center;
}

/* ─────────────────────────────────────────────────────────── ads */
/* Slots reserve their height so a late creative cannot reflow the page, and are
   labelled: an unlabelled unit beside the primary button is the adjacency ad
   networks treat as deceptive. */
.gx-ad { margin: var(--gx-sp-8) 0; }

.gx-ad__box { display: flex; justify-content: center; align-items: center; overflow: hidden; }

/* Zone 1125301 is 908x270, which fits inside the 1120px column -- no breakout
   needed. The reserved height stops a late creative reflowing the page; it is
   released on narrow screens where the unit scales down. */
.gx-ad--native .gx-ad__box { min-height: 270px; }
.gx-ad--leader .gx-ad__box { min-height: 102px; }

/* Reserved heights are released once the unit has to scale below its declared
   size, otherwise they would leave dead space under it on small screens. */
@media (max-width: 940px) { .gx-ad--native .gx-ad__box { min-height: 0; } }
@media (max-width: 760px) { .gx-ad--leader .gx-ad__box { min-height: 0; } }

.gx-ad__box ins, .gx-ad__box iframe { max-width: 100%; }

/* ─────────────────────────────────────────────────────────── cards */
.gx-cols { display: grid; grid-template-columns: 1fr; gap: var(--gx-sp-4); margin-top: var(--gx-sp-8); }
@media (min-width: 780px) { .gx-cols { grid-template-columns: 1.4fr 1fr; } }

.gx-card {
	background: var(--gx-bg-card);
	border: 1px solid var(--gx-border);
	border-radius: var(--gx-card-radius);
	box-shadow: var(--gx-shadow-card);
	padding: var(--gx-sp-5);
}

.gx-card__title {
	margin: 0 0 var(--gx-sp-4);
	font-size: var(--gx-text-md);
	font-weight: 600;
	color: var(--gx-text-primary);
}

.gx-card p { margin: 0 0 var(--gx-sp-3); font-size: var(--gx-text-sm); color: var(--gx-text-secondary); }
.gx-card__note { font-size: var(--gx-text-xs); color: var(--gx-text-muted); margin: var(--gx-sp-3) 0 0; }

.gx-list { margin: 0; padding: 0; list-style: none; }
.gx-list li + li { border-top: 1px solid var(--gx-border); }
.gx-list a {
	display: block;
	padding: var(--gx-sp-3) 0;
	font-size: var(--gx-text-sm);
	color: var(--gx-text-secondary);
	transition: color var(--gx-transition);
}
.gx-list a:hover { color: var(--gx-text-primary); }

/* ─────────────────────────────────────────────────────────── popular */
/* Mirrors the game card from xgame9's gamex-theme: 5:3 thumb, lift on hover,
   image scales inside a clipped frame, two-line clamped title. */
.gx-pop { margin-top: var(--gx-sp-4); }

/* Fixed column counts rather than auto-fill: six cards divide evenly into 3x2
   and 2x3, where auto-fill left an orphan on the last row at common widths. */
.gx-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--gx-sp-4);
}

@media (min-width: 640px) {
	.gx-grid { grid-template-columns: repeat(3, 1fr); }
}

.gx-gamecard {
	display: block;
	background: var(--gx-bg-card);
	border: 1px solid var(--gx-border);
	border-radius: var(--gx-card-radius);
	overflow: hidden;
	box-shadow: var(--gx-shadow-card);
	transition: transform var(--gx-transition), box-shadow var(--gx-transition), border-color var(--gx-transition);
}

.gx-gamecard:hover {
	transform: translateY(-2px);
	box-shadow: var(--gx-shadow-md);
	border-color: var(--gx-border-light);
}

.gx-gamecard__thumb {
	display: block;
	position: relative;
	aspect-ratio: 5 / 3;      /* matches the theme's 329x196 'medium' size */
	overflow: hidden;
	background: var(--gx-bg-tertiary);
}

.gx-gamecard__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 300ms ease;
}

.gx-gamecard:hover .gx-gamecard__thumb img { transform: scale(1.05); }

.gx-gamecard__body { display: block; padding: var(--gx-sp-3); }

.gx-gamecard__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: var(--gx-text-sm);
	font-weight: 600;
	line-height: 1.25;
	color: var(--gx-text-primary);
}

.gx-gamecard__meta {
	display: block;
	margin-top: var(--gx-sp-1);
	font-size: var(--gx-text-xs);
	color: var(--gx-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.gx-gamecard:hover .gx-gamecard__title { color: var(--gx-accent); }


/* ─────────────────────────────────────────────────── file-host icons */
/* Lifted from the theme's download-button sprite (fileHostSpritesv5.png, copied
   here as filehosts.png so /go keeps owning its assets). One 480x16 sheet covers
   every host, so the whole set is a single 14KB request. */
.gx-tag__icon {
	display: inline-block;
	width: 16px;
	height: 16px;
	vertical-align: -3px;
	background-image: url('/go/assets/filehosts.png');
	background-repeat: no-repeat;
	flex: 0 0 16px;
}

.gx-tag__icon--anonfile { background-position: 0px 0px; }
.gx-tag__icon--anonfiles { background-position: 0px -0px; }
.gx-tag__icon--anonzip { background-position: -192px -0px; }
.gx-tag__icon--bun { background-position: -16px -0px; }
.gx-tag__icon--buzzheavier { background-position: -352px 0px; }
.gx-tag__icon--bzzhr { background-position: -352px 0px; }
.gx-tag__icon--catbox { background-position: -368px 0px; }
.gx-tag__icon--datanodes { background-position: -384px 0px; }
.gx-tag__icon--drive { background-position: -32px -0px; }
.gx-tag__icon--dropmefiles { background-position: -48px -0px; }
.gx-tag__icon--filedit { background-position: -64px -0px; }
.gx-tag__icon--fileknot { background-position: -80px -0px; }
.gx-tag__icon--files { background-position: -96px 0px; }
.gx-tag__icon--filesfm { background-position: -96px -0px; }
.gx-tag__icon--gofile { background-position: -400px 0px; }
.gx-tag__icon--gofiles { background-position: -112px -0px; }
.gx-tag__icon--google { background-position: -32px 0px; }
.gx-tag__icon--krakenfiles { background-position: -416px 0px; }
.gx-tag__icon--lzfiles { background-position: -128px -0px; }
.gx-tag__icon--mediafire { background-position: -144px -0px; }
.gx-tag__icon--mega { background-position: -160px -0px; }
.gx-tag__icon--mixdrop { background-position: -176px -0px; }
.gx-tag__icon--mixdrp { background-position: -176px 0px; }
.gx-tag__icon--mxdrop { background-position: -176px 0px; }
.gx-tag__icon--pixeldrain { background-position: -208px -0px; }
.gx-tag__icon--racaty { background-position: -224px -0px; }
.gx-tag__icon--terminal { background-position: -240px -0px; }
.gx-tag__icon--transfaze { background-position: -336px -0px; }
.gx-tag__icon--transfer { background-position: -256px 0px; }
.gx-tag__icon--transfersh { background-position: -256px -0px; }
.gx-tag__icon--uploadhaven { background-position: -272px -0px; }
.gx-tag__icon--uploadnow { background-position: -432px 0px; }
.gx-tag__icon--uptobox { background-position: -288px -0px; }
.gx-tag__icon--vikingfile { background-position: -448px 0px; }
.gx-tag__icon--wdho { background-position: -464px 0px; }
.gx-tag__icon--workupload { background-position: -304px -0px; }
.gx-tag__icon--yourfilestore { background-position: -320px -0px; }

/* ─────────────────────────────────────────────────────────── footer */
.gx-footer {
	margin-top: var(--gx-sp-10);
	padding: var(--gx-sp-6) var(--gx-container-pad);
	text-align: center;
	font-size: var(--gx-text-xs);
	color: var(--gx-text-muted);
	border-top: 1px solid var(--gx-border);
}
.gx-footer a { color: var(--gx-text-secondary); margin: 0 var(--gx-sp-2); }
.gx-footer a:hover { color: var(--gx-text-primary); }

[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
	* { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}