/* Lady Hawk Extempore — game UI (unified indigo + amber theme, larger type) */
.lhe-app{
	--ink:#1a1336;--ink-soft:rgba(26,19,54,.66);--paper:#f1ecff;--card:#ffffff;
	--accent:#ffb84d;--accent-2:#ff9e2c;--accent-deep:#e8851a;
	--violet:#7c5cff;--violet-2:#9b7bff;--violet-deep:#5a3fd6;
	--g-accent:linear-gradient(135deg,#ffb84d 0%,#ff9e2c 100%);
	--g-violet:linear-gradient(135deg,#7c5cff 0%,#9b7bff 100%);
	width:100%;font-family:'Outfit',-apple-system,BlinkMacSystemFont,sans-serif;color:var(--ink);line-height:1.55;
}
.lhe-app *{box-sizing:border-box}

/* ---------- screen shell ---------- */
.lhe-screen{
	position:relative;width:100%;background:#fff;border-radius:32px;
	padding:54px 48px;text-align:center;overflow:hidden;
	box-shadow:0 44px 100px -34px rgba(10,6,32,.7),0 0 0 1px rgba(255,255,255,.5) inset;
	opacity:0;transform:translateY(34px) scale(.96);
	transition:opacity .55s cubic-bezier(.2,.9,.2,1),transform .55s cubic-bezier(.2,.9,.2,1);
}
.lhe-screen.lhe-in{opacity:1;transform:none}
.lhe-screen::before{content:"";position:absolute;inset:0 0 auto 0;height:6px;background:var(--g-accent)}
.lhe-screen::after{content:"";position:absolute;top:-150px;right:-90px;width:380px;height:380px;background:var(--g-violet);filter:blur(95px);opacity:.12;pointer-events:none}

/* progress dots */
.lhe-steps{display:flex;gap:9px;justify-content:center;margin-bottom:26px}
.lhe-steps i{width:38px;height:6px;border-radius:6px;background:rgba(26,19,54,.12);transition:background .4s}
.lhe-steps i.on{background:var(--g-accent)}

.lhe-emblem{font-size:4rem;margin-bottom:12px;display:inline-block;animation:lhe-pop .6s cubic-bezier(.2,1.5,.4,1) both;filter:drop-shadow(0 8px 18px rgba(255,158,44,.35))}
@keyframes lhe-pop{from{transform:scale(0) rotate(-25deg)}to{transform:scale(1) rotate(0)}}
.lhe-kicker{font-family:'Spline Sans Mono',monospace;font-size:13px;letter-spacing:.3em;font-weight:600;color:var(--accent-deep);margin-bottom:16px;text-transform:uppercase}
.lhe-title{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(2.4rem,5.5vw,3.4rem);line-height:1.05;margin:0 0 16px;letter-spacing:-.025em}
.lhe-lead{font-size:1.24rem;font-weight:300;color:var(--ink-soft);max-width:46ch;margin:0 auto 32px}
.lhe-lead b{font-weight:600;color:var(--ink)}
.lhe-fine{font-size:.95rem;color:rgba(26,19,54,.5);margin-top:18px}

/* ---------- inputs ---------- */
.lhe-input{width:100%;max-width:460px;padding:22px 26px;font-size:1.3rem;text-align:center;border:2px solid rgba(26,19,54,.12);border-radius:18px;background:var(--paper);margin:0 auto 26px;display:block;transition:border-color .2s,box-shadow .2s,transform .2s;font-family:inherit}
.lhe-input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 6px rgba(255,184,77,.18);transform:translateY(-2px)}
.lhe-shake{animation:lhe-shake .42s}
@keyframes lhe-shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-10px)}60%{transform:translateX(10px)}}

/* ---------- BUTTONS ---------- */
.lhe-btn{
	position:relative;display:inline-flex;align-items:center;justify-content:center;gap:11px;cursor:pointer;
	font-family:inherit;font-weight:700;font-size:1.18rem;border:2px solid transparent;border-radius:50px;padding:17px 36px;
	color:var(--bg-0,#120c2e);letter-spacing:.01em;isolation:isolate;overflow:hidden;
	transition:transform .22s cubic-bezier(.2,1.5,.4,1),box-shadow .28s,filter .2s;
	text-decoration:none;-webkit-tap-highlight-color:transparent;
}
.lhe-btn::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--g-accent)}
/* glossy sheen */
.lhe-btn::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;z-index:-1;transform:skewX(-20deg);
	background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent);transition:left .6s}
.lhe-btn:hover::after{left:130%}
.lhe-btn:hover{transform:translateY(-3px) scale(1.02)}
.lhe-btn:active{transform:translateY(0) scale(.98)}
.lhe-btn-xl{font-size:1.28rem;padding:21px 46px;color:#3a2400;box-shadow:0 16px 34px -10px rgba(255,158,44,.7)}
.lhe-btn-xl:hover{box-shadow:0 24px 48px -10px rgba(255,158,44,.85)}
/* primary CTAs all share the amber accent; "go" matches for a single consistent theme */
.lhe-btn-go::before{background:var(--g-accent)}
.lhe-btn-go{color:#3a2400;box-shadow:0 16px 34px -10px rgba(255,158,44,.7)}
.lhe-btn-go:hover{box-shadow:0 24px 48px -10px rgba(255,158,44,.85)}
/* record = solid violet (still in palette), the one strong secondary signal */
.lhe-btn-rec::before{background:var(--g-violet)}
.lhe-btn-rec{color:#fff;box-shadow:0 16px 34px -10px rgba(124,92,255,.7);animation:lhe-rec-glow 1.8s ease-in-out infinite}
@keyframes lhe-rec-glow{0%,100%{box-shadow:0 16px 34px -10px rgba(124,92,255,.6)}50%{box-shadow:0 20px 44px -8px rgba(124,92,255,.95)}}
.lhe-btn-stop::before{background:linear-gradient(135deg,#2a2150,#1a1336)}
.lhe-btn-stop{color:#fff;box-shadow:0 16px 34px -12px rgba(10,6,32,.8)}
.lhe-btn-ghost{color:var(--ink);background:#fff;border:2px solid rgba(26,19,54,.2)}
.lhe-btn-ghost::before{display:none}
.lhe-btn-ghost::after{display:none}
.lhe-btn-ghost:hover{color:var(--violet-deep);background:rgba(124,92,255,.07);border-color:var(--violet)}
.lhe-ar{transition:transform .25s}
.lhe-btn:hover .lhe-ar{transform:translateX(6px)}

/* layouts: row (side by side) and stack (straight vertical alignment) */
.lhe-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.lhe-stack{display:flex;flex-direction:column;gap:14px;align-items:stretch;max-width:440px;margin:6px auto 0}
.lhe-btn-block{width:100%}
/* extra-grand Begin button on the topic-locked screen */
.lhe-btn-begin{font-size:1.5rem;padding:26px 46px;letter-spacing:.04em;border-radius:22px}
.lhe-btn-begin::before{background:linear-gradient(135deg,#ffc861 0%,#ff9e2c 55%,#e8851a 100%)}

/* ---------- category chips ---------- */
.lhe-chips{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:0 auto 32px;max-width:580px}
.lhe-chip-cat{font-family:inherit;font-weight:600;font-size:1.05rem;cursor:pointer;padding:13px 24px;border-radius:50px;border:2px solid rgba(26,19,54,.13);background:var(--paper);color:var(--ink);transition:transform .18s cubic-bezier(.2,1.5,.4,1),border-color .2s,background .25s,color .2s,box-shadow .25s}
.lhe-chip-cat:hover{transform:translateY(-3px);border-color:var(--violet)}
.lhe-chip-cat.on{background:var(--g-violet);color:#fff;border-color:transparent;box-shadow:0 10px 24px -8px rgba(124,92,255,.7)}

/* ---------- sliders ---------- */
.lhe-timers{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:0 auto 32px;max-width:560px}
.lhe-timer-box{background:var(--paper);border-radius:20px;padding:22px 22px 18px;text-align:left;border:1px solid rgba(26,19,54,.05)}
.lhe-timer-head{display:flex;justify-content:space-between;align-items:center;font-size:1.02rem;font-weight:600;margin-bottom:14px}
.lhe-timer-head b{font-family:'Spline Sans Mono',monospace;font-size:1.45rem;color:var(--accent-deep)}
.lhe-range{-webkit-appearance:none;appearance:none;width:100%;height:9px;border-radius:6px;background:rgba(26,19,54,.12);outline:none}
.lhe-range::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:var(--accent);cursor:pointer;box-shadow:0 5px 13px rgba(255,158,44,.6);border:4px solid #fff;transition:transform .15s}
.lhe-range::-webkit-slider-thumb:active{transform:scale(1.2)}
.lhe-range::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:var(--accent);cursor:pointer;border:4px solid #fff}
.lhe-range-ends{display:flex;justify-content:space-between;font-size:.8rem;color:rgba(26,19,54,.42);margin-top:10px;font-family:'Spline Sans Mono',monospace}

/* ---------- ready card ---------- */
.lhe-ready-card{position:relative;background:var(--g-violet);color:#fff;border-radius:26px;padding:42px 34px;margin:0 auto 30px;max-width:520px;box-shadow:0 24px 54px -16px rgba(124,92,255,.7);overflow:hidden}
.lhe-ready-card::after{content:"";position:absolute;top:-40px;right:-40px;width:170px;height:170px;border-radius:50%;background:rgba(255,255,255,.12)}
.lhe-ready-label{font-family:'Spline Sans Mono',monospace;font-size:12px;letter-spacing:.26em;opacity:.9;margin-bottom:16px}
.lhe-topic-big{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(1.8rem,4.8vw,2.6rem);line-height:1.14;margin:0 0 24px;position:relative}
.lhe-ready-meta{display:flex;gap:26px;justify-content:center;font-size:1.1rem;position:relative}
.lhe-ready-meta b{font-family:'Spline Sans Mono',monospace}
.lhe-topic-mid{font-family:'Fraunces',serif;font-weight:500;font-size:clamp(1.7rem,4.4vw,2.4rem);margin:10px 0 22px;line-height:1.16}

/* ---------- timer ring ---------- */
.lhe-ring{position:relative;width:250px;height:250px;margin:14px auto 22px}
.lhe-ring svg{transform:rotate(-90deg);width:100%;height:100%}
.lhe-ring .trk{fill:none;stroke:rgba(26,19,54,.09);stroke-width:9}
.lhe-ring .prg{fill:none;stroke:var(--accent);stroke-width:9;stroke-linecap:round;transition:stroke-dashoffset 1s linear;filter:drop-shadow(0 0 7px rgba(255,158,44,.55))}
.lhe-count{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Spline Sans Mono',monospace;font-size:3.6rem;font-weight:600;font-variant-numeric:tabular-nums}
.lhe-count-lg{position:static;font-size:4.2rem;display:block;margin:10px 0 16px}

/* ---------- phase pills ---------- */
.lhe-phase-pill{display:inline-flex;align-items:center;gap:10px;font-family:'Spline Sans Mono',monospace;font-size:13px;letter-spacing:.16em;font-weight:600;padding:11px 22px;border-radius:50px;margin-bottom:12px}
.lhe-pill-prep{background:rgba(124,92,255,.14);color:var(--violet-deep)}
.lhe-pill-rec{background:rgba(124,92,255,.16);color:var(--violet-deep)}
.lhe-pill-review{background:rgba(255,158,44,.16);color:var(--accent-deep)}
.lhe-pill-dot{width:11px;height:11px;border-radius:50%;background:currentColor;animation:lhe-pulse 1.2s infinite}
@keyframes lhe-pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ---------- meter + live transcript ---------- */
.lhe-meter{height:12px;border-radius:8px;background:rgba(26,19,54,.1);overflow:hidden;margin:14px auto 8px;max-width:460px}
.lhe-vol{height:100%;width:100%;background:var(--g-violet);transform:scaleY(0);transform-origin:bottom;transition:transform .08s}
.lhe-live{min-height:88px;max-height:190px;overflow:auto;background:var(--paper);border-radius:18px;padding:20px 22px;font-size:1.14rem;color:var(--ink-soft);margin:14px auto 20px;text-align:left;max-width:520px;line-height:1.65}
.lhe-audio{width:100%;max-width:520px;margin:10px auto 20px;display:block}

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

/* ---------- REPORT ---------- */
.lhe-report-hero{position:relative;border-radius:26px;padding:38px;color:#fff;margin-bottom:28px;overflow:hidden}
/* score bands stay within the single theme: amber = high, violet = mid, deep-violet = low */
.lhe-report-hero.g{background:var(--g-accent);color:#3a2400}
.lhe-report-hero.y{background:linear-gradient(135deg,#9b7bff,#7c5cff)}
.lhe-report-hero.r{background:linear-gradient(135deg,#6a4be0,#4a32b0)}
.lhe-report-hero::after{content:"";position:absolute;top:-50px;left:-30px;width:190px;height:190px;border-radius:50%;background:rgba(255,255,255,.13)}
.lhe-rank{font-family:'Spline Sans Mono',monospace;font-size:14px;letter-spacing:.26em;font-weight:600;opacity:.95;position:relative}
.lhe-bigscore{font-family:'Fraunces',serif;font-weight:600;font-size:5.4rem;line-height:1;margin:8px 0;position:relative}
.lhe-bigscore small{font-size:1.5rem;font-weight:400;opacity:.8}
.lhe-report-who{font-size:1.08rem;opacity:.96;position:relative}
.lhe-scores{display:flex;flex-direction:column;gap:13px;margin-bottom:26px;text-align:left}
.lhe-score{display:grid;grid-template-columns:170px 1fr 44px;align-items:center;gap:14px;font-size:1.04rem;font-weight:500}
.lhe-bar{height:12px;border-radius:8px;background:rgba(26,19,54,.1);overflow:hidden}
.lhe-bar i{display:block;height:100%;border-radius:8px;transition:width 1.1s cubic-bezier(.2,.9,.2,1)}
.lhe-bar i.g{background:var(--accent)}.lhe-bar i.y{background:var(--violet)}.lhe-bar i.r{background:var(--violet-deep)}
.lhe-score b{text-align:right;font-variant-numeric:tabular-nums;font-family:'Spline Sans Mono',monospace;font-size:1.05rem}
.lhe-statline{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:28px}
.lhe-stat{background:var(--paper);border-radius:18px;padding:18px 26px;min-width:96px}
.lhe-stat b{display:block;font-size:1.75rem;font-family:'Spline Sans Mono',monospace}
.lhe-stat span{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(26,19,54,.55)}
.lhe-h3{font-family:'Fraunces',serif;font-size:1.4rem;margin:22px 0 12px;text-align:left}
.lhe-transcript{background:var(--paper);border-radius:18px;padding:22px;font-size:1.12rem;line-height:1.8;text-align:left}
.lhe-kw{background:rgba(255,184,77,.4);border-radius:5px;padding:1px 6px;font-weight:600}
.lhe-fl{background:rgba(124,92,255,.26);border-radius:5px;padding:1px 6px}
.lhe-legend{margin-top:12px;font-size:.92rem;display:flex;gap:16px;color:rgba(26,19,54,.55);justify-content:flex-start}
.lhe-tips{margin:0 0 26px;padding-left:24px;text-align:left;font-size:1.1rem}
.lhe-tips li{margin:10px 0}

@media(max-width:600px){
	.lhe-screen{padding:38px 24px;border-radius:26px}
	.lhe-timers{grid-template-columns:1fr}
	.lhe-score{grid-template-columns:120px 1fr 38px;font-size:.98rem}
	.lhe-ring{width:200px;height:200px}
	.lhe-count{font-size:3rem}
	.lhe-lead{font-size:1.12rem}
}