/* LH Career Compass — Dark Purple / Violet / Lavender UI */

:root {
	--lhcc-bg: #0e0a1f;
	--lhcc-bg2: #161031;
	--lhcc-card: rgba(124, 58, 237, 0.10);
	--lhcc-card-border: rgba(167, 139, 250, 0.22);
	--lhcc-violet: #7c3aed;
	--lhcc-violet-2: #8b5cf6;
	--lhcc-lavender: #c4b5fd;
	--lhcc-lavender-soft: #ddd6fe;
	--lhcc-text: #f5f3ff;
	--lhcc-muted: #b7aee0;
	--lhcc-gold: #fbbf24;
	--lhcc-radius: 18px;
	--lhcc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body.lhcc-open { overflow: hidden !important; }

/* ---------- Fullscreen overlay ---------- */
.lhcc-overlay {
	position: fixed; inset: 0; z-index: 999999;
	background: radial-gradient(1200px 800px at 75% -10%, #2a1b56 0%, var(--lhcc-bg) 55%),
		linear-gradient(160deg, var(--lhcc-bg2), var(--lhcc-bg));
	color: var(--lhcc-text);
	font-family: var(--lhcc-font);
	display: flex; align-items: center; justify-content: center;
	overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.lhcc-overlay.lhcc-hidden { display: none; }
.lhcc-overlay * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
.lhcc-overlay { overscroll-behavior: contain; height: 100dvh; }
.lhcc-overlay button { touch-action: manipulation; }

/* Ambient floating orbs */
.lhcc-bg-orbs { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
.lhcc-bg-orbs span {
	position: absolute; border-radius: 50%; filter: blur(70px); opacity: .35;
	animation: lhccFloat 14s ease-in-out infinite alternate;
}
.lhcc-bg-orbs span:nth-child(1) { width: 380px; height: 380px; background: #7c3aed; top: -120px; left: -90px; }
.lhcc-bg-orbs span:nth-child(2) { width: 300px; height: 300px; background: #4c1d95; bottom: -100px; right: -60px; animation-delay: 3s; }
.lhcc-bg-orbs span:nth-child(3) { width: 220px; height: 220px; background: #a78bfa; top: 45%; left: 70%; opacity: .18; animation-delay: 6s; }
@keyframes lhccFloat { from { transform: translateY(-25px) } to { transform: translateY(30px) } }

/* Persistent brand header — visible on every screen, above takeovers */
.lhcc-brand {
	position: fixed;
	top: calc(16px + env(safe-area-inset-top, 0px));
	left: calc(20px + env(safe-area-inset-left, 0px));
	z-index: 1000003;
	display: flex; align-items: center; gap: 9px;
	pointer-events: none; user-select: none;
}
.lhcc-brand-logo { width: 30px; height: auto; filter: drop-shadow(0 4px 12px rgba(124, 58, 237, .5)); }
.lhcc-brand-ic { font-size: 22px; line-height: 1; }
.lhcc-brand-name {
	font-family: var(--lhcc-font); font-size: 15px; font-weight: 800; letter-spacing: .3px;
	background: linear-gradient(90deg, #f5f3ff, var(--lhcc-lavender) 70%, #a78bfa);
	-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
	text-shadow: none;
}

/* Close button — top right (respects iOS/Android notches) */
.lhcc-close {
	position: fixed;
	top: calc(14px + env(safe-area-inset-top, 0px));
	right: calc(16px + env(safe-area-inset-right, 0px));
	z-index: 1000001;
	width: 46px; height: 46px; border-radius: 50%;
	background: rgba(196, 181, 253, 0.10); color: var(--lhcc-lavender);
	border: 1px solid var(--lhcc-card-border);
	font-size: 18px; line-height: 1; cursor: pointer;
	backdrop-filter: blur(8px); transition: all .25s ease;
}
.lhcc-close:hover { background: var(--lhcc-violet); color: #fff; transform: rotate(90deg) scale(1.06); box-shadow: 0 0 24px rgba(139, 92, 246, .55); }

/* ---------- Stage / screens ---------- */
.lhcc-stage {
	width: 100%; max-width: 760px; margin: auto;
	padding: calc(72px + env(safe-area-inset-top, 0px)) 22px calc(48px + env(safe-area-inset-bottom, 0px));
}
.lhcc-screen { width: 100%; }

@keyframes lhccIn { from { opacity: 0; transform: translateY(26px) } to { opacity: 1; transform: translateY(0) } }
@keyframes lhccBack { from { opacity: 0; transform: translateY(-22px) } to { opacity: 1; transform: translateY(0) } }
.lhcc-anim-in { animation: lhccIn .45s cubic-bezier(.22,.9,.3,1) both; }
.lhcc-anim-back { animation: lhccBack .4s cubic-bezier(.22,.9,.3,1) both; }
.lhcc-qcard.lhcc-anim-in { animation: lhccIn .42s cubic-bezier(.22,.9,.3,1) both; }
.lhcc-qcard.lhcc-anim-back { animation: lhccBack .38s cubic-bezier(.22,.9,.3,1) both; }

/* ---------- Buttons ---------- */
.lhcc-btn {
	font-family: var(--lhcc-font); font-size: 15px; font-weight: 600;
	padding: 13px 26px; border-radius: 999px; cursor: pointer;
	border: 1px solid transparent; transition: all .25s ease;
}
.lhcc-btn:disabled { opacity: .35; cursor: not-allowed; }
.lhcc-btn-primary {
	background: linear-gradient(135deg, var(--lhcc-violet), var(--lhcc-violet-2) 55%, #a78bfa);
	color: #fff; box-shadow: 0 8px 26px rgba(124, 58, 237, .45);
}
.lhcc-btn-primary:not(:disabled):hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(139, 92, 246, .6); }
.lhcc-btn-ghost { background: transparent; color: var(--lhcc-lavender); border-color: var(--lhcc-card-border); }
.lhcc-btn-ghost:not(:disabled):hover { background: rgba(167, 139, 250, .12); }
.lhcc-btn-lg { font-size: 17px; padding: 16px 38px; }

/* ---------- Welcome ---------- */
.lhcc-welcome { text-align: center; }
.lhcc-logo {
	width: 84px; height: 84px; margin: 0 auto 18px; font-size: 42px;
	display: flex; align-items: center; justify-content: center; border-radius: 26px;
	background: linear-gradient(135deg, #4c1d95, var(--lhcc-violet));
	box-shadow: 0 14px 40px rgba(124, 58, 237, .5), inset 0 1px 0 rgba(255,255,255,.25);
}
.lhcc-logo-sm { width: 58px; height: 58px; font-size: 28px; border-radius: 18px; margin-bottom: 12px; }
.lhcc-logo-img {
	display: block; width: 130px; height: auto; margin: 0 auto 18px;
	filter: drop-shadow(0 12px 32px rgba(124, 58, 237, .45));
	animation: lhccBob 3s ease-in-out infinite alternate;
}
.lhcc-logo-img-sm { width: 78px; margin-bottom: 12px; animation: none; }
.lhcc-pdf-mode .lhcc-logo-img { filter: none !important; animation: none !important; }
.lhcc-title {
	font-size: clamp(30px, 5vw, 44px); font-weight: 800; margin: 0 0 14px; letter-spacing: -0.5px;
	background: linear-gradient(90deg, #f5f3ff, var(--lhcc-lavender) 60%, #a78bfa);
	-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.lhcc-sub { color: var(--lhcc-muted); font-size: 16px; line-height: 1.65; max-width: 560px; margin: 0 auto 26px; }
.lhcc-sub strong { color: var(--lhcc-lavender-soft); }
.lhcc-kicker-sub { letter-spacing: 4px; font-size: 11.5px; font-weight: 800; color: var(--lhcc-gold); margin: -6px 0 16px; }
.lhcc-realms-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 30px; }
.lhcc-realm-chip {
	background: var(--lhcc-card); border: 1px solid var(--lhcc-card-border);
	border-radius: 16px; padding: 14px 10px; display: flex; flex-direction: column; gap: 4px; align-items: center;
	transition: all .25s ease;
}
.lhcc-realm-chip:hover { transform: translateY(-4px); border-color: var(--lhcc-violet-2); box-shadow: 0 10px 26px rgba(124, 58, 237, .3); }
.lhcc-realm-ic { font-size: 26px; line-height: 1; margin-bottom: 3px; }
.lhcc-realm-chip strong { font-size: 12.5px; color: var(--lhcc-lavender-soft); }
.lhcc-realm-chip em { font-style: normal; font-size: 10.5px; color: var(--lhcc-muted); }
.lhcc-name-label { display: block; font-size: 13px; color: var(--lhcc-muted); margin-bottom: 8px; }
.lhcc-name-input {
	display: block; width: 100%; max-width: 340px; margin: 0 auto 22px;
	background: rgba(22, 16, 49, .8); border: 1px solid var(--lhcc-card-border);
	border-radius: 14px; color: var(--lhcc-text); font-size: 16px; text-align: center;
	padding: 14px 18px; outline: none; transition: border .25s, box-shadow .25s;
}
.lhcc-name-input:focus { border-color: var(--lhcc-violet-2); box-shadow: 0 0 0 4px rgba(139, 92, 246, .22); }
.lhcc-fineprint { color: var(--lhcc-muted); font-size: 12.5px; margin-top: 18px; opacity: .8; }

/* ---------- Quiz ---------- */
.lhcc-quiz-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.lhcc-sec-badge {
	background: var(--lhcc-card); border: 1px solid var(--lhcc-card-border);
	padding: 7px 14px; border-radius: 999px; font-size: 13px; color: var(--lhcc-lavender-soft);
}
.lhcc-counter { font-size: 13.5px; color: var(--lhcc-muted); }
.lhcc-counter strong { color: var(--lhcc-lavender); }

/* Glowing animated progress bar */
.lhcc-progress {
	height: 10px; border-radius: 999px; overflow: hidden;
	background: rgba(167, 139, 250, .12); border: 1px solid rgba(167, 139, 250, .15);
	margin-bottom: 26px;
}
.lhcc-progress-fill {
	height: 100%; border-radius: 999px;
	background: linear-gradient(90deg, #6d28d9, #8b5cf6, #c4b5fd, #8b5cf6, #6d28d9);
	background-size: 240% 100%;
	animation: lhccShimmer 2.4s linear infinite;
	box-shadow: 0 0 14px rgba(139, 92, 246, .85), 0 0 30px rgba(139, 92, 246, .4);
	transition: width .45s cubic-bezier(.22,.9,.3,1);
}
@keyframes lhccShimmer { from { background-position: 0% 0 } to { background-position: 240% 0 } }

.lhcc-qcard {
	background: linear-gradient(160deg, rgba(139, 92, 246, .14), rgba(22, 16, 49, .55));
	border: 1px solid var(--lhcc-card-border); border-radius: var(--lhcc-radius);
	padding: 30px 28px; backdrop-filter: blur(10px);
	box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
.lhcc-qtext { font-size: clamp(19px, 3vw, 24px); font-weight: 700; line-height: 1.45; margin: 0 0 8px; }
.lhcc-qhint { color: var(--lhcc-gold); font-size: 13px; margin: 0 0 6px; opacity: .9; }
.lhcc-qhint strong { color: var(--lhcc-gold); }

/* Emoji quest cards — 5-across on desktop, feels like a game, not an MCQ sheet */
.lhcc-opts { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 20px; }
.lhcc-opt {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
	background: rgba(22, 16, 49, .55); border: 1px solid rgba(167, 139, 250, .18);
	border-radius: 16px; padding: 16px 8px 13px; cursor: pointer; color: var(--lhcc-text);
	font-family: var(--lhcc-font); transition: all .22s cubic-bezier(.34,1.4,.64,1); text-align: center;
}
.lhcc-opt:hover {
	border-color: var(--lhcc-violet-2); background: rgba(124, 58, 237, .2);
	transform: translateY(-5px) scale(1.03);
}
.lhcc-opt:hover .lhcc-opt-emo { transform: scale(1.25) rotate(-6deg); }
.lhcc-opt-emo { font-size: 32px; line-height: 1; transition: transform .22s cubic-bezier(.34,1.56,.64,1); filter: grayscale(.35); }
.lhcc-opt-label { color: var(--lhcc-lavender-soft); font-size: 12px; line-height: 1.3; font-weight: 600; }
.lhcc-opt.lhcc-selected {
	border-color: var(--lhcc-violet-2);
	background: linear-gradient(160deg, rgba(124, 58, 237, .5), rgba(139, 92, 246, .25));
	box-shadow: 0 0 0 3px rgba(139, 92, 246, .28), 0 10px 28px rgba(124, 58, 237, .4);
	transform: translateY(-5px) scale(1.05);
}
.lhcc-opt.lhcc-selected .lhcc-opt-emo {
	filter: none; transform: scale(1.3);
	animation: lhccEmoWin .45s cubic-bezier(.34,1.56,.64,1);
}
@keyframes lhccEmoWin {
	0% { transform: scale(.7) }
	55% { transform: scale(1.5) rotate(8deg) }
	100% { transform: scale(1.3) }
}
.lhcc-opt.lhcc-selected .lhcc-opt-label { color: #fff; }

.lhcc-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; }

/* ---------- Fullscreen takeover (chapters & badge celebrations) ---------- */
.lhcc-takeover {
	position: fixed; inset: 0; z-index: 1000002;
	display: flex; align-items: center; justify-content: center;
	background: radial-gradient(900px 700px at 50% 30%, rgba(76, 29, 149, .92), rgba(14, 10, 31, .97));
	backdrop-filter: blur(14px);
	opacity: 0; visibility: hidden; transform: scale(1.04);
	transition: opacity .35s ease, transform .35s ease, visibility .35s;
	overflow-y: auto; padding: 30px 20px; text-align: center;
	font-family: var(--lhcc-font); color: var(--lhcc-text);
}
.lhcc-takeover-show { opacity: 1; visibility: visible; transform: scale(1); }

/* Chapter / realm intro */
.lhcc-chapter { max-width: 540px; margin: auto; animation: lhccIn .5s cubic-bezier(.22,.9,.3,1) both; }
.lhcc-chapter-num { letter-spacing: 4px; font-size: 12px; font-weight: 800; color: var(--lhcc-gold); margin: 0 0 18px; }
.lhcc-chapter-icon {
	width: 110px; height: 110px; margin: 0 auto 20px; font-size: 54px;
	display: flex; align-items: center; justify-content: center; border-radius: 32px;
	background: linear-gradient(135deg, #4c1d95, var(--lhcc-violet));
	box-shadow: 0 18px 50px rgba(124, 58, 237, .55), inset 0 1px 0 rgba(255,255,255,.25);
	animation: lhccBob 2.6s ease-in-out infinite alternate;
}
@keyframes lhccBob { from { transform: translateY(-6px) rotate(-2deg) } to { transform: translateY(6px) rotate(2deg) } }
.lhcc-chapter-name {
	font-size: clamp(28px, 5vw, 40px); font-weight: 800; margin: 0 0 8px; letter-spacing: -0.5px;
	background: linear-gradient(90deg, #f5f3ff, var(--lhcc-lavender) 60%, #a78bfa);
	-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.lhcc-chapter-tag { color: var(--lhcc-gold); font-size: 14px; font-weight: 700; margin: 0 0 14px; }
.lhcc-chapter-blurb { color: var(--lhcc-muted); font-size: 16px; line-height: 1.65; margin: 0 0 28px; }

/* Badge celebration */
.lhcc-badge-scene { max-width: 520px; margin: auto; position: relative; animation: lhccIn .45s cubic-bezier(.22,.9,.3,1) both; }
.lhcc-badge-rays {
	position: absolute; top: -40px; left: 50%; width: 340px; height: 340px;
	transform: translateX(-50%); pointer-events: none; border-radius: 50%;
	background: conic-gradient(from 0deg, transparent 0 14deg, rgba(251, 191, 36, .12) 14deg 26deg,
		transparent 26deg 40deg, rgba(167, 139, 250, .14) 40deg 52deg, transparent 52deg 66deg,
		rgba(251, 191, 36, .12) 66deg 78deg, transparent 78deg 92deg, rgba(167, 139, 250, .14) 92deg 104deg,
		transparent 104deg 118deg, rgba(251, 191, 36, .12) 118deg 130deg, transparent 130deg 144deg,
		rgba(167, 139, 250, .14) 144deg 156deg, transparent 156deg 170deg, rgba(251, 191, 36, .12) 170deg 182deg,
		transparent 182deg 196deg, rgba(167, 139, 250, .14) 196deg 208deg, transparent 208deg 222deg,
		rgba(251, 191, 36, .12) 222deg 234deg, transparent 234deg 248deg, rgba(167, 139, 250, .14) 248deg 260deg,
		transparent 260deg 274deg, rgba(251, 191, 36, .12) 274deg 286deg, transparent 286deg 300deg,
		rgba(167, 139, 250, .14) 300deg 312deg, transparent 312deg 326deg, rgba(251, 191, 36, .12) 326deg 338deg,
		transparent 338deg 360deg);
	animation: lhccSpin 16s linear infinite;
}
@keyframes lhccSpin { to { transform: translateX(-50%) rotate(360deg) } }
.lhcc-badge-medal {
	position: relative; font-size: 96px; line-height: 1; margin-bottom: 14px;
	animation: lhccMedal .8s cubic-bezier(.34,1.56,.64,1) both;
	filter: drop-shadow(0 14px 30px rgba(251, 191, 36, .45));
}
@keyframes lhccMedal {
	0% { transform: scale(0) rotate(-30deg); opacity: 0 }
	60% { transform: scale(1.18) rotate(6deg); opacity: 1 }
	100% { transform: scale(1) rotate(0) }
}
.lhcc-badge-kicker { position: relative; letter-spacing: 4px; font-size: 12px; font-weight: 800; color: var(--lhcc-gold); margin: 0 0 8px; }
.lhcc-badge-name {
	position: relative; font-size: clamp(30px, 5vw, 42px); font-weight: 800; margin: 0 0 10px;
	background: linear-gradient(90deg, var(--lhcc-gold), #fde68a, var(--lhcc-gold));
	-webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.lhcc-badge-xp { position: relative; color: var(--lhcc-lavender); font-size: 13.5px; font-weight: 800; letter-spacing: 1px; margin: 0 0 16px; }
.lhcc-badge-msg { position: relative; color: var(--lhcc-lavender-soft); font-size: 16.5px; line-height: 1.6; margin: 0 auto 28px; max-width: 420px; }

/* ---------- Gamified HUD ---------- */
.lhcc-hud { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.lhcc-hud-realm { font-size: 14px; color: var(--lhcc-lavender-soft); }
.lhcc-hud-realm strong { color: var(--lhcc-text); }
.lhcc-hud-right { display: flex; gap: 8px; align-items: center; }
.lhcc-hud-chip {
	position: relative; background: var(--lhcc-card); border: 1px solid var(--lhcc-card-border);
	border-radius: 999px; padding: 6px 13px; font-size: 12.5px; font-weight: 700; color: var(--lhcc-lavender-soft);
}
.lhcc-hud-xp { color: var(--lhcc-gold); border-color: rgba(251, 191, 36, .35); background: rgba(251, 191, 36, .08); }
.lhcc-hud-streak { color: #fb923c; border-color: rgba(251, 146, 60, .4); background: rgba(251, 146, 60, .1); animation: lhccStreakPulse 1.6s ease-in-out infinite; }
@keyframes lhccStreakPulse { 0%, 100% { box-shadow: 0 0 0 rgba(251, 146, 60, 0) } 50% { box-shadow: 0 0 14px rgba(251, 146, 60, .5) } }
.lhcc-xp-pop {
	position: absolute; right: 6px; top: -6px; font-size: 12px; font-weight: 800; color: var(--lhcc-gold);
	animation: lhccXpPop .9s ease-out both; pointer-events: none; white-space: nowrap;
}
@keyframes lhccXpPop {
	0% { transform: translateY(0); opacity: 0 }
	25% { opacity: 1 }
	100% { transform: translateY(-26px); opacity: 0 }
}

/* Journey progress with realm nodes */
.lhcc-journey { position: relative; margin: 0 12px 34px; }
.lhcc-journey .lhcc-progress { margin-bottom: 0; }
.lhcc-node {
	position: absolute; top: 50%; transform: translate(-50%, -50%) scale(.92);
	width: 30px; height: 30px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center; font-size: 14px;
	background: var(--lhcc-bg2); border: 2px solid rgba(167, 139, 250, .25);
	filter: grayscale(1) brightness(.7); transition: all .4s ease;
}
.lhcc-node-lit {
	filter: none; transform: translate(-50%, -50%) scale(1.05);
	border-color: var(--lhcc-violet-2);
	box-shadow: 0 0 14px rgba(139, 92, 246, .7);
}
.lhcc-node-end { font-size: 15px; }

/* ---------- Loading ---------- */
.lhcc-loading { text-align: center; padding: 40px 0; }
.lhcc-spinner { display: flex; gap: 10px; justify-content: center; margin-bottom: 26px; }
.lhcc-spinner div {
	width: 16px; height: 16px; border-radius: 50%;
	background: linear-gradient(135deg, var(--lhcc-violet-2), var(--lhcc-lavender));
	animation: lhccPulse 1s ease-in-out infinite;
	box-shadow: 0 0 16px rgba(139, 92, 246, .8);
}
.lhcc-spinner div:nth-child(2) { animation-delay: .18s; }
.lhcc-spinner div:nth-child(3) { animation-delay: .36s; }
@keyframes lhccPulse { 0%, 100% { transform: scale(.6); opacity: .4 } 50% { transform: scale(1.15); opacity: 1 } }
.lhcc-loading-title { font-size: 26px; font-weight: 800; margin: 0 0 10px; }
.lhcc-loading-step { color: var(--lhcc-muted); font-size: 15px; min-height: 22px; margin: 0 auto 22px; }
.lhcc-progress-loading { max-width: 380px; margin: 0 auto; }

/* ---------- Results ---------- */
.lhcc-results-screen { padding-bottom: 30px; }
.lhcc-report {
	background: linear-gradient(165deg, rgba(139, 92, 246, .12), rgba(22, 16, 49, .6));
	border: 1px solid var(--lhcc-card-border); border-radius: 22px;
	padding: 38px 32px; backdrop-filter: blur(10px);
}
.lhcc-report-head { text-align: center; margin-bottom: 28px; }
.lhcc-report-kicker { letter-spacing: 3px; font-size: 12px; color: var(--lhcc-lavender); margin: 0 0 6px; font-weight: 700; }
.lhcc-report-name { font-size: clamp(26px, 4vw, 36px); font-weight: 800; margin: 0 0 16px; }
.lhcc-quest-stats { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 12px; }
.lhcc-stat {
	background: rgba(251, 191, 36, .08); border: 1px solid rgba(251, 191, 36, .3);
	border-radius: 999px; padding: 7px 15px; font-size: 13px; color: var(--lhcc-lavender-soft);
}
.lhcc-stat strong { color: var(--lhcc-gold); }
.lhcc-won-badges { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 22px; }
.lhcc-won-badge {
	background: var(--lhcc-card); border: 1px solid var(--lhcc-card-border);
	border-radius: 999px; padding: 6px 14px; font-size: 12.5px; font-weight: 700; color: var(--lhcc-lavender-soft);
}
.lhcc-score-ring {
	width: 132px; height: 132px; margin: 0 auto 14px; border-radius: 50%;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	background: conic-gradient(var(--lhcc-violet-2), var(--lhcc-lavender), var(--lhcc-gold), var(--lhcc-violet-2));
	padding: 5px; box-shadow: 0 0 36px rgba(139, 92, 246, .5);
}
.lhcc-score-ring > * { position: relative; }
.lhcc-score-ring::before { content: ''; position: absolute; }
.lhcc-score-ring { position: relative; }
.lhcc-score-num {
	width: 122px; height: 122px; border-radius: 50%; background: var(--lhcc-bg2);
	display: flex; align-items: center; justify-content: center;
	font-size: 42px; font-weight: 800; color: var(--lhcc-lavender-soft);
	position: absolute; inset: 5px;
}
.lhcc-score-cap { position: absolute; bottom: -34px; left: 0; right: 0; font-size: 11px; color: var(--lhcc-muted); letter-spacing: 1px; text-transform: uppercase; line-height: 1.4; }
.lhcc-report-top { margin-top: 46px; color: var(--lhcc-muted); font-size: 15px; }
.lhcc-report-top strong { color: var(--lhcc-gold); font-size: 17px; }

.lhcc-sec { margin-top: 30px; border-top: 1px solid rgba(167, 139, 250, .14); padding-top: 24px; }
.lhcc-sec h3 { font-size: 18px; font-weight: 800; margin: 0 0 16px; color: var(--lhcc-lavender-soft); }
.lhcc-tag {
	font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
	background: rgba(251, 191, 36, .15); color: var(--lhcc-gold);
	border: 1px solid rgba(251, 191, 36, .3); padding: 3px 10px; border-radius: 999px; margin-left: 8px; vertical-align: middle;
}

.lhcc-bar-row { margin-bottom: 14px; }
.lhcc-bar-head { display: flex; justify-content: space-between; font-size: 14.5px; margin-bottom: 6px; }
.lhcc-bar-val { color: var(--lhcc-lavender); font-weight: 700; }
.lhcc-bar { height: 9px; background: rgba(167, 139, 250, .12); border-radius: 999px; overflow: hidden; }
.lhcc-bar-fill {
	height: 100%; border-radius: 999px;
	background: linear-gradient(90deg, var(--lhcc-violet), var(--lhcc-lavender));
	box-shadow: 0 0 10px rgba(139, 92, 246, .6);
}
.lhcc-bar-note { font-size: 13px; color: var(--lhcc-muted); margin: 7px 0 0; line-height: 1.55; }

.lhcc-flag {
	background: rgba(251, 191, 36, .07); border: 1px solid rgba(251, 191, 36, .25);
	border-radius: 16px; padding: 20px 22px; margin-top: 30px;
}
.lhcc-flag h3 { color: var(--lhcc-gold); }
.lhcc-flag p { color: var(--lhcc-lavender-soft); font-size: 14.5px; line-height: 1.6; margin: 0 0 10px; }
.lhcc-flag-bridges { color: var(--lhcc-gold) !important; font-weight: 700; }

.lhcc-careers { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.lhcc-career {
	display: flex; align-items: center; gap: 14px;
	background: rgba(22, 16, 49, .5); border: 1px solid rgba(167, 139, 250, .15);
	border-radius: 14px; padding: 13px 16px; margin-bottom: 9px;
}
.lhcc-career-top {
	background: linear-gradient(135deg, rgba(124, 58, 237, .4), rgba(251, 191, 36, .12));
	border-color: rgba(251, 191, 36, .4);
}
.lhcc-career-rank {
	flex: 0 0 32px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
	background: rgba(167, 139, 250, .15); color: var(--lhcc-lavender); font-weight: 800; font-size: 14px;
}
.lhcc-career-top .lhcc-career-rank { background: var(--lhcc-gold); color: #1f1147; }
.lhcc-career-body { flex: 1; display: flex; flex-direction: column; }
.lhcc-career-body strong { font-size: 15.5px; }
.lhcc-career-body em { font-style: normal; font-size: 12.5px; color: var(--lhcc-muted); margin-top: 2px; }
.lhcc-career-score { font-size: 19px; font-weight: 800; color: var(--lhcc-lavender); }
.lhcc-career-top .lhcc-career-score { color: var(--lhcc-gold); }

.lhcc-degrees { margin: 0; padding: 0 0 0 2px; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.lhcc-degrees li {
	background: rgba(22, 16, 49, .5); border: 1px solid rgba(167, 139, 250, .15);
	border-radius: 12px; padding: 11px 14px; font-size: 13.5px; color: var(--lhcc-lavender-soft);
}
.lhcc-dev-note { color: var(--lhcc-muted); font-size: 14px; line-height: 1.6; margin: 10px 0 0; }
.lhcc-report-foot { text-align: center; color: var(--lhcc-muted); font-size: 12px; margin: 30px 0 0; opacity: .75; }

.lhcc-result-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }

/* ---------- PDF rendering (off-screen, fixed width — prevents layout shift/blips) ---------- */
/* Holder sits at 0,0 BEHIND the fullscreen overlay (which covers it), so
   html2canvas captures from origin with no negative-offset cropping and
   the live layout never shifts — even on small screens. */
.lhcc-pdf-holder {
	position: fixed; top: 0; left: 0; width: 820px; z-index: 1;
	pointer-events: none; contain: layout style;
}
/* IMPORTANT: html2pdf clones this into its own page-width container —
   the clone must fill that container (100%), never a fixed px width,
   or the render overflows the page and gets cut off / off-center. */
.lhcc-pdf-mode {
	width: 100% !important; max-width: 100% !important; box-sizing: border-box !important;
	margin: 0 !important;
	background: #ffffff !important; color: #1e1b2e !important;
	border: none !important; border-radius: 0 !important; backdrop-filter: none !important;
	padding: 26px 30px !important;
	font-family: var(--lhcc-font);
}
.lhcc-pdf-mode .lhcc-report-name,
.lhcc-pdf-mode .lhcc-qtext,
.lhcc-pdf-mode .lhcc-career-body strong { color: #2e1065 !important; }
.lhcc-pdf-mode .lhcc-report-kicker { color: #7c3aed !important; }
.lhcc-pdf-mode .lhcc-sec { border-top-color: #ede9fe !important; page-break-inside: avoid; }
.lhcc-pdf-mode .lhcc-sec h3 { color: #4c1d95 !important; }
.lhcc-pdf-mode .lhcc-bar { background: #ede9fe !important; }
.lhcc-pdf-mode .lhcc-bar-val { color: #6d28d9 !important; }
.lhcc-pdf-mode .lhcc-bar-note, .lhcc-pdf-mode .lhcc-dev-note,
.lhcc-pdf-mode .lhcc-report-top, .lhcc-pdf-mode .lhcc-report-foot,
.lhcc-pdf-mode .lhcc-career-body em, .lhcc-pdf-mode .lhcc-score-cap { color: #6b6390 !important; }
.lhcc-pdf-mode .lhcc-career { background: #f6f4ff !important; border-color: #e4ddfb !important; page-break-inside: avoid; }
.lhcc-pdf-mode .lhcc-career-top { background: linear-gradient(135deg, #ede9fe, #fef3c7) !important; border-color: #f3cf63 !important; }
.lhcc-pdf-mode .lhcc-career-rank { background: #ede9fe !important; color: #6d28d9 !important; }
.lhcc-pdf-mode .lhcc-career-score { color: #6d28d9 !important; }
.lhcc-pdf-mode .lhcc-career-top .lhcc-career-score { color: #b45309 !important; }
.lhcc-pdf-mode .lhcc-degrees li { background: #f6f4ff !important; border-color: #e4ddfb !important; color: #3b2d66 !important; }
.lhcc-pdf-mode .lhcc-flag { background: #fffbeb !important; border-color: #fde68a !important; }
.lhcc-pdf-mode .lhcc-flag h3, .lhcc-pdf-mode .lhcc-flag-bridges { color: #b45309 !important; }
.lhcc-pdf-mode .lhcc-flag p { color: #57534e !important; }
.lhcc-pdf-mode .lhcc-score-num { background: #f6f4ff !important; color: #4c1d95 !important; }
.lhcc-pdf-mode .lhcc-stat { background: #fffbeb !important; border-color: #fde68a !important; color: #44403c !important; }
.lhcc-pdf-mode .lhcc-stat strong { color: #b45309 !important; }
.lhcc-pdf-mode .lhcc-won-badge { background: #f6f4ff !important; border-color: #e4ddfb !important; color: #3b2d66 !important; }
.lhcc-pdf-mode .lhcc-bar-fill, .lhcc-pdf-mode .lhcc-score-ring { box-shadow: none !important; }

/* ---------- Responsive ---------- */
@media (max-width: 600px) {
	.lhcc-stage { padding: 64px 14px 90px; }
	.lhcc-qcard { padding: 22px 14px; }
	.lhcc-opts { gap: 6px; }
	.lhcc-opt { padding: 12px 4px 10px; border-radius: 13px; }
	.lhcc-opt-emo { font-size: 26px; }
	.lhcc-opt-label { font-size: 9.5px; }
	.lhcc-close { top: 12px; right: 12px; width: 40px; height: 40px; }
	.lhcc-brand { top: 16px; left: 14px; gap: 7px; }
	.lhcc-brand-logo { width: 24px; }
	.lhcc-brand-ic { font-size: 18px; }
	.lhcc-brand-name { font-size: 13px; }
	.lhcc-degrees { grid-template-columns: 1fr; }
	.lhcc-realms-row { grid-template-columns: repeat(2, 1fr); }
	.lhcc-report { padding: 26px 18px; }
	.lhcc-hud-realm { font-size: 12.5px; }
	.lhcc-hud-chip { padding: 5px 10px; font-size: 11px; }
	.lhcc-node { width: 26px; height: 26px; font-size: 12px; }
	.lhcc-badge-medal { font-size: 76px; }
	.lhcc-nav { position: sticky; bottom: 0; padding: 12px 0; background: linear-gradient(transparent, var(--lhcc-bg) 38%); }
}

/* Very small phones (≤380px) */
@media (max-width: 380px) {
	.lhcc-stage { padding-left: 10px; padding-right: 10px; }
	.lhcc-opt-emo { font-size: 22px; }
	.lhcc-opt-label { font-size: 8.5px; }
	.lhcc-opt { padding: 10px 2px 8px; gap: 6px; }
	.lhcc-btn { padding: 12px 18px; font-size: 14px; }
	.lhcc-btn-lg { padding: 14px 26px; font-size: 15px; }
	.lhcc-title { font-size: 26px; }
	.lhcc-qtext { font-size: 17px; }
	.lhcc-hud-realm strong { display: none; } /* icon-only realm label */
	.lhcc-career-body strong { font-size: 14px; }
	.lhcc-score-ring { width: 112px; height: 112px; }
	.lhcc-score-num { width: 102px; height: 102px; font-size: 34px; }
}

/* Tablets (601–1024px): wider stage, comfier targets */
@media (min-width: 601px) and (max-width: 1024px) {
	.lhcc-stage { max-width: 680px; }
	.lhcc-opt { padding: 18px 10px 15px; }
	.lhcc-opt-emo { font-size: 36px; }
}

/* Large desktops (≥1600px): scale the experience up */
@media (min-width: 1600px) {
	.lhcc-stage { max-width: 860px; }
	.lhcc-qtext { font-size: 26px; }
	.lhcc-opt-emo { font-size: 38px; }
	.lhcc-opt-label { font-size: 13px; }
}

/* Landscape phones (short viewports): compress vertically so everything fits without scrolling */
@media (max-height: 540px) and (orientation: landscape) {
	.lhcc-stage { padding-top: 56px; padding-bottom: 24px; }
	.lhcc-logo, .lhcc-logo-img { width: 64px; height: auto; margin-bottom: 10px; }
	.lhcc-logo { height: 64px; font-size: 30px; border-radius: 18px; }
	.lhcc-title { font-size: 24px; margin-bottom: 8px; }
	.lhcc-sub { font-size: 13.5px; margin-bottom: 14px; }
	.lhcc-realms-row { grid-template-columns: repeat(4, 1fr); margin-bottom: 16px; }
	.lhcc-realm-ic { font-size: 18px; }
	.lhcc-qcard { padding: 16px 18px; }
	.lhcc-qtext { font-size: 16px; }
	.lhcc-opts { margin-top: 12px; gap: 8px; }
	.lhcc-opt { padding: 9px 6px 7px; gap: 4px; }
	.lhcc-opt-emo { font-size: 22px; }
	.lhcc-opt-label { font-size: 9px; }
	.lhcc-nav { margin-top: 12px; }
	.lhcc-journey { margin-bottom: 22px; }
	.lhcc-hud { margin-bottom: 10px; }
	.lhcc-chapter-icon { width: 70px; height: 70px; font-size: 34px; margin-bottom: 10px; }
	.lhcc-chapter-name { font-size: 24px; }
	.lhcc-chapter-blurb { font-size: 13.5px; margin-bottom: 14px; }
	.lhcc-badge-medal { font-size: 56px; margin-bottom: 8px; }
	.lhcc-badge-name { font-size: 26px; }
	.lhcc-badge-msg { font-size: 14px; margin-bottom: 14px; }
}

/* Touch devices: no hover-lift surprises; slightly larger hit areas */
@media (hover: none) {
	.lhcc-opt:hover { transform: none; }
	.lhcc-opt:hover .lhcc-opt-emo { transform: none; }
	.lhcc-opt:active { transform: scale(.97); }
	.lhcc-realm-chip:hover { transform: none; box-shadow: none; }
	/* Cheaper effects on mobile GPUs */
	.lhcc-overlay .lhcc-qcard, .lhcc-overlay .lhcc-report { backdrop-filter: none; }
	.lhcc-bg-orbs span { filter: blur(46px); }
	.lhcc-takeover { backdrop-filter: blur(6px); }
}

@media (prefers-reduced-motion: reduce) {
	.lhcc-anim-in, .lhcc-anim-back, .lhcc-progress-fill, .lhcc-bg-orbs span,
	.lhcc-badge-medal, .lhcc-badge-rays, .lhcc-chapter-icon, .lhcc-logo-img,
	.lhcc-hud-streak, .lhcc-xp-pop { animation: none !important; }
}

/* ---------- Theme-proofing ----------
   WordPress themes force their own colors on h1/h2/h3/p/li with high specificity.
   Pin every text color inside the overlay so the dark theme always wins.
   (The PDF clone lives outside .lhcc-overlay, so its light styles are unaffected.) */
.lhcc-overlay h1, .lhcc-overlay h2, .lhcc-overlay h3,
.lhcc-overlay p, .lhcc-overlay li, .lhcc-overlay label, .lhcc-overlay ol, .lhcc-overlay ul {
	color: var(--lhcc-text);
	text-shadow: none;
}
.lhcc-overlay .lhcc-qtext,
.lhcc-overlay .lhcc-loading-title,
.lhcc-overlay .lhcc-report-name { color: var(--lhcc-text) !important; }
.lhcc-overlay .lhcc-sub, .lhcc-overlay .lhcc-fineprint, .lhcc-overlay .lhcc-name-label,
.lhcc-overlay .lhcc-counter, .lhcc-overlay .lhcc-loading-step, .lhcc-overlay .lhcc-bar-note,
.lhcc-overlay .lhcc-dev-note, .lhcc-overlay .lhcc-report-foot, .lhcc-overlay .lhcc-chapter-blurb,
.lhcc-overlay .lhcc-report-top { color: var(--lhcc-muted) !important; }
.lhcc-overlay .lhcc-sec h3 { color: var(--lhcc-lavender-soft) !important; }
.lhcc-overlay .lhcc-flag h3, .lhcc-overlay .lhcc-flag-bridges,
.lhcc-overlay .lhcc-qhint, .lhcc-overlay .lhcc-chapter-tag,
.lhcc-overlay .lhcc-badge-kicker, .lhcc-overlay .lhcc-chapter-num,
.lhcc-overlay .lhcc-kicker-sub { color: var(--lhcc-gold) !important; }
.lhcc-overlay .lhcc-flag p, .lhcc-overlay .lhcc-badge-msg,
.lhcc-overlay .lhcc-opt-label { color: var(--lhcc-lavender-soft) !important; }
.lhcc-overlay .lhcc-opt.lhcc-selected .lhcc-opt-label { color: #ffffff !important; }
.lhcc-overlay .lhcc-bar-val, .lhcc-overlay .lhcc-career-score,
.lhcc-overlay .lhcc-badge-xp, .lhcc-overlay .lhcc-report-kicker { color: var(--lhcc-lavender) !important; }
.lhcc-overlay .lhcc-career-top .lhcc-career-score, .lhcc-overlay .lhcc-report-top strong { color: var(--lhcc-gold) !important; }
.lhcc-overlay .lhcc-career-body em, .lhcc-overlay .lhcc-realm-chip em { color: var(--lhcc-muted) !important; }
.lhcc-overlay .lhcc-degrees li, .lhcc-overlay .lhcc-realm-chip strong { color: var(--lhcc-lavender-soft) !important; }
.lhcc-overlay .lhcc-btn-primary { color: #ffffff !important; }
.lhcc-overlay .lhcc-btn-ghost { color: var(--lhcc-lavender) !important; }
.lhcc-overlay .lhcc-name-input { color: var(--lhcc-text) !important; }
/* Gradient titles: keep the clipped-gradient effect even if the theme sets a color */
.lhcc-overlay .lhcc-title, .lhcc-overlay .lhcc-chapter-name, .lhcc-overlay .lhcc-badge-name {
	-webkit-text-fill-color: transparent !important;
}