/* ============================================================
   Lady Hawk Extempore Express — Editorial dark theme
   Near-black surfaces · signature pink → lavender → peach
   gradient · refined dark cards · left-aligned, generous space.
   Class names kept stable for app.js.
   ============================================================ */
.lhe-app{
	--ink:#f4f3f8;--ink-soft:#a6a2b4;--ink-dim:#6f6b7e;
	--surface:#2a2b37;--surface-2:#32333f;--surface-3:#3b3c4a;
	--line:rgba(255,255,255,.09);--line-2:rgba(255,255,255,.16);
	--accent:#b89aff;--accent-pink:#ff8fb4;--accent-peach:#ffb08a;
	--grad:linear-gradient(96deg,#ff8fb4 0%,#c79bff 50%,#ffb08a 100%);
	--grad-soft:linear-gradient(96deg,rgba(255,143,180,.16),rgba(199,155,255,.16),rgba(255,176,138,.16));
	--tile:rgba(184,154,255,.1);--tile-line:rgba(184,154,255,.22);--tile-ico:#cdb6ff;
	--shadow:0 30px 80px -40px rgba(0,0,0,.9);
	--r-xl:24px;--r-lg:18px;--r-md:13px;
	width:100%;height:100%;font-family:'Outfit',-apple-system,BlinkMacSystemFont,sans-serif;color:var(--ink);line-height:1.5;
	-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
.lhe-app *{box-sizing:border-box}
.lhe-app ::selection{background:rgba(199,155,255,.32);color:#fff}

/* ---------- screen scaffold: centered masthead + scrollable stage ---------- */
.lhe-screen{position:relative;display:flex;flex-direction:column;width:100%;height:100%;max-height:100%;overflow:hidden;text-align:center;
	opacity:0;transform:translateY(14px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
.lhe-screen.lhe-in{opacity:1;transform:none}

/* masthead: big centred logo + title; XP pill floats top-left */
.lhe-topbar{position:relative;flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:10px;
	padding:clamp(16px,2.6vh,30px) clamp(60px,9vw,96px) clamp(6px,1.2vh,14px)}
.lhe-brandmark{display:flex;flex-direction:column;align-items:center;gap:0;text-align:center;max-width:100%}
.lhe-brand-logo{display:block;width:clamp(96px,16vh,184px);height:auto;
	filter:drop-shadow(0 12px 30px rgba(199,155,255,.35));animation:lhe-hover 5s ease-in-out infinite}
@keyframes lhe-hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.lhe-brandmark-logo{flex:0 0 auto;width:54px;height:54px;border-radius:15px;display:flex;align-items:center;justify-content:center;
	font-family:'Fraunces',serif;font-weight:600;font-size:1.4rem;color:#1a1024;background:var(--grad);box-shadow:0 8px 20px -6px rgba(199,155,255,.8)}
.lhe-brandmark-text{font-weight:700;font-size:clamp(1.4rem,3.1vh,2.4rem);color:var(--ink);letter-spacing:-.015em;line-height:1.1;text-wrap:balance}
.lhe-brandmark-text em{font-style:normal;font-weight:700;
	background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* XP / level pill — top-left, opposite the close button */
.lhe-lvpill{position:absolute;top:clamp(14px,2vh,22px);left:clamp(14px,2vw,26px);z-index:6;
	display:flex;align-items:center;gap:10px;padding:7px 14px;border-radius:50px;background:var(--surface-2);border:1px solid var(--line);
	font-family:'Spline Sans Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.04em;white-space:nowrap;
	box-shadow:0 8px 22px -14px rgba(0,0,0,.9)}
.lhe-lvpill-lv{color:var(--accent)}
.lhe-lvpill-bar{width:48px;height:6px;border-radius:5px;background:rgba(255,255,255,.12);overflow:hidden}
.lhe-lvpill-bar i{display:block;height:100%;border-radius:5px;background:var(--grad)}
.lhe-lvpill-xp{color:var(--ink-soft)}
.lhe-lvpill-streak{color:var(--accent-peach)}

/* centred content stage — vertically centres each screen so it fits the
   viewport; only scrolls internally when content truly exceeds the height. */
.lhe-inner{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
	display:flex;flex-direction:column;align-items:center;justify-content:safe center;
	width:100%;max-width:1200px;margin:0 auto;padding:clamp(10px,2vh,26px) clamp(22px,4.5vw,64px) clamp(14px,2.6vh,30px);
	scrollbar-width:thin;scrollbar-color:rgba(184,154,255,.4) transparent}
.lhe-inner>*{max-width:100%;flex:0 0 auto}
.lhe-inner>.lhe-cat-grid,.lhe-inner>.lhe-diffs,.lhe-inner>.lhe-timers,.lhe-inner>.lhe-scores,
.lhe-inner>.lhe-report-hero,.lhe-inner>.lhe-xp-card,.lhe-inner>.lhe-badges,.lhe-inner>.lhe-levelup,
.lhe-inner>.lhe-transcript,.lhe-inner>.lhe-tips,.lhe-inner>.lhe-statline{width:100%}
.lhe-inner::-webkit-scrollbar{width:9px}
.lhe-inner::-webkit-scrollbar-thumb{background:rgba(184,154,255,.3);border-radius:9px;border:2px solid transparent;background-clip:padding-box}
.lhe-inner>*{animation:lhe-rise .6s cubic-bezier(.16,1,.3,1) both}
.lhe-inner>*:nth-child(1){animation-delay:.02s}
.lhe-inner>*:nth-child(2){animation-delay:.08s}
.lhe-inner>*:nth-child(3){animation-delay:.14s}
.lhe-inner>*:nth-child(4){animation-delay:.2s}
.lhe-inner>*:nth-child(5){animation-delay:.26s}
.lhe-inner>*:nth-child(6){animation-delay:.32s}
@keyframes lhe-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---------- type ---------- */
.lhe-emblem{margin-bottom:14px;color:var(--accent);
	width:clamp(60px,9vmin,80px);height:clamp(60px,9vmin,80px);border-radius:18px;display:flex;align-items:center;justify-content:center;
	background:var(--tile);border:1px solid var(--tile-line);box-shadow:inset 0 0 18px rgba(184,154,255,.12)}
/* crafted line-icons (replace emoji) */
.lhe-ic{display:block;width:100%;height:100%}
.lhe-emblem .lhe-ic{width:50%;height:50%}
.lhe-kicker{display:flex;width:fit-content;align-items:center;gap:10px;font-family:'Spline Sans Mono',monospace;
	font-size:clamp(12px,1.8vmin,15px);letter-spacing:.22em;font-weight:600;text-transform:uppercase;color:var(--ink-soft);
	padding:10px 20px;border-radius:50px;background:var(--surface-2);border:1px solid var(--line);margin-bottom:clamp(16px,2.6vmin,26px)}
.lhe-kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 10px var(--accent)}
.lhe-title{font-weight:800;font-size:clamp(3rem,7.6vw,6.6rem);line-height:1.02;margin:0 0 clamp(14px,2vmin,22px);letter-spacing:-.03em;text-wrap:balance;
	background:linear-gradient(96deg,#ff8fb4 0%,#c79bff 28%,#ffb08a 54%,#ff8fb4 78%,#c79bff 100%);background-size:220% auto;
	-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:lhe-grad 9s ease infinite}
@keyframes lhe-grad{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.lhe-title em{font-style:italic;font-weight:700}
.lhe-lead{font-size:clamp(1.18rem,1.8vw,1.58rem);font-weight:400;color:var(--ink-soft);max-width:56ch;margin:0 0 clamp(22px,3.2vmin,38px);line-height:1.6}
.lhe-lead b{font-weight:600;color:var(--ink)}
.lhe-lead-tight{margin-bottom:clamp(10px,1.6vmin,16px)}
.lhe-rec-hint{font-size:clamp(.95rem,1.3vw,1.1rem);color:var(--ink-dim);margin-bottom:clamp(16px,2.4vmin,28px)}
.lhe-fine{font-size:clamp(.82rem,1.2vw,.95rem);color:var(--ink-dim);margin-top:clamp(10px,1.6vmin,18px)}

/* ---------- buttons ----------
   The gradient lives DIRECTLY on the button element (not on a z-index:-1
   ::before, which could render behind the stage and look white). */
.lhe-btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;
	font-family:inherit;font-weight:600;font-size:clamp(1.05rem,1.4vw,1.22rem);border:1px solid transparent;border-radius:50px;
	padding:clamp(15px,1.9vw,19px) clamp(28px,3vw,38px);color:#1a1024;letter-spacing:.005em;overflow:hidden;
	background:var(--grad);
	box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 10px 26px -16px rgba(199,155,255,.6);
	transition:transform .25s cubic-bezier(.2,1.3,.4,1),box-shadow .3s,filter .25s;
	text-decoration:none;-webkit-tap-highlight-color:transparent}
/* hover sheen sweep */
.lhe-btn::after{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;transform:skewX(-20deg);pointer-events:none;
	background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transition:left .7s}
.lhe-btn:hover::after{left:140%}
.lhe-btn:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 18px 40px -14px rgba(199,155,255,.8)}
.lhe-btn:active{transform:translateY(0)}
.lhe-btn:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(199,155,255,.45)}
.lhe-btn-xl{font-size:clamp(1.12rem,1.5vw,1.32rem);padding:clamp(17px,2.2vw,23px) clamp(32px,3.4vw,46px)}
.lhe-btn-go{background:var(--grad)}
.lhe-btn-rec{color:#fff;background:linear-gradient(96deg,#ff6f9c,#c79bff);animation:lhe-rec 2s ease-in-out infinite}
@keyframes lhe-rec{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 14px 34px -16px rgba(255,111,156,.6)}50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 18px 44px -12px rgba(255,111,156,.95)}}
.lhe-btn-stop{color:#fff;background:#2a2533;border-color:var(--line-2);box-shadow:0 10px 26px -16px rgba(0,0,0,.9)}
.lhe-btn-stop::after{display:none}
.lhe-btn-ghost{color:var(--ink);background:var(--surface-2);border:1px solid var(--line-2);box-shadow:none}
.lhe-btn-ghost::after{display:none}
.lhe-btn-ghost:hover{background:var(--surface-3);border-color:rgba(184,154,255,.4);box-shadow:none;color:#fff}
.lhe-btn-quit{color:var(--ink-dim);background:transparent;border:1px dashed var(--line-2);box-shadow:none}
.lhe-btn-quit::after{display:none}
.lhe-btn-quit:hover{color:#ff9ab0;border-color:rgba(255,143,180,.5);background:rgba(255,143,180,.06);box-shadow:none}
.lhe-ar{transition:transform .25s;display:inline-block}
.lhe-btn:hover .lhe-ar{transform:translateX(5px)}

.lhe-row{display:flex;gap:clamp(16px,2vw,26px);flex-wrap:wrap;margin-top:clamp(18px,2.4vmin,30px);justify-content:flex-start}
.lhe-row-start{margin-top:clamp(20px,3vmin,32px)}
.lhe-stack{display:flex;flex-direction:column;gap:14px;align-items:stretch;max-width:460px;margin:10px 0 0}
.lhe-btn-block{width:100%}
.lhe-btn-begin{font-size:clamp(1.3rem,1.7vw,1.6rem);padding:clamp(20px,2.5vw,26px) 48px;letter-spacing:.01em;border-radius:16px}

/* ---------- inputs ---------- */
.lhe-input{width:100%;max-width:560px;padding:clamp(17px,2vw,22px) 24px;font-size:clamp(1.15rem,1.6vw,1.4rem);text-align:left;
	border:1px solid var(--line-2);border-radius:var(--r-md);background:var(--surface-2);color:var(--ink);
	margin:0 0 clamp(16px,2.4vmin,24px);display:block;transition:border-color .25s,box-shadow .25s,background .25s;font-family:inherit}
.lhe-input::placeholder{color:var(--ink-dim)}
.lhe-input:focus{outline:none;border-color:var(--accent);background:var(--surface-3);box-shadow:0 0 0 4px rgba(184,154,255,.16)}
.lhe-shake{animation:lhe-shake .42s}
@keyframes lhe-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-9px)}60%{transform:translateX(9px)}}

/* ---------- category card grid (reference style) ---------- */
.lhe-cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:clamp(16px,1.6vw,24px);margin:0 0 clamp(8px,1.4vmin,14px);width:100%}
.lhe-cat-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;text-align:left;cursor:pointer;font-family:inherit;
	background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(16px,1.5vw,22px);min-height:0;color:var(--ink);overflow:hidden;
	transition:transform .3s cubic-bezier(.2,1.2,.4,1),border-color .3s,background .3s,box-shadow .3s}
/* gradient hairline that lights up on hover */
.lhe-cat-card::before{content:"";position:absolute;inset:0 0 auto 0;height:1.5px;background:var(--grad);opacity:0;transition:opacity .35s}
.lhe-cat-card:hover{transform:translateY(-5px);border-color:rgba(184,154,255,.45);background:var(--surface-2);box-shadow:0 30px 60px -28px rgba(0,0,0,.95),0 0 40px -20px rgba(199,155,255,.5)}
.lhe-cat-card:hover::before{opacity:.9}
.lhe-cat-card:hover .lhe-cat-ico{color:#fff;background:var(--grad);border-color:transparent;transform:translateY(-2px) rotate(-3deg)}
.lhe-cat-card:hover .lhe-cat-go .lhe-ar{transform:translateX(4px)}
.lhe-cat-card:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(184,154,255,.3)}
.lhe-cat-card.off{opacity:.5;cursor:not-allowed}
.lhe-cat-ico{width:50px;height:50px;border-radius:14px;display:flex;align-items:center;justify-content:center;color:var(--accent);
	background:var(--tile);border:1px solid var(--tile-line);margin-bottom:auto;transition:color .3s,background .3s,border-color .3s,transform .3s}
.lhe-cat-ico .lhe-ic{width:26px;height:26px}
.lhe-cat-name{font-weight:700;font-size:clamp(1.15rem,1.5vw,1.4rem);margin-top:12px;letter-spacing:-.01em;color:#fff}
.lhe-cat-sub{font-size:1.02rem;color:var(--ink-soft);margin-top:6px;line-height:1.45}
.lhe-cat-foot{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
	font-size:.88rem}
.lhe-cat-meta{color:var(--ink-dim)}
.lhe-cat-go{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--accent)}
.lhe-cat-surprise{background:var(--grad-soft);border-color:rgba(199,155,255,.3)}
.lhe-cat-surprise .lhe-cat-ico{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18)}

/* ---------- difficulty cards ---------- */
.lhe-diffs{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,18px);margin:0 0 clamp(8px,1.4vmin,14px);width:100%;max-width:980px}
.lhe-diff{position:relative;cursor:pointer;font-family:inherit;display:flex;flex-direction:column;align-items:flex-start;gap:10px;text-align:left;
	background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);padding:clamp(22px,2.1vw,32px);color:var(--ink);overflow:hidden;
	transition:transform .3s cubic-bezier(.2,1.2,.4,1),border-color .3s,background .3s,box-shadow .3s}
.lhe-diff:hover{transform:translateY(-4px);border-color:rgba(184,154,255,.4);background:var(--surface-2);box-shadow:0 24px 46px -26px rgba(0,0,0,.9)}
.lhe-diff:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px rgba(184,154,255,.3)}
.lhe-diff:hover .lhe-diff-ico{color:#fff;background:var(--grad);border-color:transparent;transform:translateY(-2px) rotate(-3deg)}
.lhe-diff.on{border-color:transparent;background:var(--grad-soft);box-shadow:0 24px 50px -24px rgba(199,155,255,.4),inset 0 0 0 1.5px rgba(199,155,255,.5)}
.lhe-diff.on .lhe-diff-ico{color:#fff;background:var(--grad);border-color:transparent}
.lhe-diff-ico{width:62px;height:62px;border-radius:17px;display:flex;align-items:center;justify-content:center;color:var(--accent);
	background:var(--tile);border:1px solid var(--tile-line);transition:color .3s,background .3s,border-color .3s,transform .3s}
.lhe-diff-ico .lhe-ic{width:31px;height:31px}
.lhe-diff b{font-size:clamp(1.2rem,1.6vw,1.5rem);font-weight:700;color:#fff;letter-spacing:-.01em}
.lhe-diff small{font-size:.96rem;color:var(--ink-soft);line-height:1.45}
.lhe-diff-xp{font-family:'Spline Sans Mono',monospace;font-size:.76rem;font-weight:600;letter-spacing:.04em;color:#1a1024;
	background:var(--grad);border-radius:50px;padding:5px 13px;margin-top:4px}

.lhe-quest-pill{display:flex;width:fit-content;align-items:center;gap:8px;font-family:'Spline Sans Mono',monospace;font-size:clamp(11px,1.3vw,13px);
	font-weight:600;letter-spacing:.06em;background:var(--surface-2);border:1px solid var(--line);color:var(--accent);border-radius:50px;padding:8px 18px;margin-bottom:clamp(12px,2vmin,18px)}

/* legacy chips (kept harmless if used) */
.lhe-chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px}
.lhe-chip-cat{font-family:inherit;font-weight:600;cursor:pointer;padding:11px 20px;border-radius:50px;border:1px solid var(--line-2);background:var(--surface-2);color:var(--ink)}
.lhe-chip-cat.on{background:var(--grad);color:#1a1024;border-color:transparent}

/* ---------- sliders ---------- */
.lhe-timers{display:grid;grid-template-columns:1fr 1fr;gap:clamp(13px,1.4vw,20px);margin:0 0 clamp(20px,3vmin,30px);max-width:760px;width:100%}
.lhe-timer-box{background:linear-gradient(180deg,var(--surface-2),var(--surface));border:1px solid var(--line-2);border-radius:var(--r-lg);padding:clamp(18px,1.8vw,24px);text-align:left;box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 16px 40px -28px rgba(0,0,0,.8)}
.lhe-timer-head{display:flex;justify-content:space-between;align-items:center;font-size:.98rem;font-weight:600;margin-bottom:14px}
.lhe-timer-head b{font-family:'Spline Sans Mono',monospace;font-size:1.6rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.lhe-range{-webkit-appearance:none;appearance:none;width:100%;height:7px;border-radius:6px;outline:none;
	background:linear-gradient(96deg,#ff8fb4,#c79bff) no-repeat,rgba(255,255,255,.12);background-size:50% 100%}
.lhe-range::-webkit-slider-thumb{-webkit-appearance:none;width:24px;height:24px;border-radius:50%;background:#fff;cursor:pointer;
	box-shadow:0 4px 14px rgba(199,155,255,.7),0 0 0 5px rgba(184,154,255,.2);transition:transform .15s}
.lhe-range::-webkit-slider-thumb:active{transform:scale(1.2)}
.lhe-range::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;cursor:pointer;border:0;box-shadow:0 4px 14px rgba(199,155,255,.7)}
.lhe-range-ends{display:flex;justify-content:space-between;font-size:.78rem;color:var(--ink-dim);margin-top:9px;font-family:'Spline Sans Mono',monospace}

.lhe-topic-mid{font-weight:700;font-size:clamp(1.7rem,3.4vw,2.7rem);margin:6px 0 clamp(14px,2vmin,22px);line-height:1.12;letter-spacing:-.02em;color:#fff;max-width:24ch}

/* ---------- timer ring ---------- */
.lhe-ring{position:relative;width:clamp(180px,34vmin,280px);height:clamp(180px,34vmin,280px);margin:clamp(8px,1.4vmin,16px) 0 clamp(14px,2vmin,22px)}
.lhe-ring svg{transform:rotate(-90deg);width:100%;height:100%}
.lhe-ring .trk{fill:none;stroke:rgba(255,255,255,.1);stroke-width:8}
.lhe-ring .prg{fill:none;stroke:url(#lhe-ring-grad);stroke-width:9;stroke-linecap:round;transition:stroke-dashoffset 1s linear}
.lhe-count{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Spline Sans Mono',monospace;
	font-size:clamp(2.6rem,7vmin,4rem);font-weight:600;font-variant-numeric:tabular-nums;color:#fff}
.lhe-count-lg{position:static;font-size:clamp(3rem,9vmin,4.6rem);display:block;margin:clamp(4px,1vmin,10px) 0 clamp(8px,1.4vmin,14px);
	background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;width:max-content}

/* ---------- phase pills ---------- */
.lhe-phase-pill{display:flex;width:fit-content;align-items:center;gap:10px;font-family:'Spline Sans Mono',monospace;font-size:clamp(11px,1.3vw,13px);
	letter-spacing:.14em;font-weight:600;padding:9px 18px;border-radius:50px;margin-bottom:14px;border:1px solid var(--line);background:var(--surface-2)}
.lhe-pill-prep{color:var(--accent)}
.lhe-pill-rec{color:var(--accent-pink)}
.lhe-pill-review{color:var(--accent-peach)}
.lhe-pill-dot{width:9px;height:9px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor;animation:lhe-pulse 1.2s infinite}
@keyframes lhe-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}

/* ---------- meter + transcript ---------- */
.lhe-meter{height:10px;border-radius:8px;background:rgba(255,255,255,.1);overflow:hidden;margin:10px 0 8px;max-width:560px}
.lhe-vol{height:100%;width:100%;background:var(--grad);transform:scaleY(0);transform-origin:bottom;transition:transform .08s}
.lhe-live{min-height:clamp(60px,10vmin,90px);max-height:clamp(90px,20vmin,180px);overflow:auto;background:var(--surface);border:1px solid var(--line);
	border-radius:var(--r-md);padding:clamp(13px,1.4vw,18px) clamp(15px,1.6vw,20px);font-size:clamp(.98rem,1.3vw,1.08rem);color:var(--ink-soft);
	margin:10px 0 16px;text-align:left;max-width:680px;line-height:1.6}
.lhe-audio{width:100%;max-width:560px;margin:8px 0 16px;display:block}

/* ---------- spinner ---------- */
.lhe-spinner{width:54px;height:54px;border-radius:50%;border:3px solid rgba(255,255,255,.12);border-top-color:var(--accent);margin:14px 0 22px;animation:lhe-spin .8s linear infinite}
@keyframes lhe-spin{to{transform:rotate(360deg)}}

/* ---------- report ---------- */
.lhe-report-hero{position:relative;border-radius:var(--r-xl);padding:clamp(24px,3vw,40px);color:#1a1024;margin:0 0 22px;overflow:hidden;width:100%}
.lhe-report-hero.g{background:var(--grad)}
.lhe-report-hero.y{background:linear-gradient(96deg,#c79bff,#9b7bff)}
.lhe-report-hero.r{background:linear-gradient(96deg,#8a6bd6,#6a4fc0);color:#fff}
.lhe-report-hero::after{content:"";position:absolute;top:-60px;right:-40px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.16)}
.lhe-rank{font-family:'Spline Sans Mono',monospace;font-size:clamp(11px,1.4vw,14px);letter-spacing:.2em;font-weight:600;opacity:.92;position:relative}
.lhe-bigscore{font-weight:800;font-size:clamp(4rem,9vw,6.4rem);line-height:1;margin:8px 0;position:relative;letter-spacing:-.03em}
.lhe-bigscore small{font-size:.3em;font-weight:500;opacity:.7}
.lhe-report-who{font-size:clamp(.95rem,1.3vw,1.06rem);opacity:.9;position:relative;font-weight:500}
.lhe-xp-pop{position:absolute;top:18px;right:20px;font-family:'Spline Sans Mono',monospace;font-weight:700;font-size:clamp(1rem,1.6vw,1.3rem);
	background:rgba(26,16,36,.86);color:#fff;border-radius:50px;padding:9px 18px;animation:lhe-pop .8s cubic-bezier(.2,1.6,.4,1) both .3s}
@keyframes lhe-pop{from{transform:scale(0)}to{transform:scale(1)}}

.lhe-levelup{position:relative;background:var(--grad);color:#1a1024;border-radius:var(--r-lg);padding:15px 22px;margin:0 0 18px;font-size:clamp(1rem,1.4vw,1.16rem);font-weight:600;overflow:hidden}
.lhe-levelup::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.4),transparent);transform:translateX(-100%);animation:lhe-sheen 2.4s ease-in-out infinite}
@keyframes lhe-sheen{0%{transform:translateX(-100%)}55%,100%{transform:translateX(120%)}}

.lhe-xp-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(15px,1.6vw,21px);margin:0 0 20px;text-align:left}
.lhe-xp-head{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-family:'Spline Sans Mono',monospace;font-size:12px;font-weight:600;letter-spacing:.05em;color:var(--accent);margin-bottom:11px}
.lhe-xpbar-lg{display:block;height:12px;margin-bottom:13px;border-radius:7px;background:rgba(255,255,255,.12);overflow:hidden}
.lhe-xpbar-lg i{display:block;height:100%;border-radius:7px;background:var(--grad);transition:width 1.1s cubic-bezier(.16,1,.3,1)}
.lhe-xp-line{display:flex;justify-content:space-between;font-size:.95rem;padding:6px 2px;border-bottom:1px dashed var(--line)}
.lhe-xp-line:last-child{border-bottom:0}
.lhe-xp-line b{font-family:'Spline Sans Mono',monospace;color:var(--accent)}

.lhe-badges{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:11px;margin:0 0 20px}
.lhe-badge{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 11px;display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center}
.lhe-badge-new{box-shadow:0 14px 30px -16px rgba(199,155,255,.6);border-color:rgba(184,154,255,.4);animation:lhe-pop .6s cubic-bezier(.2,1.6,.4,1) both}
.lhe-badge-ico{font-size:1.9rem;line-height:1}
.lhe-badge b{font-size:.95rem;color:#fff}
.lhe-badge small{font-size:.77rem;color:var(--ink-soft);line-height:1.3}

.lhe-scores{display:flex;flex-direction:column;gap:12px;margin:0 0 22px;text-align:left;width:100%;max-width:760px}
.lhe-score{display:grid;grid-template-columns:minmax(112px,180px) 1fr 42px;align-items:center;gap:13px;font-size:clamp(.9rem,1.2vw,1.02rem);font-weight:500}
.lhe-bar{height:10px;border-radius:8px;background:rgba(255,255,255,.1);overflow:hidden}
.lhe-bar i{display:block;height:100%;border-radius:8px;transition:width 1.2s cubic-bezier(.16,1,.3,1)}
.lhe-bar i.g{background:linear-gradient(90deg,#c79bff,#ffb08a)}
.lhe-bar i.y{background:linear-gradient(90deg,#b89aff,#c79bff)}
.lhe-bar i.r{background:linear-gradient(90deg,#8a6bd6,#b89aff)}
.lhe-score b{text-align:right;font-variant-numeric:tabular-nums;font-family:'Spline Sans Mono',monospace;font-size:1rem;color:#fff}
.lhe-statline{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 22px}
.lhe-stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:14px 22px;min-width:90px;text-align:left}
.lhe-stat b{display:block;font-size:clamp(1.35rem,2vw,1.7rem);font-family:'Spline Sans Mono',monospace;color:#fff}
.lhe-stat span{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-dim)}
.lhe-h3{font-weight:700;font-size:clamp(1.32rem,1.8vw,1.6rem);margin:22px 0 11px;text-align:left;color:#fff;letter-spacing:-.01em}
.lhe-transcript{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);padding:clamp(15px,1.8vw,21px);font-size:clamp(.98rem,1.3vw,1.08rem);line-height:1.78;text-align:left;color:var(--ink-soft);max-width:760px}
.lhe-kw{background:rgba(184,154,255,.28);color:#e7ddff;border-radius:5px;padding:1px 6px;font-weight:600}
.lhe-fl{background:rgba(255,143,180,.26);color:#ffd5e2;border-radius:5px;padding:1px 6px}
.lhe-legend{margin-top:11px;font-size:.88rem;display:flex;gap:16px;color:var(--ink-dim)}
.lhe-tips{margin:0 0 22px;padding-left:22px;text-align:left;font-size:clamp(.95rem,1.3vw,1.05rem);max-width:760px;color:var(--ink-soft)}
.lhe-tips li{margin:9px 0}
.lhe-tips li::marker{color:var(--accent)}

/* ---------- confetti ---------- */
.lhe-confetti{position:fixed;inset:0;z-index:9999;pointer-events:none;overflow:hidden}
.lhe-confetti i{position:absolute;top:-16px;display:block;opacity:.95;animation:lhe-fall linear forwards}
@keyframes lhe-fall{0%{transform:translateY(-20px) rotate(0)}100%{transform:translateY(105vh) rotate(720deg);opacity:.55}}

/* ---------- richness: subtle depth on cards & panels ---------- */
.lhe-cat-card,.lhe-diff{background:linear-gradient(180deg,var(--surface-2),var(--surface));box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 18px 44px -30px rgba(0,0,0,.85)}
.lhe-xp-card,.lhe-stat,.lhe-transcript,.lhe-badge,.lhe-live{box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.lhe-kicker,.lhe-lvpill,.lhe-phase-pill,.lhe-quest-pill{box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 8px 22px -16px rgba(0,0,0,.8)}

/* ---------- responsive ---------- */
@media(max-width:760px){
	.lhe-topbar{padding:clamp(48px,8vh,60px) 16px 6px}
	.lhe-inner{padding:14px 18px 40px}
	.lhe-diffs{grid-template-columns:1fr;max-width:460px}
	.lhe-diff{flex-direction:row;align-items:center}
	.lhe-diff-ico{flex:0 0 auto}
	.lhe-diff-xp{margin-left:auto}
	.lhe-timers{grid-template-columns:1fr;max-width:460px}
	.lhe-cat-grid{grid-template-columns:1fr}
	.lhe-cat-card{min-height:0}
	.lhe-score{grid-template-columns:100px 1fr 34px;font-size:.9rem}
	.lhe-row .lhe-btn{flex:1 1 auto}
	.lhe-lvpill-bar{display:none}
}
/* ---------- centred layout (everything centres on the stage) ---------- */
.lhe-emblem{margin-left:auto;margin-right:auto}
.lhe-kicker,.lhe-quest-pill,.lhe-phase-pill{margin-left:auto;margin-right:auto}
.lhe-title{margin-left:auto;margin-right:auto}
.lhe-topic-mid{margin-left:auto;margin-right:auto}
.lhe-lead{margin-left:auto;margin-right:auto}
.lhe-input{margin-left:auto;margin-right:auto}
.lhe-row{justify-content:center}
.lhe-stack{margin-left:auto;margin-right:auto}
.lhe-diffs,.lhe-timers,.lhe-cat-grid,.lhe-scores,.lhe-transcript,.lhe-tips,.lhe-xp-card,.lhe-badges,.lhe-levelup,.lhe-report-hero,.lhe-meter,.lhe-live,.lhe-audio{margin-left:auto;margin-right:auto}
.lhe-statline{justify-content:center}
.lhe-ring{margin-left:auto;margin-right:auto}
.lhe-count-lg{margin-left:auto;margin-right:auto}
.lhe-h3{text-align:center}
/* keep these blocks left-read internally while the block itself is centred */
.lhe-scores,.lhe-transcript,.lhe-tips{text-align:left}

@media(prefers-reduced-motion:reduce){
	.lhe-screen,.lhe-inner>*,.lhe-levelup::after,.lhe-btn-rec,.lhe-pill-dot,.lhe-spinner,.lhe-brand-logo,.lhe-title{animation:none!important;transition:none!important}
	.lhe-screen{opacity:1;transform:none}
}