/* EmberForge — "How to install" guide (emberforge-site). Uses the theme's --ef-* tokens. */

.ef-install {
	background:
		radial-gradient(ellipse 45% 55% at 12% 0%, rgba(255, 90, 44, .13), transparent 70%),
		radial-gradient(ellipse 40% 50% at 92% 100%, rgba(61, 255, 181, .08), transparent 70%),
		var(--ef-night, #070912);
	border-block: 1px solid var(--ef-line, rgba(255, 255, 255, .1));
}
.ef-install__title {
	margin: 0;
	font-family: var(--ef-display);
	font-stretch: 125%;
	font-weight: 800;
	text-transform: uppercase;
	font-size: clamp(2rem, 4.4vw, 3.6rem);
	line-height: .92;
	color: #fff;
}
.ef-install__time {
	margin: 0;
	font-family: var(--ef-mono);
	font-size: .75rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--ef-muted, #98a2c3);
	padding: .55rem .9rem;
	border: 1px solid var(--ef-line-2, rgba(255, 255, 255, .16));
}

.ef-install__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: clamp(1rem, 2vw, 1.6rem);
	grid-template-columns: repeat(3, minmax(0, 1fr));
	counter-reset: none;
}
@media (max-width: 960px) {
	.ef-install__steps { grid-template-columns: minmax(0, 1fr); }
}

.ef-install__step {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .9rem;
	padding: clamp(1.4rem, 2.6vw, 2rem);
	background: linear-gradient(165deg, rgba(255, 90, 44, .09), rgba(12, 16, 34, .92) 45%), var(--ef-steel, #0c1022);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 30px 60px -40px rgba(0, 0, 0, .8);
	clip-path: polygon(0 0, calc(100% - var(--ef-cut, 14px)) 0, 100% var(--ef-cut, 14px), 100% 100%, var(--ef-cut, 14px) 100%, 0 calc(100% - var(--ef-cut, 14px)));
	transition: transform .35s var(--ef-ease, ease), box-shadow .35s;
}
.ef-install__step:hover {
	transform: translateY(-4px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 40px 70px -40px rgba(255, 90, 44, .45);
}
.ef-install__step::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient(90deg, var(--ef-ember, #ff5a2c), var(--ef-gold, #f2b33d) 60%, transparent);
}
.ef-install__num {
	font-family: var(--ef-display);
	font-stretch: 125%;
	font-weight: 800;
	font-size: 3.4rem;
	line-height: .8;
	background: linear-gradient(180deg, #ffd27a, var(--ef-ember, #ff5a2c));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	filter: drop-shadow(0 0 18px rgba(255, 90, 44, .35));
}
.ef-install__step h3 {
	margin: 0;
	font-family: var(--ef-display);
	font-stretch: 112%;
	font-weight: 800;
	text-transform: uppercase;
	font-size: 1.3rem;
	line-height: 1.05;
	color: #fff;
}
.ef-install__step p { margin: 0; color: var(--ef-soft, #c9cfe4); line-height: 1.6; }
.ef-install__step strong { color: #fff; }
.ef-install__note {
	font-size: .875rem;
	color: var(--ef-muted, #98a2c3) !important;
	padding-left: .9rem;
	border-left: 2px solid rgba(255, 90, 44, .5);
}

/* ---- illustrations ---- */
.ef-install__shot {
	margin-top: auto;
	position: relative;
	aspect-ratio: 16 / 10;
	display: grid;
	place-items: center;
	padding: 1rem;
	background: radial-gradient(ellipse 70% 70% at 50% 40%, rgba(255, 255, 255, .05), transparent 70%), #05060d;
	border: 1px solid var(--ef-line, rgba(255, 255, 255, .1));
	overflow: hidden;
	font-family: "Segoe UI", system-ui, sans-serif;
}
.ef-ring {
	position: relative;
	outline: 2px solid var(--ef-ember, #ff5a2c);
	outline-offset: 3px;
	box-shadow: 0 0 0 6px rgba(255, 90, 44, .18), 0 0 22px rgba(255, 90, 44, .55);
	animation: ef-install-pulse 2.2s ease-in-out infinite;
}
@keyframes ef-install-pulse {
	50% { box-shadow: 0 0 0 10px rgba(255, 90, 44, .06), 0 0 30px rgba(255, 90, 44, .75); }
}
.ef-pin {
	display: inline-grid;
	place-items: center;
	width: 1.3rem;
	height: 1.3rem;
	margin-left: .6rem;
	border-radius: 50%;
	background: var(--ef-ember, #ff5a2c);
	color: #05060d;
	font: 700 .72rem/1 var(--ef-mono, monospace);
	box-shadow: 0 0 12px rgba(255, 90, 44, .7);
	vertical-align: middle;
}

/* SmartScreen mock */
.ef-ss {
	width: 100%;
	max-width: 330px;
	background: #0b5aa6;
	color: #fff;
	padding: .9rem 1rem .8rem;
	box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .8);
}
.ef-ss__title { margin: 0 0 .35rem !important; font-size: 1.02rem; font-weight: 600; color: #fff !important; line-height: 1.2 !important; }
.ef-ss__text { margin: 0 0 .5rem !important; font-size: .7rem; line-height: 1.35 !important; color: rgba(255, 255, 255, .85) !important; }
.ef-ss__more { margin: 0 0 .75rem !important; font-size: .74rem; }
.ef-ss__more .ef-ring { text-decoration: underline; padding: 0 .15rem; color: #fff; }
.ef-ss__bar { display: flex; align-items: center; justify-content: flex-end; gap: .45rem; padding-top: .6rem; border-top: 1px solid rgba(255, 255, 255, .25); }
.ef-ss__btn { font-size: .7rem; padding: .32rem .8rem; border: 1px solid rgba(255, 255, 255, .7); color: #fff; white-space: nowrap; }
.ef-ss__btn--go { background: rgba(255, 255, 255, .14); }
.ef-pin--b { margin: 0 .35rem 0 -.1rem; }

/* Setup mock (signed installer) */
.ef-setup { width: 100%; max-width: 320px; background: #11162c; border: 1px solid var(--ef-line-2, rgba(255,255,255,.16)); padding: 1rem; }
.ef-setup__title { margin: 0 0 .8rem !important; font-weight: 600; color: #fff !important; font-size: .9rem; }
.ef-setup__bar { height: 8px; background: rgba(255, 255, 255, .08); overflow: hidden; }
.ef-setup__bar span { display: block; height: 100%; width: 68%; background: linear-gradient(90deg, var(--ef-ember, #ff5a2c), var(--ef-gold, #f2b33d)); animation: ef-install-fill 2.6s var(--ef-ease, ease) infinite; }
.ef-setup__text { margin: .6rem 0 0 !important; font-size: .72rem; color: var(--ef-muted, #98a2c3) !important; }
@keyframes ef-install-fill { from { width: 8%; } to { width: 100%; } }

/* Launcher mock */
.ef-lx { width: 100%; max-width: 330px; background: linear-gradient(170deg, #1a1030, #0a0d1e 60%); border: 1px solid var(--ef-line-2, rgba(255,255,255,.16)); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .8), 0 0 40px -10px rgba(255, 90, 44, .25); }
.ef-lx__chrome { display: flex; align-items: center; gap: .3rem; padding: .45rem .6rem; border-bottom: 1px solid var(--ef-line, rgba(255,255,255,.1)); }
.ef-lx__chrome span { width: .45rem; height: .45rem; border-radius: 50%; background: rgba(255, 255, 255, .22); }
.ef-lx__chrome b { margin-left: .4rem; font: 500 .62rem/1 var(--ef-mono, monospace); letter-spacing: .16em; text-transform: uppercase; color: var(--ef-ember-text, #ffb8a2); }
.ef-lx__body { display: grid; justify-items: center; gap: .75rem; padding: 1.1rem 1rem 1.25rem; }
.ef-lx__play, .ef-px__go {
	min-width: 9rem;
	text-align: center;
	padding: .65rem 1.4rem;
	font: 800 1.05rem/1 var(--ef-display);
	font-stretch: 125%;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #05060d;
	background: linear-gradient(180deg, #ffb46a, var(--ef-ember, #ff5a2c));
	clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
	box-shadow: 0 0 30px rgba(255, 90, 44, .5);
}
.ef-lx__realm {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .38rem .75rem;
	font-size: .74rem;
	color: #fff;
	background: rgba(255, 255, 255, .06);
	border: 1px solid var(--ef-line-2, rgba(255,255,255,.16));
}
.ef-lx__realm i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--ef-online, #6dffbf); box-shadow: 0 0 8px var(--ef-online, #6dffbf); }
.ef-lx__realm em { font-style: normal; color: var(--ef-muted, #98a2c3); }

/* Close → Play mock */
.ef-px { display: flex; align-items: center; gap: .9rem; }
.ef-px__game {
	display: grid;
	justify-items: center;
	gap: .35rem;
	padding: .8rem .9rem;
	font-size: .7rem;
	color: var(--ef-muted, #98a2c3);
	border: 1px dashed rgba(255, 255, 255, .25);
}
.ef-px__x {
	display: grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: rgba(255, 90, 44, .15);
	color: var(--ef-ember-text, #ffb8a2);
	font-size: .95rem;
}
.ef-px__arrow { font-size: 1.4rem; color: var(--ef-gold, #f2b33d); }
.ef-px__go { min-width: 0; animation: ef-install-glow 2.2s ease-in-out infinite; }
@keyframes ef-install-glow { 50% { box-shadow: 0 0 46px rgba(255, 90, 44, .85); } }

/* help strip */
.ef-install__help {
	margin-top: clamp(1.6rem, 3vw, 2.4rem);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
	padding: 1.1rem 1.4rem;
	border: 1px solid var(--ef-line, rgba(255,255,255,.1));
	background: rgba(255, 255, 255, .02);
}
.ef-install__help p { margin: 0; color: var(--ef-soft, #c9cfe4); }
.ef-install__help strong { color: #fff; }
.ef-install__links { display: flex; flex-wrap: wrap; gap: 1.6rem; }

.ef-download__how { margin: 0; }

@media (prefers-reduced-motion: reduce) {
	.ef-ring, .ef-px__go, .ef-setup__bar span { animation: none; }
	.ef-install__step, .ef-install__step:hover { transition: none; transform: none; }
}