*,
::after,
::before {
	margin: 0;
	padding: 0;
	box-sizing: border-box
}

:root {
	--red: #DC143C;
	--red-dark: #8B0000;
	--red-deep: #5a0010;
	--bg: #0d0408;
	--bg2: #130609;
	--surface: #1a0a0f;
	--surface2: #231118;
	--border: rgba(220, 20, 60, 0.18);
	--border-h: rgba(220, 20, 60, 0.45);
	--text: #f0e8ea;
	--text-dim: #9a8085;
	--text-mute: #5a4048;
	--font-display: 'Bebas Neue', sans-serif;
	--font-body: 'DM Sans', sans-serif;
	--nav-h: 64px;
	--radius: 14px;
	--radius-sm: 8px
}

html {
	scroll-behavior: smooth
}

body {
	font-family: var(--font-body);
	background: var(--bg);
	color: var(--text);
	min-height: 100vh;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased
}

.nav-center-widget {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: .55rem;
	pointer-events: none;
	user-select: none;
	white-space: nowrap
}

.nav-clock {
	font-family: 'Bebas Neue', sans-serif;
	font-size: 1rem;
	letter-spacing: .12em;
	font-variant-numeric: tabular-nums;
	color: var(--red);
	text-shadow: 0 0 10px rgba(220, 20, 60, .55), 0 0 22px rgba(220, 20, 60, .25);
	line-height: 1
}

.nav-battery-sep {
	color: rgba(220, 20, 60, .25);
	font-size: 1rem;
	font-family: 'Bebas Neue', sans-serif
}

.nav-battery {
	display: flex;
	align-items: center;
	gap: .28rem;
	font-family: var(--font-body);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .03em;
	transition: color .4s, text-shadow .4s
}

.nav-battery i {
	font-size: 1.05rem;
	line-height: 1
}

.nav-battery.bat-red {
	color: #ef4444;
	text-shadow: 0 0 8px rgba(239, 68, 68, .6)
}

.nav-battery.bat-yellow {
	color: #facc15;
	text-shadow: 0 0 8px rgba(250, 204, 21, .5)
}

.nav-battery.bat-green {
	color: #4ade80;
	text-shadow: 0 0 8px rgba(74, 222, 128, .4)
}

.nav-battery.bat-charging {
	color: #38bdf8;
	text-shadow: 0 0 8px rgba(56, 189, 248, .5)
}

.navbar {
	position: sticky;
	top: 0;
	z-index: 900;
	height: var(--nav-h);
	background: rgba(13, 4, 8, .92);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-bottom: 1px solid var(--border)
}

.nav-inner {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 1.5rem;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative
}

.nav-logo {
	display: flex;
	align-items: center;
	gap: .75rem;
	text-decoration: none
}

.logo-icon {
	font-size: 1.8rem;
	filter: drop-shadow(0 0 10px rgba(220, 20, 60, .5))
}

.logo-name {
	font-family: var(--font-display);
	font-size: 1.4rem;
	letter-spacing: 1px;
	background: linear-gradient(135deg, var(--red-dark), var(--red));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	line-height: 1
}

.logo-sub {
	font-size: .68rem;
	color: var(--text-mute);
	letter-spacing: .5px;
	margin-top: 2px
}

.hamburger {
	display: flex;
	flex-direction: column;
	gap: 5px;
	background: 0 0;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	padding: 10px 12px;
	cursor: pointer;
	transition: border-color .2s, background .2s;
	position: relative;
	z-index: 1001
}

.hamburger span {
	display: block;
	width: 20px;
	height: 2px;
	background: var(--text-dim);
	border-radius: 2px;
	transition: all .3s ease;
	transform-origin: center
}

.hamburger:hover {
	border-color: var(--border-h);
	background: rgba(220, 20, 60, .08)
}

.hamburger:hover span {
	background: var(--red)
}

.hamburger.open span:first-child {
	transform: translateY(7px) rotate(45deg);
	background: var(--red)
}

.hamburger.open span:nth-child(2) {
	opacity: 0;
	transform: scaleX(0)
}

.hamburger.open span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
	background: var(--red)
}

.dropdown-menu {
	position: absolute;
	top: calc(100% + 10px);
	right: 1.5rem;
	background: var(--surface2);
	border: 1px solid var(--border-h);
	border-radius: var(--radius);
	min-width: 200px;
	overflow: hidden;
	opacity: 0;
	transform: translateY(-8px) scale(.97);
	pointer-events: none;
	transition: opacity .22s ease, transform .22s ease;
	box-shadow: 0 16px 48px rgba(0, 0, 0, .6), 0 0 0 1px rgba(220, 20, 60, .1);
	z-index: 1000
}

.dropdown-menu.open {
	opacity: 1;
	transform: translateY(0) scale(1);
	pointer-events: auto
}

.drop-item {
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: 1rem 1.25rem;
	text-decoration: none;
	color: var(--text-dim);
	font-size: .95rem;
	font-weight: 500;
	transition: background .15s, color .15s;
	border-bottom: 1px solid rgba(220, 20, 60, .08)
}

.drop-item:last-child {
	border-bottom: none
}

.drop-item.active-drop,
.drop-item:hover {
	background: rgba(220, 20, 60, .1);
	color: #fff
}

.drop-item.active-drop {
	color: var(--red)
}

.drop-icon {
	font-size: 1.1rem
}

.hero {
	position: relative;
	min-height: calc(100vh - var(--nav-h));
	display: flex;
	align-items: center;
	overflow: hidden;
	padding: 4rem 1.5rem 6rem
}

.hero-bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0
}

.hero-orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(120px)
}

.orb1 {
	width: 700px;
	height: 700px;
	background: radial-gradient(circle, rgba(139, 0, 0, .3) 0, transparent 70%);
	top: -200px;
	left: -200px;
	animation: orb-drift1 12s ease-in-out infinite alternate
}

.orb2 {
	width: 500px;
	height: 500px;
	background: radial-gradient(circle, rgba(220, 20, 60, .15) 0, transparent 70%);
	bottom: -100px;
	right: 0;
	animation: orb-drift2 15s ease-in-out infinite alternate
}

.orb3 {
	width: 300px;
	height: 300px;
	background: radial-gradient(circle, rgba(90, 0, 16, .4) 0, transparent 70%);
	top: 40%;
	right: 35%;
	filter: blur(80px)
}

@keyframes orb-drift1 {
	from {
		transform: translate(0, 0) scale(1)
	}

	to {
		transform: translate(60px, 40px) scale(1.1)
	}
}

@keyframes orb-drift2 {
	from {
		transform: translate(0, 0) scale(1)
	}

	to {
		transform: translate(-40px, -30px) scale(1.08)
	}
}

.hero-grid {
	position: absolute;
	inset: 0;
	background-image: linear-gradient(rgba(220, 20, 60, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(220, 20, 60, .05) 1px, transparent 1px);
	background-size: 50px 50px;
	mask-image: radial-gradient(ellipse 90% 90% at 50% 50%, black 0%, transparent 100%)
}

.hero-scanline {
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0, 0, 0, .04) 2px, rgba(0, 0, 0, .04) 4px);
	pointer-events: none
}

.hero-content {
	position: relative;
	z-index: 1;
	max-width: 1400px;
	margin: 0 auto;
	width: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 4rem
}

.hero-left {
	display: flex;
	flex-direction: column
}

.hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: 5px;
	text-transform: uppercase;
	color: var(--red);
	margin-bottom: 1.5rem;
	background: rgba(220, 20, 60, .08);
	border: 1px solid rgba(220, 20, 60, .2);
	border-radius: 100px;
	padding: .4rem 1rem;
	width: fit-content
}

.eyebrow-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--red);
	box-shadow: 0 0 8px var(--red);
	animation: blink-dot 1.4s ease-in-out infinite
}

@keyframes blink-dot {

	0%,
	100% {
		opacity: 1
	}

	50% {
		opacity: .2
	}
}

.hero-title {
	font-family: var(--font-display);
	line-height: .88;
	letter-spacing: 2px;
	margin-bottom: 1.8rem
}

.hero-title-top {
	display: block;
	font-size: clamp(5rem, 10vw, 9rem);
	color: var(--text);
	text-shadow: 0 0 80px rgba(220, 20, 60, .15)
}

.hero-title-bot {
	display: block;
	font-size: clamp(5rem, 10vw, 9rem);
	background: linear-gradient(135deg, #8b0000 0, #dc143c 50%, #ff6b6b 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 0 30px rgba(220, 20, 60, .4))
}

.hero-desc {
	font-size: 1.1rem;
	color: var(--text-dim);
	margin-bottom: 2.5rem;
	line-height: 1.7;
	max-width: 380px
}

.hero-ctas {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	margin-bottom: 3rem
}

.cta-primary {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .9rem 2rem;
	background: linear-gradient(135deg, var(--red-dark), var(--red));
	color: #fff;
	text-decoration: none;
	border-radius: var(--radius-sm);
	font-weight: 700;
	font-size: .9rem;
	letter-spacing: .5px;
	transition: transform .2s, box-shadow .2s;
	box-shadow: 0 4px 24px rgba(139, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .1)
}

.cta-primary:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 36px rgba(220, 20, 60, .5)
}

.cta-secondary {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .9rem 2rem;
	background: rgba(255, 255, 255, .04);
	color: var(--text);
	text-decoration: none;
	border-radius: var(--radius-sm);
	font-weight: 700;
	font-size: .9rem;
	border: 1px solid rgba(255, 255, 255, .12);
	transition: background .2s, border-color .2s, transform .2s;
	backdrop-filter: blur(8px)
}

.cta-secondary:hover {
	background: rgba(220, 20, 60, .1);
	border-color: var(--red);
	transform: translateY(-3px)
}

.hero-stats-row {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	padding: 1.25rem 1.5rem;
	background: rgba(255, 255, 255, .03);
	border: 1px solid rgba(255, 255, 255, .07);
	border-radius: var(--radius);
	backdrop-filter: blur(12px);
	width: fit-content
}

.hstat {
	text-align: center
}

.hstat-num {
	display: block;
	font-family: var(--font-display);
	font-size: 1.6rem;
	color: var(--red);
	letter-spacing: 1px;
	line-height: 1;
	text-shadow: 0 0 20px rgba(220, 20, 60, .4)
}

.hstat-label {
	display: block;
	font-size: .65rem;
	font-weight: 600;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: var(--text-mute);
	margin-top: 4px
}

.hstat-divider {
	width: 1px;
	height: 32px;
	background: rgba(255, 255, 255, .08)
}

.hero-logo-graphic {
	position: relative;
	width: 340px;
	height: 340px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column
}

.hlg-rings {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center
}

.hlg-ring {
	position: absolute;
	border-radius: 50%;
	border: 1px solid rgba(220, 20, 60, .2);
	animation: hlg-spin linear infinite
}

.hlg-ring1 {
	width: 300px;
	height: 300px;
	border-color: rgba(220, 20, 60, .15);
	animation-duration: 20s;
	border-style: dashed
}

.hlg-ring2 {
	width: 220px;
	height: 220px;
	border-color: rgba(220, 20, 60, .25);
	animation-duration: 14s;
	animation-direction: reverse
}

.hlg-ring3 {
	width: 150px;
	height: 150px;
	border-color: rgba(220, 20, 60, .35);
	animation-duration: 8s
}

@keyframes hlg-spin {
	from {
		transform: rotate(0)
	}

	to {
		transform: rotate(360deg)
	}
}

.hlg-core {
	position: relative;
	z-index: 2;
	width: 100px;
	height: 100px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(139, 0, 0, .4) 0, rgba(13, 4, 8, .8) 70%);
	border: 2px solid rgba(220, 20, 60, .5);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 0 30px rgba(220, 20, 60, .4), 0 0 80px rgba(220, 20, 60, .15), inset 0 0 30px rgba(220, 20, 60, .1);
	animation: hlg-pulse 3s ease-in-out infinite
}

@keyframes hlg-pulse {

	0%,
	100% {
		box-shadow: 0 0 30px rgba(220, 20, 60, .4), 0 0 80px rgba(220, 20, 60, .15), inset 0 0 30px rgba(220, 20, 60, .1)
	}

	50% {
		box-shadow: 0 0 50px rgba(220, 20, 60, .7), 0 0 120px rgba(220, 20, 60, .3), inset 0 0 40px rgba(220, 20, 60, .2)
	}
}

.hlg-logo {
	width: 60px;
	height: 60px;
	filter: drop-shadow(0 0 12px rgba(220, 20, 60, .8))
}

.hlg-particles {
	position: absolute;
	inset: 0;
	pointer-events: none
}

.hlg-p {
	position: absolute;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--red);
	box-shadow: 0 0 8px var(--red)
}

.p1 {
	top: 10%;
	left: 50%;
	animation: hlg-orbit 6s linear infinite
}

.p2 {
	top: 50%;
	left: 90%;
	animation: hlg-orbit 9s linear infinite 1s
}

.p3 {
	top: 85%;
	left: 30%;
	animation: hlg-orbit 7s linear infinite 2s
}

.p4 {
	top: 20%;
	left: 15%;
	animation: hlg-orbit 11s linear infinite .5s
}

.p5 {
	top: 65%;
	left: 75%;
	animation: hlg-orbit 8s linear infinite 3s
}

.p6 {
	top: 40%;
	left: 5%;
	animation: hlg-orbit 10s linear infinite 1.5s
}

@keyframes hlg-orbit {
	0% {
		transform: scale(1);
		opacity: 1
	}

	50% {
		transform: scale(1.8);
		opacity: .5
	}

	100% {
		transform: scale(1);
		opacity: 1
	}
}

.hlg-wordmark {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--font-display);
	font-size: 1.1rem;
	letter-spacing: 6px;
	color: rgba(220, 20, 60, .6);
	white-space: nowrap;
	text-shadow: 0 0 20px rgba(220, 20, 60, .3)
}

.game-card-v2 {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	cursor: pointer;
	transition: transform .25s ease, border-color .25s, box-shadow .25s;
	position: relative
}

.game-card-v2:hover {
	transform: translateY(-5px);
	border-color: rgba(220, 20, 60, .5);
	box-shadow: 0 16px 40px rgba(0, 0, 0, .5), 0 0 0 1px rgba(220, 20, 60, .15)
}

.game-card-v2.skeleton {
	height: 220px;
	cursor: default;
	background: linear-gradient(90deg, var(--surface) 25%, var(--surface2) 50%, var(--surface) 75%);
	background-size: 200% 100%;
	animation: skeleton-shimmer 1.6s ease-in-out infinite;
	border-color: transparent
}

@keyframes skeleton-shimmer {
	0% {
		background-position: 200% 0
	}

	100% {
		background-position: -200% 0
	}
}

.gcv2-thumb {
	position: relative;
	width: 100%;
	height: 175px;
	background: var(--surface2);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center
}

.gcv2-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s ease
}

.game-card-v2:hover .gcv2-thumb img {
	transform: scale(1.06)
}

.gcv2-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background .25s
}

.game-card-v2:hover .gcv2-overlay {
	background: rgba(0, 0, 0, .55)
}

.gcv2-play {
	color: #fff;
	font-size: 3rem;
	opacity: 0;
	transform: scale(.7);
	transition: opacity .2s, transform .2s;
	filter: drop-shadow(0 0 12px rgba(220, 20, 60, .8))
}

.game-card-v2:hover .gcv2-play {
	opacity: 1;
	transform: scale(1)
}

.gcv2-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	background: rgba(13, 4, 8, .92);
	border: 1px solid rgba(220, 20, 60, .3);
	color: var(--text-dim);
	border-radius: 6px;
	padding: 3px 9px;
	font-size: .65rem;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	gap: 5px
}

.gcv2-badge i {
	font-size: .75rem;
	color: var(--red)
}

.gcv2-info {
	padding: .9rem 1.1rem;
	display: flex;
	align-items: center;
	justify-content: space-between
}

.gcv2-name {
	font-weight: 600;
	font-size: .95rem;
	color: var(--text)
}

.gcv2-arrow {
	color: var(--red);
	font-size: 1.1rem;
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity .2s, transform .2s
}

.game-card-v2:hover .gcv2-arrow {
	opacity: 1;
	transform: translateX(0)
}

.hero-right {
	display: flex;
	justify-content: center;
	align-items: center
}

.hero-scroll-hint {
	position: absolute;
	bottom: 2rem;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .5rem;
	z-index: 2;
	opacity: .4
}

.hero-scroll-hint span {
	font-size: .6rem;
	font-weight: 700;
	letter-spacing: 4px;
	text-transform: uppercase;
	color: var(--text-dim)
}

.scroll-line {
	width: 1px;
	height: 40px;
	background: linear-gradient(to bottom, var(--text-dim), transparent);
	animation: scroll-pulse 1.8s ease-in-out infinite
}

@keyframes scroll-pulse {

	0%,
	100% {
		opacity: .4;
		transform: scaleY(1)
	}

	50% {
		opacity: 1;
		transform: scaleY(.6);
		transform-origin: top
	}
}

.nav-pills-section {
	padding: 0 1.5rem 3rem
}

.nav-pills-row {
	max-width: 1400px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem
}

.nav-pill {
	display: flex;
	align-items: center;
	gap: .9rem;
	padding: 1.1rem 1.4rem;
	background: rgba(255, 255, 255, .025);
	border: 1px solid rgba(255, 255, 255, .07);
	border-radius: var(--radius);
	text-decoration: none;
	transition: background .2s, border-color .2s, transform .2s, box-shadow .2s;
	position: relative;
	overflow: hidden
}

.nav-pill::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(220, 20, 60, .08) 0, transparent 60%);
	opacity: 0;
	transition: opacity .2s
}

.nav-pill:hover {
	border-color: rgba(220, 20, 60, .35);
	transform: translateY(-3px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, .3), 0 0 0 1px rgba(220, 20, 60, .1)
}

.nav-pill:hover::before {
	opacity: 1
}

.pill-icon {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: rgba(220, 20, 60, .12);
	border: 1px solid rgba(220, 20, 60, .2);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--red);
	flex-shrink: 0;
	transition: background .2s, box-shadow .2s
}

.nav-pill:hover .pill-icon {
	background: rgba(220, 20, 60, .2);
	box-shadow: 0 0 16px rgba(220, 20, 60, .25)
}

.pill-text {
	font-weight: 700;
	font-size: .9rem;
	color: var(--text);
	display: block;
	line-height: 1.2
}

.pill-count {
	font-family: var(--font-display);
	font-size: 1rem;
	color: var(--red);
	margin-left: auto;
	letter-spacing: 1px
}

.pill-sub {
	font-size: .7rem;
	color: var(--text-mute);
	display: block;
	margin-top: 1px
}

@media (max-width:900px) {
	.hero-content {
		grid-template-columns: 1fr;
		gap: 3rem
	}

	.hero-right {
		display: none
	}

	.nav-pills-row {
		grid-template-columns: repeat(2, 1fr)
	}
}

@media (max-width:500px) {
	.nav-pills-row {
		grid-template-columns: 1fr 1fr
	}

	.hero-stats-row {
		gap: 1rem;
		padding: 1rem
	}
}

.section {
	padding: 4rem 1.5rem
}

.section-wrap {
	max-width: 1400px;
	margin: 0 auto
}

.section-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 2rem
}

.section-title {
	font-family: var(--font-display);
	font-size: 2.2rem;
	letter-spacing: 1px;
	color: var(--text)
}

.fire {
	margin-right: .25rem
}

.see-more {
	color: var(--red);
	text-decoration: none;
	font-weight: 600;
	font-size: .9rem;
	letter-spacing: .3px;
	transition: color .2s, transform .2s;
	display: inline-flex;
	align-items: center
}

.see-more:hover {
	color: #ff6b6b;
	transform: translateX(4px)
}

.games-grid {
	display: grid;
	gap: 1.5rem
}

.four-col {
	grid-template-columns: repeat(4, 1fr)
}

@media (max-width:1100px) {
	.four-col {
		grid-template-columns: repeat(2, 1fr)
	}
}

@media (max-width:540px) {
	.four-col {
		grid-template-columns: 1fr
	}
}

.game-card {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	cursor: pointer;
	transition: transform .28s ease, border-color .28s, box-shadow .28s;
	will-change: transform;
	contain: layout style
}

.game-card:hover {
	transform: translateY(-6px);
	border-color: var(--border-h);
	box-shadow: 0 20px 40px rgba(0, 0, 0, .5), 0 0 0 1px rgba(220, 20, 60, .12)
}

.card-thumb {
	position: relative;
	width: 100%;
	height: 180px;
	background: var(--surface2);
	overflow: hidden
}

.card-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s ease;
	will-change: transform
}

.game-card:hover .card-thumb img {
	transform: scale(1.06)
}

.card-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .7);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity .2s
}

.game-card:hover .card-overlay {
	opacity: 1
}

.play-pill {
	background: linear-gradient(135deg, var(--red-dark), var(--red));
	color: #fff;
	padding: .6rem 1.4rem;
	border-radius: 100px;
	font-weight: 700;
	font-size: .85rem;
	letter-spacing: .3px;
	box-shadow: 0 4px 16px rgba(139, 0, 0, .5);
	transform: translateY(6px);
	transition: transform .25s
}

.game-card:hover .play-pill {
	transform: translateY(0)
}

.card-badge {
	position: absolute;
	top: 10px;
	left: 10px;
	background: rgba(13, 4, 8, .92);
	border: 1px solid var(--border-h);
	color: #ff8080;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
	padding: .25rem .6rem;
	border-radius: 6px
}

.card-info {
	padding: 1rem 1.1rem
}

.card-name {
	font-weight: 600;
	font-size: 1rem;
	color: var(--text);
	display: block
}

.movie-thumb {
	display: flex;
	align-items: center;
	justify-content: center
}

.movie-icon-lbl {
	font-family: var(--font-display);
	font-size: 4rem;
	letter-spacing: 1px;
	color: #fff;
	filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .4));
	z-index: 1
}

.netflix-bg {
	background: linear-gradient(135deg, #e50914, #b20710)
}

.youtube-bg {
	background: linear-gradient(135deg, red, #c00)
}

.disney-bg {
	background: linear-gradient(135deg, #0063e5, #0046a8)
}

.hulu-bg {
	background: linear-gradient(135deg, #1ce783, #00b377)
}

.quick-strip {
	padding: 0 1.5rem 4rem
}

.strip-grid {
	max-width: 1400px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1rem
}

@media (max-width:768px) {
	.strip-grid {
		grid-template-columns: 1fr
	}
}

.strip-card {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.25rem 1.5rem;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	text-decoration: none;
	color: var(--text);
	transition: border-color .2s, background .2s, transform .2s
}

.strip-card:hover {
	border-color: var(--border-h);
	background: var(--surface2);
	transform: translateY(-2px)
}

.strip-icon {
	font-size: 1.8rem;
	flex-shrink: 0
}

.strip-label {
	font-weight: 600;
	font-size: .95rem;
	margin-bottom: .2rem
}

.strip-sub {
	font-size: .78rem;
	color: var(--text-mute)
}

.strip-arrow {
	margin-left: auto;
	color: var(--red);
	font-size: 1.1rem;
	transition: transform .2s
}

.strip-card:hover .strip-arrow {
	transform: translateX(4px)
}

.page-hero {
	padding: 4rem 1.5rem 2.5rem;
	max-width: 1400px;
	margin: 0 auto
}

.page-hero-title {
	font-family: var(--font-display);
	font-size: clamp(3rem, 7vw, 6rem);
	letter-spacing: 1px;
	line-height: 1;
	margin-bottom: .5rem
}

.page-hero-sub {
	color: var(--text-dim);
	font-size: 1rem;
	margin-bottom: 2rem
}

.search-wrap {
	position: relative;
	max-width: 560px
}

.search-icon-lbl {
	position: absolute;
	left: 1rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1rem;
	pointer-events: none;
	opacity: .5
}

.search-input {
	width: 100%;
	padding: .85rem 1rem .85rem 2.8rem;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	color: var(--text);
	font-family: var(--font-body);
	font-size: .95rem;
	outline: 0;
	transition: border-color .2s, box-shadow .2s
}

.search-input::placeholder {
	color: var(--text-mute)
}

.search-input:focus {
	border-color: var(--border-h);
	box-shadow: 0 0 0 3px rgba(220, 20, 60, .12)
}

.no-results {
	text-align: center;
	padding: 4rem;
	color: var(--text-dim);
	font-size: 1rem
}

.game-modal {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .92);
	z-index: 2000;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	backdrop-filter: blur(12px)
}

.game-modal.active {
	display: flex
}

.modal-wrapper {
	width: 100%;
	max-width: 1400px;
	height: 90vh;
	background: var(--surface);
	border-radius: var(--radius);
	overflow: hidden;
	border: 1px solid var(--border-h);
	display: flex;
	flex-direction: column;
	box-shadow: 0 32px 80px rgba(0, 0, 0, .7);
	position: relative
}

.modal-header {
	padding: 1rem 1.5rem;
	background: var(--bg2);
	border-bottom: 1px solid var(--border);
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-shrink: 0
}

.modal-title {
	font-family: var(--font-display);
	font-size: 1.4rem;
	letter-spacing: 1px;
	color: var(--text)
}

.modal-close {
	background: rgba(220, 20, 60, .12);
	border: 1px solid var(--border-h);
	color: var(--red);
	width: 40px;
	height: 40px;
	border-radius: var(--radius-sm);
	font-size: 1.3rem;
	cursor: pointer;
	transition: background .2s, transform .2s;
	display: flex;
	align-items: center;
	justify-content: center
}

.modal-close:hover {
	background: rgba(220, 20, 60, .25);
	transform: rotate(90deg)
}

.game-iframe {
	flex: 1;
	border: none;
	width: 100%;
	background: #000
}

.fullscreen-btn {
	position: absolute;
	bottom: 1.25rem;
	right: 1.25rem;
	width: 46px;
	height: 46px;
	background: rgba(139, 0, 0, .3);
	border: 1px solid var(--border-h);
	border-radius: var(--radius-sm);
	color: #fff;
	cursor: pointer;
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 10;
	backdrop-filter: blur(8px);
	transition: background .2s, transform .2s
}

.fullscreen-btn:hover {
	background: rgba(220, 20, 60, .4);
	transform: scale(1.08)
}

#cn-welcome-overlay {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	background: rgba(10, 4, 8, .93);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	animation: cn-fade-in .4s ease both
}

@keyframes cn-fade-in {
	from {
		opacity: 0
	}

	to {
		opacity: 1
	}
}

@keyframes cn-card-in {
	from {
		opacity: 0;
		transform: translateY(36px) scale(.95)
	}

	to {
		opacity: 1;
		transform: translateY(0) scale(1)
	}
}

@keyframes cn-fade-out {
	from {
		opacity: 1
	}

	to {
		opacity: 0;
		pointer-events: none
	}
}

#cn-welcome-card {
	background: linear-gradient(145deg, #1f0d14 0, #2a1018 60%, #1a0a0f 100%);
	border: 1px solid rgba(220, 20, 60, .35);
	border-radius: 24px;
	padding: 3rem 3.5rem;
	max-width: 540px;
	width: 100%;
	text-align: center;
	box-shadow: 0 0 0 1px rgba(139, 0, 0, .1), 0 30px 80px rgba(0, 0, 0, .7), 0 0 60px rgba(139, 0, 0, .12) inset;
	animation: cn-card-in .55s cubic-bezier(.22, 1, .36, 1) .1s both;
	position: relative;
	overflow: hidden
}

#cn-welcome-card::before {
	content: '';
	position: absolute;
	top: -60px;
	left: 50%;
	transform: translateX(-50%);
	width: 320px;
	height: 320px;
	background: radial-gradient(circle, rgba(220, 20, 60, .1) 0, transparent 70%);
	pointer-events: none
}

.cn-logo-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .75rem;
	margin-bottom: 1.75rem
}

.cn-logo-icon {
	font-size: 2.2rem;
	filter: drop-shadow(0 2px 10px rgba(220, 20, 60, .5))
}

.cn-logo-name {
	font-family: var(--font-display);
	font-size: 1.6rem;
	letter-spacing: 1px;
	background: linear-gradient(135deg, #8b0000 0, #dc143c 60%, #ff6b6b 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent
}

.cn-welcome-heading {
	font-family: var(--font-display);
	font-size: 1.85rem;
	letter-spacing: 1px;
	color: #fff;
	margin-bottom: .5rem;
	line-height: 1.2
}

.cn-welcome-heading span {
	background: linear-gradient(135deg, #dc143c, #ff6b6b);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent
}

.cn-divider {
	width: 48px;
	height: 2px;
	background: linear-gradient(90deg, #8b0000, #dc143c);
	border-radius: 2px;
	margin: 1.2rem auto
}

.cn-visit-badge {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	background: rgba(139, 0, 0, .18);
	border: 1px solid rgba(139, 0, 0, .35);
	border-radius: 100px;
	padding: .45rem 1.1rem;
	margin-bottom: 1.5rem
}

.cn-visit-dot {
	width: 7px;
	height: 7px;
	background: #dc143c;
	border-radius: 50%;
	box-shadow: 0 0 8px rgba(220, 20, 60, .8);
	animation: cn-pulse 1.8s ease-in-out infinite;
	flex-shrink: 0
}

@keyframes cn-pulse {

	0%,
	100% {
		opacity: 1;
		transform: scale(1)
	}

	50% {
		opacity: .5;
		transform: scale(.75)
	}
}

.cn-visit-text {
	font-size: .82rem;
	color: #ff6b6b;
	font-weight: 600;
	letter-spacing: .3px;
	font-family: var(--font-body)
}

.cn-visit-count {
	color: #fff;
	font-weight: 800
}

.cn-quote {
	font-size: .9rem;
	color: #aaa;
	font-style: italic;
	line-height: 1.65;
	margin-bottom: 2rem;
	padding: 0 .5rem;
	font-family: var(--font-body)
}

#cn-enter-btn {
	background: linear-gradient(135deg, #8b0000 0, #dc143c 100%);
	color: #fff;
	border: none;
	border-radius: 14px;
	padding: 1rem 3rem;
	font-family: var(--font-body);
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	letter-spacing: .3px;
	transition: transform .2s ease, box-shadow .2s ease;
	box-shadow: 0 4px 20px rgba(139, 0, 0, .45);
	width: 100%
}

#cn-enter-btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 30px rgba(139, 0, 0, .55)
}

.cn-tag {
	margin-top: 1.2rem;
	font-size: .72rem;
	color: #555;
	font-family: var(--font-body)
}

#cn-welcome-overlay.cn-leaving {
	animation: cn-fade-out .35s ease forwards
}

@media (max-width:768px) {
	.hero {
		min-height: 60vh
	}

	.hero-title {
		font-size: 5rem
	}

	#cn-welcome-card {
		padding: 2rem 1.75rem
	}

	.cn-welcome-heading {
		font-size: 1.5rem
	}

	.modal-wrapper {
		height: 88vh
	}

	.page-hero {
		padding: 3rem 1.5rem 2rem
	}
}

@media (max-width:480px) {
	.hero-title {
		font-size: 4rem
	}

	.hero-ctas {
		flex-direction: column
	}

	.cta-primary,
	.cta-secondary {
		text-align: center;
		justify-content: center
	}
}