/* EWARNET layout — hero, rails, cards, momen viewer.
   Scoped under .ew-page so nothing leaks into Elementor pages. */

.ew-page {
	--ew-panel: #141B29;
	--ew-panel2: #1B2436;
	--ew-line: #26324a;
	--ew-gold: #E8B94A;
	--ew-gold-dim: #8a6f27;
	--ew-tx: #E9ECF3;
	--ew-tx2: #95A0B8;
	--ew-tx3: #5F6B84;
	--ew-ink: #0C1119;
	background: var(--ew-ink);
	color: var(--ew-tx);
}
.ew-page * { box-sizing: border-box; }
.ew-page a { text-decoration: none; }

/* ---------- HERO ---------- */
.ew-hero, .ew-ghead {
	position: relative;
	min-height: 74vh;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}
.ew-ghead { min-height: 46vh; }
.ew-hero-bg {
	position: absolute;
	inset: 0;
	background-image: var(--ew-hero-img, none);
	background-size: cover;
	background-position: center;
	background-color: #16203a;
}
.ew-hero-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to top, var(--ew-ink) 4%, rgba(12,17,25,.6) 40%, rgba(12,17,25,.2) 72%, transparent),
		linear-gradient(to right, rgba(12,17,25,.9) 0%, rgba(12,17,25,.3) 58%, transparent);
}
.ew-hero-in, .ew-ghead-in {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 4vw 52px;
}
.ew-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--ew-gold);
	margin-bottom: 12px;
}
.ew-eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--ew-gold); }
.ew-hero-title, .ew-ghead-title {
	font-size: clamp(30px, 5.2vw, 58px);
	line-height: 1.03;
	margin: 0;
	max-width: 16ch;
	color: var(--ew-tx);
}
.ew-hero-why {
	margin-top: 15px;
	max-width: 520px;
	color: var(--ew-tx2);
	font-size: 15px;
	line-height: 1.62;
	border-left: 2px solid var(--ew-gold);
	padding-left: 14px;
}
.ew-hero-why b {
	display: block;
	color: var(--ew-tx);
	font-size: 11.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	margin-bottom: 4px;
}
.ew-ghead-desc { margin-top: 12px; max-width: 620px; color: var(--ew-tx2); font-size: 15px; }
.ew-hero-meta {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 16px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	color: var(--ew-tx2);
}
.ew-hero-meta .g { color: var(--ew-gold); }
.ew-hero-cta { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.ew-b-play, .ew-b-sec {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border-radius: 4px;
	padding: 12px 22px;
	font-weight: 600;
	font-size: 15px;
}
.ew-b-play { background: var(--ew-gold); color: #12151c !important; }
.ew-b-play:hover { background: #f5c95d; }
.ew-b-sec { background: rgba(233,236,243,.13); color: var(--ew-tx) !important; }
.ew-b-sec:hover { background: rgba(233,236,243,.22); }

.ew-stats { display: flex; gap: 26px; margin-top: 18px; flex-wrap: wrap; }
.ew-stat .n { display: block; font-size: 26px; font-weight: 700; color: var(--ew-gold); line-height: 1; }
.ew-stat .l { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ew-tx3); }

/* ---------- RAILS ---------- */
.ew-rails { position: relative; z-index: 3; margin-top: -28px; padding-bottom: 60px; }
.ew-rail { margin-bottom: 34px; }
.ew-rail-head {
	display: flex;
	align-items: baseline;
	gap: 12px;
	max-width: 1180px;
	margin: 0 auto 12px;
	padding: 0 4vw;
}
.ew-rail-head h2 { font-size: 21px; margin: 0; color: var(--ew-tx); }
.ew-rail-head a { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--ew-tx3); }
.ew-rail-head a:hover { color: var(--ew-gold); }
.ew-row {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	padding: 2px 4vw 10px;
	max-width: 1180px;
	margin: 0 auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.ew-row::-webkit-scrollbar { display: none; }

/* landscape card */
.ew-card {
	flex: 0 0 258px;
	scroll-snap-align: start;
	border: 1px solid var(--ew-line);
	border-radius: 5px;
	overflow: hidden;
	background: var(--ew-panel);
	display: block;
	transition: transform .18s, border-color .18s;
}
.ew-card:hover { transform: translateY(-3px); border-color: var(--ew-gold-dim); }
.ew-card-thumb {
	display: block;
	aspect-ratio: 16/9;
	position: relative;
	background: linear-gradient(135deg, #182338, #0b1120);
	background-size: cover;
	background-position: center;
}
.ew-badge-ch, .ew-badge-dur {
	position: absolute;
	bottom: 7px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	padding: 2px 6px;
	border-radius: 2px;
}
.ew-badge-ch { left: 7px; background: rgba(232,185,74,.94); color: #12151c; }
.ew-badge-dur { right: 7px; background: rgba(5,7,11,.9); color: var(--ew-tx); }
.ew-card-body { display: block; padding: 10px 12px 12px; }
.ew-card-title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--ew-tx);
}
.ew-card-meta { display: block; font-size: 11.5px; color: var(--ew-tx3); margin-top: 5px; }

/* portrait game card */
.ew-gcard {
	flex: 0 0 154px;
	scroll-snap-align: start;
	position: relative;
	aspect-ratio: 2/3;
	border: 1px solid var(--ew-line);
	border-radius: 5px;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	transition: transform .18s, border-color .18s;
}
.ew-gcard:hover { transform: translateY(-3px); border-color: var(--ew-gold-dim); }
.ew-gcard-bg {
	position: absolute;
	inset: 0;
	background: linear-gradient(160deg, #22303f, #0d1420);
	background-size: cover;
	background-position: center;
}
.ew-gcard-name {
	position: relative;
	z-index: 2;
	width: 100%;
	padding: 12px 11px;
	background: linear-gradient(to top, rgba(5,7,11,.94), transparent);
}
.ew-gcard-name strong { display: block; font-size: 15px; line-height: 1.15; color: var(--ew-tx); }
.ew-gcard-name span { font-size: 11px; color: var(--ew-tx2); }

/* discussion card */
.ew-dcard {
	flex: 0 0 248px;
	scroll-snap-align: start;
	border: 1px solid var(--ew-line);
	border-radius: 5px;
	background: var(--ew-panel);
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 116px;
}
.ew-dcard:hover { border-color: var(--ew-gold-dim); }
.ew-dcard-q { font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--ew-tx); }
.ew-dcard-m { margin-top: auto; display: flex; gap: 10px; font-size: 11.5px; color: var(--ew-tx3); font-weight: 600; letter-spacing: .05em; }
.ew-dcard-m .g { color: var(--ew-gold); }

/* grid variant for game page */
.ew-rail-grid .ew-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 16px;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 4vw;
}
.ew-rail-grid .ew-card { flex: none; }
.ew-pagination { max-width: 1180px; margin: 26px auto 0; padding: 0 4vw; }
.ew-pagination .page-numbers {
	display: inline-block;
	padding: 7px 13px;
	border: 1px solid var(--ew-line);
	border-radius: 4px;
	margin-right: 6px;
	color: var(--ew-tx2);
	font-size: 14px;
}
.ew-pagination .page-numbers.current { background: var(--ew-gold); color: #12151c; border-color: var(--ew-gold); }
.ew-empty { max-width: 1180px; margin: 0 auto; padding: 0 4vw; color: var(--ew-tx3); }

/* momen cards */
.ew-scard {
	flex: 0 0 136px;
	scroll-snap-align: start;
	aspect-ratio: 9/16;
	border: 1px solid var(--ew-line);
	border-radius: 8px;
	overflow: hidden;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 0;
	background: none;
	cursor: pointer;
	text-align: left;
	transition: transform .18s, border-color .18s;
}
.ew-scard:hover { transform: translateY(-3px); border-color: var(--ew-gold-dim); }
.ew-scard-bg {
	position: absolute;
	inset: 0;
	background: linear-gradient(170deg, #22303f, #0a0f18);
	background-size: cover;
	background-position: center;
}
.ew-scard-play {
	position: absolute;
	top: 9px;
	right: 9px;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	background: rgba(5,7,11,.72);
	color: var(--ew-gold);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
}
.ew-scard-in {
	position: relative;
	z-index: 2;
	padding: 10px;
	background: linear-gradient(to top, rgba(5,7,11,.95), rgba(5,7,11,.35) 72%, transparent);
}
.ew-scard-t {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--ew-tx);
}
.ew-scard-g { display: block; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--ew-gold); margin-top: 4px; }

/* ---------- MOMEN VIEWER ---------- */
.ew-mviewer {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: #05070B;
	display: flex;
	flex-direction: column;
}
.ew-mviewer[hidden] { display: none; }
.ew-mv-stage { flex: 1; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ew-mv-frame {
	height: min(100%, 100vh);
	aspect-ratio: 9/16;
	max-width: 100vw;
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	overflow: hidden;
}
.ew-mv-bg { position: absolute; inset: 0; background: #10182a center/cover no-repeat; }
.ew-mv-info { position: relative; z-index: 2; padding: 18px 16px 26px; background: linear-gradient(to top, rgba(5,7,11,.96), transparent); }
.ew-mv-t { font-size: 16px; font-weight: 600; line-height: 1.35; color: #E9ECF3; }
.ew-mv-s { font-size: 12.5px; color: #95A0B8; margin-top: 5px; }
.ew-mv-s b { color: #E8B94A; }
.ew-mv-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	background: #E8B94A;
	color: #12151c !important;
	border-radius: 4px;
	padding: 9px 16px;
	font-weight: 600;
	font-size: 13.5px;
}
.ew-mv-x, .ew-mv-nav {
	position: absolute;
	z-index: 5;
	border-radius: 50%;
	background: rgba(233,236,243,.13);
	color: #E9ECF3;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	cursor: pointer;
}
.ew-mv-x { top: 14px; right: 14px; width: 38px; height: 38px; font-size: 15px; }
.ew-mv-nav { top: 50%; transform: translateY(-50%); width: 40px; height: 40px; font-size: 17px; }
.ew-mv-nav:hover, .ew-mv-x:hover { background: rgba(233,236,243,.24); }
.ew-mv-prev { left: 12px; }
.ew-mv-next { right: 12px; }
.ew-mv-dots { position: absolute; left: 0; right: 0; top: 10px; z-index: 4; display: flex; gap: 4px; padding: 0 14px; }
.ew-mv-dots i { flex: 1; height: 2.5px; border-radius: 2px; background: rgba(233,236,243,.22); }
.ew-mv-dots i.on { background: #E8B94A; }

/* wide skaha */
.ew-skaha-wide { max-width: 1180px; margin: 8px auto 0; }

.ew-page-content { max-width: 1180px; margin: 40px auto 0; padding: 0 4vw; }

/* ---------- MOBILE ---------- */
@media (max-width: 760px) {
	.ew-hero { min-height: 62vh; }
	.ew-ghead { min-height: 38vh; }
	.ew-hero-in, .ew-ghead-in { padding-bottom: 34px; }
	.ew-hero-why { font-size: 13.5px; max-width: none; }
	.ew-hero-cta .ew-b-play, .ew-hero-cta .ew-b-sec { flex: 1; justify-content: center; padding: 13px 8px; }
	.ew-rail-head h2 { font-size: 18px; }
	.ew-card { flex-basis: 214px; }
	.ew-gcard { flex-basis: 126px; }
	.ew-dcard { flex-basis: 222px; }
	.ew-scard { flex-basis: 116px; }
	.ew-mv-nav { display: none; }
	.ew-stats { gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
	.ew-card, .ew-gcard, .ew-scard { transition: none; }
	.ew-card:hover, .ew-gcard:hover, .ew-scard:hover { transform: none; }
}

/* ---------- progress bar on cards ---------- */
.ew-prog {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 3px;
	background: rgba(5,7,11,.65);
}
.ew-prog i { display: block; height: 100%; background: var(--ew-gold); }

/* ---------- creator page ---------- */
.ew-attrib {
	margin-top: 16px;
	max-width: 560px;
	font-size: 12.5px;
	line-height: 1.55;
	color: var(--ew-tx3);
}

/* ---------- series / episode list ---------- */
.ew-eplist {
	display: grid;
	gap: 11px;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 4vw;
}
.ew-ep {
	display: flex;
	gap: 14px;
	align-items: center;
	padding: 12px;
	border: 1px solid var(--ew-line);
	border-radius: 5px;
	background: var(--ew-panel);
	transition: border-color .18s;
}
.ew-ep:hover { border-color: var(--ew-gold-dim); }
.ew-ep-num {
	font-size: 26px;
	font-weight: 700;
	color: var(--ew-tx3);
	min-width: 38px;
	line-height: 1;
	flex: 0 0 auto;
	font-variant-numeric: tabular-nums;
}
.ew-ep-th {
	width: 138px;
	aspect-ratio: 16/9;
	border-radius: 3px;
	flex: 0 0 auto;
	background: linear-gradient(135deg, #182338, #0b1120) center/cover no-repeat;
}
.ew-ep-body { flex: 1; min-width: 0; }
.ew-ep-title { display: block; font-size: 15px; font-weight: 500; color: var(--ew-tx); line-height: 1.3; }
.ew-ep-meta { display: block; font-size: 12px; color: var(--ew-tx3); margin-top: 4px; }
.ew-ep-note { display: block; font-size: 12.5px; color: var(--ew-tx2); margin-top: 6px; line-height: 1.45; }

@media (max-width: 620px) {
	.ew-ep { flex-wrap: wrap; gap: 10px; }
	.ew-ep-num { min-width: 30px; font-size: 20px; }
	.ew-ep-th { width: 92px; }
	.ew-ep-body { flex-basis: 100%; }
}