/* IcaruZen Trials — v3.0.0
   Fully fluid: the panel sizes itself to the viewport, and every HUD element
   has a small-screen and a short-screen state. */

.izn-ascent {
	--izn-ink: #030F2A;
	--izn-navy: #0B1D3C;
	--izn-deep: #08294F;
	--izn-blue: #1B3E77;
	--izn-azure: #3E7BC4;
	--izn-ice: #DCE6F5;
	--izn-cream: #FEECDB;
	--izn-gold: #F2A93B;
	--izn-ember: #E4632B;
	--izn-h: 620px;
	--izn-r: 4px;
	--izn-pad: 16px;
	--izn-serif: "Newsreader", "Tajawal", Georgia, "Times New Roman", serif;
	--izn-sans: "Inter", "Tajawal", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--izn-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	position: relative;
	width: 100%;
	height: var(--izn-h);
	max-height: 84vh;
	max-height: 84svh;
	min-height: 340px;
	overflow: hidden;
	border-radius: var(--izn-r);
	background: var(--izn-ink);
	color: var(--izn-ice);
	font-family: var(--izn-sans);
	font-size: 15px;
	line-height: 1.55;
	-webkit-tap-highlight-color: transparent;
	touch-action: none;
	user-select: none;
	isolation: isolate;
	contain: layout paint;
}

.izn-ascent * { box-sizing: border-box; }

.izn-ascent canvas {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
}

/* a red pulse on the frame when the wings take a hit */
.izn-ascent::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 5;
	box-shadow: inset 0 0 0 0 rgba(228, 99, 43, 0);
	transition: box-shadow .22s ease;
}

.izn-ascent.is-hurt::after { box-shadow: inset 0 0 90px 8px rgba(228, 99, 43, .55); }
.izn-ascent.is-low::after { box-shadow: inset 0 0 70px 2px rgba(228, 99, 43, .22); }

/* ---------- HUD ---------- */

.izn-hud {
	position: absolute;
	inset: 0;
	pointer-events: none;
	padding: var(--izn-pad);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 8px;
	z-index: 3;
}

.izn-hud-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 10px;
}

.izn-left { min-width: 0; flex: 1 1 0; }

.izn-lvl { display: flex; align-items: baseline; gap: 3px; font-family: var(--izn-mono); }
.izn-lvl-n { font-size: 24px; font-weight: 500; line-height: 1; color: #fff; }
.izn-lvl-of { font-size: 11px; letter-spacing: .1em; opacity: .55; }

.izn-lvl-name {
	font-family: var(--izn-serif);
	font-size: 15px;
	color: var(--izn-cream);
	margin-top: 2px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* The clock is the loudest thing on screen. That is the whole point. */
.izn-clock {
	flex: 0 0 auto;
	font-family: var(--izn-mono);
	font-size: clamp(26px, 6vw, 44px);
	font-weight: 500;
	letter-spacing: -.03em;
	line-height: 1;
	color: #fff;
	font-variant-numeric: tabular-nums;
	text-shadow: 0 2px 22px rgba(3, 15, 42, .85);
	direction: ltr;
	padding-top: 2px;
}

.izn-ascent.is-boost .izn-clock { color: var(--izn-gold); }
.izn-ascent.is-burning .izn-clock { color: var(--izn-ember); }

.izn-tools { display: flex; gap: 8px; pointer-events: auto; flex: 1 1 0; justify-content: flex-end; }

.izn-tool {
	width: 34px;
	height: 34px;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	border: 1px solid rgba(220, 230, 245, .22);
	background: rgba(3, 15, 42, .45);
	color: var(--izn-ice);
	border-radius: 50%;
	cursor: pointer;
	padding: 0;
	backdrop-filter: blur(6px);
	transition: border-color .18s, background .18s;
}

.izn-tool:hover { border-color: var(--izn-gold); background: rgba(3, 15, 42, .7); }
.izn-tool:focus-visible { outline: 2px solid var(--izn-gold); outline-offset: 2px; }
.izn-tool svg { width: 15px; height: 15px; fill: currentColor; }

/* ---------- wings / health ---------- */

.izn-bottom { display: flex; flex-direction: column; gap: 10px; }

.izn-wing { width: min(320px, 58%); }

.izn-wing-head {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	font-family: var(--izn-mono);
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
	opacity: .72;
	margin-bottom: 5px;
}

.izn-wing-head b { font-weight: 500; font-size: 12px; color: var(--izn-cream); direction: ltr; }

.izn-wing-track {
	position: relative;
	height: 8px;
	background: rgba(220, 230, 245, .14);
	border-radius: 99px;
	overflow: hidden;
}

.izn-wing-fill {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 100%;
	border-radius: 99px;
	background: linear-gradient(90deg, var(--izn-azure), var(--izn-ice));
	transition: width .16s linear;
}

.izn-ascent.is-low .izn-wing-fill { background: linear-gradient(90deg, var(--izn-ember), var(--izn-gold)); }
.izn-ascent.is-low .izn-wing-head { opacity: 1; color: var(--izn-ember); }

/* ---------- chips + rail ---------- */

.izn-strip { display: flex; gap: 18px; flex-wrap: wrap; }

.izn-chip { display: flex; align-items: baseline; gap: 7px; font-family: var(--izn-mono); }

.izn-chip i {
	font-style: normal;
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
	opacity: .58;
}

.izn-chip b {
	font-weight: 500;
	font-size: 14px;
	color: var(--izn-cream);
	font-variant-numeric: tabular-nums;
	direction: ltr;
}

.izn-rail { position: relative; height: 2px; background: rgba(220, 230, 245, .16); }

.izn-rail-fill {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 0;
	background: var(--izn-cream);
}

.izn-node {
	position: absolute;
	top: 50%;
	width: 6px;
	height: 6px;
	margin: -3px 0 0 -3px;
	inset-inline-start: var(--p);
	border-radius: 50%;
	background: var(--izn-navy);
	border: 1px solid rgba(220, 230, 245, .5);
}

.izn-node.is-done { background: var(--izn-gold); border-color: var(--izn-gold); }

/* ---------- touch pad ---------- */

.izn-pad {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 44%;
	display: none;
	z-index: 4;
	pointer-events: none;
}

.izn-ascent.has-touch .izn-pad { display: block; }
.izn-ascent.has-touch .izn-hud { padding-bottom: calc(var(--izn-pad) + 84px); }

.izn-key {
	position: absolute;
	bottom: 16px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	border: 1px solid rgba(220, 230, 245, .3);
	background: rgba(11, 29, 60, .5);
	color: var(--izn-ice);
	backdrop-filter: blur(6px);
	pointer-events: auto;
	font-family: var(--izn-mono);
	font-size: 17px;
	cursor: pointer;
	padding: 0;
}

.izn-key:active { background: rgba(62, 123, 196, .6); border-color: var(--izn-cream); }
.izn-key-l { inset-inline-start: 16px; width: 52px; height: 52px; }
.izn-key-r { inset-inline-start: 78px; width: 52px; height: 52px; }
.izn-key-up { inset-inline-end: 16px; width: 76px; height: 76px; border-color: rgba(254, 236, 219, .6); }

/* ---------- overlays ---------- */

.izn-veil {
	position: absolute;
	inset: 0;
	z-index: 6;
	display: none;
	align-items: center;
	justify-content: center;
	padding: clamp(14px, 4vw, 28px);
	background: radial-gradient(120% 90% at 50% 0%, rgba(11, 29, 60, .78), rgba(3, 15, 42, .95));
	backdrop-filter: blur(3px);
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
}

.izn-veil.is-open { display: flex; }

.izn-card { width: min(560px, 100%); text-align: start; }

.izn-kicker {
	font-family: var(--izn-mono);
	font-size: 10px;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--izn-gold);
	margin: 0 0 12px;
}

.izn-h1 {
	font-family: var(--izn-serif);
	font-weight: 400;
	font-size: clamp(26px, 5.4vw, 46px);
	line-height: 1.07;
	letter-spacing: -.02em;
	margin: 0 0 10px;
	color: #fff;
}

.izn-bigtime {
	font-family: var(--izn-mono);
	font-weight: 500;
	font-size: clamp(36px, 9vw, 64px);
	letter-spacing: -.04em;
	direction: ltr;
	font-variant-numeric: tabular-nums;
}

.izn-lede {
	font-family: var(--izn-serif);
	font-size: clamp(15px, 2.4vw, 20px);
	line-height: 1.45;
	color: var(--izn-cream);
	margin: 0 0 12px;
}

.izn-body { margin: 0 0 18px; color: rgba(220, 230, 245, .8); max-width: 48ch; font-size: clamp(13px, 1.6vw, 15px); }

.izn-rule { height: 1px; background: rgba(220, 230, 245, .18); margin: 18px 0 14px; }

/* ---------- objective + goals ---------- */

.izn-objective {
	border: 1px solid rgba(242, 169, 59, .35);
	border-radius: var(--izn-r);
	padding: 12px 14px;
	margin: 0 0 18px;
	font-size: clamp(13px, 1.6vw, 15px);
	color: var(--izn-cream);
	background: rgba(242, 169, 59, .07);
}

.izn-objective-k {
	display: block;
	font-family: var(--izn-mono);
	font-size: 9px;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--izn-gold);
	margin-bottom: 5px;
}

.izn-goals { list-style: none; margin: 4px 0 18px; padding: 0; display: grid; gap: 7px; }

.izn-goals li {
	display: flex;
	align-items: baseline;
	gap: 9px;
	font-size: clamp(13px, 1.7vw, 15px);
	color: rgba(220, 230, 245, .55);
}

.izn-goals li i { font-style: normal; color: rgba(220, 230, 245, .35); }
.izn-goals li.is-ok { color: var(--izn-cream); }
.izn-goals li.is-ok i { color: var(--izn-gold); }

.izn-starline {
	font-size: 22px;
	letter-spacing: .18em;
	color: var(--izn-gold);
	margin: 0 0 14px;
}

/* ---------- keys, buttons ---------- */

.izn-keys {
	display: grid;
	gap: 5px;
	font-family: var(--izn-mono);
	font-size: 12px;
	color: rgba(220, 230, 245, .68);
	margin-bottom: 20px;
}

.izn-keys strong {
	display: block;
	color: var(--izn-ice);
	letter-spacing: .18em;
	text-transform: uppercase;
	font-size: 10px;
	font-weight: 500;
	margin-bottom: 4px;
}

.izn-actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.izn-btn {
	font-family: var(--izn-sans);
	font-size: 14px;
	font-weight: 600;
	padding: 12px 24px;
	border-radius: 99px;
	border: 1px solid var(--izn-gold);
	background: var(--izn-gold);
	color: var(--izn-ink);
	cursor: pointer;
	transition: transform .16s ease, box-shadow .16s ease;
}

.izn-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 26px rgba(242, 169, 59, .3); }
.izn-btn:focus-visible { outline: 2px solid var(--izn-cream); outline-offset: 3px; }

.izn-btn-ghost { background: transparent; color: var(--izn-ice); border-color: rgba(220, 230, 245, .35); }
.izn-btn-ghost:hover { border-color: var(--izn-ice); box-shadow: none; }

/* ---------- level list ---------- */

.izn-lvlist { margin: 2px 0; }

.izn-lvrow {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 10px 0;
	border-top: 1px solid rgba(220, 230, 245, .12);
}

.izn-lvrow-n { font-family: var(--izn-mono); font-size: 11px; color: var(--izn-gold); min-width: 12px; }
.izn-lvrow-body { flex: 1; min-width: 0; }
.izn-lvrow-body b { display: block; font-family: var(--izn-serif); font-weight: 400; font-size: 17px; color: #fff; }
.izn-lvrow-body i { font-style: normal; font-size: 13px; color: rgba(220, 230, 245, .62); }
.izn-lvrow-s { color: var(--izn-gold); font-size: 13px; letter-spacing: .1em; }

.izn-lvrow-t {
	font-family: var(--izn-mono);
	font-size: 13px;
	color: var(--izn-cream);
	font-variant-numeric: tabular-nums;
	direction: ltr;
	min-width: 56px;
	text-align: end;
}

/* ---------- splits ---------- */

.izn-splits { margin-top: 2px; }

.izn-split {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 11px 0;
	border-top: 1px solid rgba(220, 230, 245, .12);
}

.izn-split-n { font-family: var(--izn-mono); font-size: 11px; color: var(--izn-gold); min-width: 12px; }
.izn-split-name { flex: 1; min-width: 0; font-family: var(--izn-serif); font-size: 17px; color: #fff; }
.izn-split-s { color: var(--izn-gold); font-size: 12px; letter-spacing: .08em; font-family: var(--izn-mono); }

.izn-split-m {
	font-family: var(--izn-mono);
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	opacity: .8;
}

.izn-split-t {
	font-family: var(--izn-mono);
	font-size: 16px;
	color: var(--izn-cream);
	font-variant-numeric: tabular-nums;
	direction: ltr;
	min-width: 68px;
	text-align: end;
}

.izn-split-total { border-top-width: 2px; border-top-color: rgba(242, 169, 59, .5); }
.izn-split-total .izn-split-t { font-size: 22px; color: var(--izn-gold); }

.izn-m3 { color: var(--izn-gold); }
.izn-m2 { color: var(--izn-ice); }
.izn-m1 { color: #C98A55; }
.izn-m0 { opacity: .5; }

/* ---------- stats ---------- */

.izn-stats { display: flex; gap: 22px; flex-wrap: wrap; margin: 16px 0 20px; padding: 0; list-style: none; }
.izn-stats li { min-width: 62px; }

.izn-stats span {
	display: block;
	font-family: var(--izn-mono);
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	opacity: .6;
	margin-bottom: 3px;
}

.izn-stats b {
	font-family: var(--izn-mono);
	font-size: clamp(19px, 4vw, 24px);
	font-weight: 500;
	color: #fff;
	font-variant-numeric: tabular-nums;
	direction: ltr;
}

.izn-flag {
	display: inline-block;
	font-family: var(--izn-mono);
	font-size: 10px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--izn-gold);
	border: 1px solid rgba(242, 169, 59, .45);
	border-radius: 99px;
	padding: 4px 12px;
	margin-bottom: 14px;
}

/* ---------- flash ---------- */

.izn-flash {
	position: absolute;
	inset-inline: 0;
	top: 38%;
	z-index: 5;
	text-align: center;
	font-family: var(--izn-mono);
	font-size: clamp(14px, 2.4vw, 19px);
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--izn-cream);
	text-shadow: 0 2px 24px rgba(3, 15, 42, .9);
	opacity: 0;
	pointer-events: none;
	transition: opacity .3s ease, transform .3s ease;
	transform: translateY(8px);
}

.izn-flash.is-on { opacity: 1; transform: translateY(0); }
.izn-flash.is-gold { color: var(--izn-gold); }
.izn-flash.is-ember { color: var(--izn-ember); }

/* ---------- narrow / short panels ---------- */

.izn-ascent.is-narrow { --izn-pad: 12px; }
.izn-ascent.is-narrow .izn-lvl-name { font-size: 12px; }
.izn-ascent.is-narrow .izn-lvl-n { font-size: 19px; }
.izn-ascent.is-narrow .izn-clock { font-size: 27px; }
.izn-ascent.is-narrow .izn-wing { width: 62%; }
.izn-ascent.is-narrow .izn-strip { gap: 12px; }
.izn-ascent.is-narrow .izn-chip-hide { display: none; }
.izn-ascent.is-narrow .izn-tool { width: 30px; height: 30px; }
.izn-ascent.is-narrow .izn-lvrow-body i { display: none; }
.izn-ascent.is-narrow .izn-split-m { display: none; }

.izn-ascent.is-short { --izn-pad: 10px; }
.izn-ascent.is-short .izn-clock { font-size: 24px; }
.izn-ascent.is-short .izn-lvl-name { display: none; }
.izn-ascent.is-short .izn-wing-head { margin-bottom: 3px; }
.izn-ascent.is-short .izn-bottom { gap: 6px; }
.izn-ascent.is-short .izn-key-up { width: 62px; height: 62px; }
.izn-ascent.is-short .izn-key-l,
.izn-ascent.is-short .izn-key-r { width: 44px; height: 44px; }
.izn-ascent.is-short.has-touch .izn-hud { padding-bottom: calc(var(--izn-pad) + 70px); }
.izn-ascent.is-short .izn-veil { align-items: flex-start; }

.izn-ascent.is-short .izn-keys,
.izn-ascent.is-short .izn-rule { display: none; }

/* Landscape phones: the panel gets short, so trade height for the essentials. */
@media (max-height: 460px) {
	.izn-ascent { min-height: 300px; }
	.izn-ascent .izn-strip { display: none; }
}

@media (max-width: 640px) {
	.izn-ascent { --izn-h: 78svh; min-height: 420px; }
	.izn-veil { align-items: flex-start; }
	.izn-card { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.izn-ascent *,
	.izn-ascent *::before,
	.izn-ascent *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}

/* ---------- splash: a title and one button ---------- */

.izn-splash {
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0;
}

.izn-splash .izn-kicker { margin-bottom: 10px; }

.izn-splash .izn-h1 {
	font-size: clamp(34px, 8vw, 64px);
	margin-bottom: clamp(22px, 5vh, 38px);
}

.izn-btn-xl {
	font-size: clamp(17px, 2.6vw, 21px);
	font-weight: 700;
	letter-spacing: .01em;
	padding: clamp(16px, 2.6vh, 22px) clamp(44px, 9vw, 72px);
	box-shadow: 0 10px 40px rgba(242, 169, 59, .28);
}

.izn-btn-xl:hover { box-shadow: 0 14px 46px rgba(242, 169, 59, .42); }

.izn-splash-meta {
	margin: 18px 0 0;
	font-family: var(--izn-mono);
	font-size: 12px;
	letter-spacing: .14em;
	color: var(--izn-gold);
	direction: ltr;
}

.izn-link {
	margin-top: 22px;
	background: none;
	border: 0;
	padding: 6px 4px;
	font-family: var(--izn-mono);
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(220, 230, 245, .55);
	cursor: pointer;
	border-bottom: 1px solid rgba(220, 230, 245, .25);
}

.izn-link:hover { color: var(--izn-ice); border-bottom-color: var(--izn-ice); }
.izn-link:focus-visible { outline: 2px solid var(--izn-gold); outline-offset: 3px; }

.izn-help { font-family: var(--izn-mono); font-size: 15px; font-weight: 500; line-height: 1; }

/* the help sheet is long — let it scroll from the top */
.izn-ascent .izn-veil { align-items: center; }
.izn-ascent.is-short .izn-veil,
.izn-ascent.is-narrow .izn-veil { align-items: flex-start; }