:root{
  --void:#04100a;--lab:#071a0c;--panel:rgba(10,30,14,0.88);
  --acid:#a3e635;--acid-dim:#5a8a1a;--acid-glow:rgba(163,230,53,0.2);
  --danger:#ef4444;--cold:#38bdf8;--warn:#fbbf24;--purple:#a78bfa;
  --ink:#e8f5e9;--ink-soft:#86efac;--ink-muted:#7A9B82;
  --border:rgba(163,230,53,0.12);--border-bright:rgba(163,230,53,0.35);
  --germ-rhino:#ef4444;--germ-flu:#f97316;--germ-bacteria:#22c55e;
  --germ-mucus:#38bdf8;--germ-toxin:#a78bfa;
  --font-display:'Rajdhani',sans-serif;
  --font-body:'Nunito',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
  --glass-bg:rgba(163,230,53,.06);--glass-stroke:rgba(163,230,53,.18);--glass-blur:16px;--glass-hi:rgba(255,255,255,.10);--glass-shadow:0 8px 32px rgba(0,0,0,.45);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{background:var(--void);font-family:var(--font-body);color:var(--ink);min-height:100vh;overflow-x:hidden}
body{background:radial-gradient(ellipse at 30% 20%,rgba(163,230,53,0.05) 0%,transparent 50%),radial-gradient(ellipse at 70% 80%,rgba(56,189,248,0.04) 0%,transparent 50%),linear-gradient(180deg,var(--void) 0%,var(--lab) 50%,var(--void) 100%);background-attachment:fixed;position:relative}
body::before{content:'';position:fixed;inset:0;pointer-events:none;z-index:0;background-image:linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:48px 48px}
.screen{display:none;min-height:100vh;position:relative;z-index:1}
.screen.active{display:flex;flex-direction:column}
.acid{color:var(--acid)}
.mono{font-family:var(--font-mono)}
/* HEADER */
.hq-header{display:flex;align-items:center;gap:12px;padding:14px 18px 10px;border-bottom:1px solid var(--border)}
.hq-logo{width:50px;height:50px;border-radius:50%;overflow:hidden;border:1.5px solid var(--border-bright);flex-shrink:0}
.hq-logo img{width:100%;height:100%;object-fit:cover}
.hq-brand{flex:1}
.hq-brand-name{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--acid);letter-spacing:1px;line-height:1}
.hq-brand-sub{font-family:var(--font-mono);font-size:10px;color:var(--ink-muted);letter-spacing:2px;text-transform:uppercase;margin-top:3px}
.hq-badge{font-family:var(--font-mono);font-size:10px;color:var(--acid);border:1px solid var(--border-bright);border-radius:3px;padding:2px 6px;letter-spacing:1px;white-space:nowrap}
/* SYMPTOMS */
.symptom-prompt{padding:18px 18px 6px;font-family:var(--font-display);font-size:19px;font-weight:600;color:var(--ink)}
.symptom-prompt span{color:var(--acid)}
.symptom-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px 18px 6px}
.symptom-btn{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:12px 10px;display:flex;align-items:center;gap:8px;cursor:pointer;transition:all .12s;text-align:left;width:100%}
.symptom-btn:active,.symptom-btn:hover{border-color:var(--border-bright);background:rgba(163,230,53,0.06)}
.symptom-btn.selected{border-color:var(--acid);background:rgba(163,230,53,0.1)}
.sym-icon{font-size:24px;flex-shrink:0;width:32px;text-align:center}
.sym-label{font-size:13px;font-weight:700;color:var(--ink);line-height:1.2}
.sym-sub{font-size:10px;color:var(--ink-muted);font-family:var(--font-mono);margin-top:2px;letter-spacing:.5px}
.symptom-all-good{width:calc(100% - 36px);margin:4px 18px 6px;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:10px 14px;cursor:pointer;display:flex;align-items:center;gap:10px;transition:all .12s}
.symptom-all-good:hover{border-color:var(--border-bright)}
.symptom-all-good.selected{border-color:var(--acid);background:rgba(163,230,53,0.1)}
.launch-btn{display:block;width:calc(100% - 36px);margin:6px 18px 14px;padding:13px;background:var(--acid);color:#04100a;border:none;border-radius:10px;font-family:var(--font-display);font-size:18px;font-weight:700;letter-spacing:1px;cursor:pointer;transition:all .12s;opacity:.35;pointer-events:none}
.launch-btn.ready{opacity:1;pointer-events:auto}
.launch-btn.ready:active{transform:scale(.97)}
/* VOODOO */
.voodoo-strip{display:flex;align-items:center;gap:10px;padding:10px 18px;border-top:1px solid var(--border);background:rgba(4,16,10,0.5)}
.voodoo-mini{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--border-bright);background:var(--panel);display:flex;align-items:center;justify-content:center;font-size:22px;transition:all .3s;flex-shrink:0}
.voodoo-status{flex:1;min-width:0}
.voodoo-name{font-family:var(--font-mono);font-size:10px;color:var(--acid);letter-spacing:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.voodoo-health-bar{height:3px;background:rgba(163,230,53,0.12);border-radius:2px;margin-top:4px;overflow:hidden}
.voodoo-health-fill{height:100%;background:var(--acid);border-radius:2px;transition:width .5s ease}
.voodoo-state-label{font-size:10px;color:var(--ink-muted);font-family:var(--font-mono);margin-top:3px;letter-spacing:.5px}
/* BRIEFING */
#screen-briefing{justify-content:center;align-items:center;padding:20px}
.briefing-card{background:var(--panel);border:1px solid var(--border-bright);border-radius:16px;padding:22px;max-width:400px;width:100%}
.briefing-dept{font-family:var(--font-mono);font-size:10px;color:var(--acid);letter-spacing:3px;text-transform:uppercase;margin-bottom:8px}
.briefing-title{font-family:var(--font-display);font-size:26px;font-weight:700;color:var(--ink);margin-bottom:3px;line-height:1.1}
.briefing-game{font-family:var(--font-mono);font-size:10px;/* was var(--acid-dim) = 4.28:1 on panel, just under WCAG AA 4.5. ink-muted is 5.76:1 and matches every other eyebrow label. */color:var(--ink-muted);margin-bottom:14px;letter-spacing:1px}
.briefing-body{font-size:14px;line-height:1.75;color:var(--ink-soft);margin-bottom:16px}
.briefing-body strong{color:var(--acid);font-weight:700}
.briefing-fact{background:rgba(163,230,53,0.05);border-left:2px solid var(--acid);padding:10px 12px;border-radius:0 8px 8px 0;font-family:var(--font-mono);font-size:10px;color:var(--ink-muted);margin-bottom:18px;line-height:1.6}
.briefing-go{width:100%;padding:13px;background:var(--acid);color:#04100a;border:none;border-radius:10px;font-family:var(--font-display);font-size:19px;font-weight:700;letter-spacing:2px;cursor:pointer}
.briefing-go:active{transform:scale(.97)}
/* GAME */
#screen-game{position:relative;overflow:hidden;padding:0}
.game-header{display:flex;align-items:center;justify-content:space-between;padding:9px 14px 5px;position:relative;z-index:10;background:rgba(4,16,10,0.85);border-bottom:1px solid var(--border)}
.game-title{font-family:var(--font-display);font-size:14px;font-weight:600;color:var(--acid);letter-spacing:2px}
.game-exit{background:transparent;border:1px solid var(--border);color:var(--ink-muted);font-family:var(--font-mono);font-size:10px;padding:4px 8px;border-radius:4px;cursor:pointer}
.counters{display:flex;gap:5px;padding:6px 12px;flex-wrap:wrap;position:relative;z-index:10;background:rgba(4,16,10,0.6)}
.germ-counter{display:flex;align-items:center;gap:3px;font-family:var(--font-mono);font-size:10px;font-weight:500;padding:3px 7px;border-radius:20px;background:rgba(0,0,0,0.4);border:1px solid currentColor;transition:all .3s}
.germ-counter.complete{opacity:.5}
.germ-counter[data-germ="rhino"]{color:var(--germ-rhino)}
.germ-counter[data-germ="flu"]{color:var(--germ-flu)}
.germ-counter[data-germ="bacteria"]{color:var(--germ-bacteria)}
.germ-counter[data-germ="mucus"]{color:var(--germ-mucus)}
.germ-counter[data-germ="toxin"]{color:var(--germ-toxin)}
.arena{flex:1;position:relative;overflow:hidden;min-height:300px}
.germ{position:absolute;top:-60px;cursor:pointer;pointer-events:auto;animation:fall linear forwards;transform-origin:center;filter:drop-shadow(0 0 8px currentColor)}
.germ[data-germ="rhino"]{color:var(--germ-rhino);width:42px;height:42px}
.germ[data-germ="flu"]{color:var(--germ-flu);width:40px;height:40px}
.germ[data-germ="bacteria"]{color:var(--germ-bacteria);width:38px;height:38px}
.germ[data-germ="mucus"]{color:var(--germ-mucus);width:44px;height:44px}
.germ[data-germ="toxin"]{color:var(--germ-toxin);width:40px;height:40px}
.germ.boss{width:72px!important;height:72px!important;filter:drop-shadow(0 0 16px currentColor) drop-shadow(0 0 6px white)}
.germ.friendly{color:#c7f7d4;width:38px;height:38px;filter:drop-shadow(0 0 8px rgba(200,247,212,0.6))}
.germ.caught{animation:caught .4s forwards;pointer-events:none}
.bonus-float,.penalty-float{position:absolute;font-family:var(--font-display);font-weight:700;pointer-events:none;animation:float-up 1.1s forwards;z-index:20}
.bonus-float{font-size:18px;color:var(--acid)}
.penalty-float{font-size:14px;color:var(--danger)}
@keyframes fall{from{top:-70px}to{top:calc(100% + 70px)}}
@keyframes caught{0%{opacity:1;transform:scale(1)}55%{opacity:.7;transform:scale(1.6)}100%{opacity:0;transform:scale(.1)}}
@keyframes float-up{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-55px)}}
.voodoo-corner{position:absolute;top:4px;right:4px;padding:4px;z-index:10;text-align:center;pointer-events:none}
.voodoo-in-game{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--border-bright);background:rgba(4,16,10,0.7);display:flex;align-items:center;justify-content:center;font-size:26px;transition:all .4s;margin:0 auto 2px}
.voodoo-in-game-label{font-family:var(--font-mono);font-size:10px;color:var(--ink-muted);letter-spacing:.5px}
/* WIN */
#screen-win{justify-content:center;align-items:center;padding:20px}
.win-card{background:var(--panel);border:1px solid var(--border-bright);border-radius:20px;padding:26px 22px;max-width:380px;width:100%;text-align:center}
.win-icon{font-size:60px;margin-bottom:10px;display:block;animation:win-pulse 1s ease-in-out infinite}
@keyframes win-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
.win-title{font-family:var(--font-display);font-size:30px;font-weight:700;color:var(--acid);margin-bottom:3px}
.win-subtitle{font-family:var(--font-mono);font-size:10px;color:var(--ink-muted);letter-spacing:2px;margin-bottom:14px}
.win-science{background:rgba(163,230,53,0.05);border:1px solid var(--border);border-radius:10px;padding:14px;font-size:13px;line-height:1.75;color:var(--ink-soft);margin-bottom:18px;text-align:left}
.win-science strong{color:var(--acid)}
.win-actions{display:flex;flex-direction:column;gap:7px}
.win-btn-primary{padding:13px;background:var(--acid);color:#04100a;border:none;border-radius:10px;font-family:var(--font-display);font-size:17px;font-weight:700;letter-spacing:1px;cursor:pointer}
.win-btn-secondary{padding:11px;background:transparent;color:var(--ink-soft);border:1px solid var(--border);border-radius:10px;font-family:var(--font-mono);font-size:11px;cursor:pointer}
/* IQ TEST */
#screen-iq{justify-content:flex-start;align-items:stretch;overflow-y:auto}
.iq-header{padding:18px 18px 10px;border-bottom:1px solid var(--border);text-align:center}
.iq-dept{font-family:var(--font-mono);font-size:10px;color:var(--acid);letter-spacing:3px;text-transform:uppercase;margin-bottom:6px}
.iq-title{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--ink)}
.iq-sub{font-size:12px;color:var(--ink-muted);margin-top:3px}
.iq-progress{height:3px;background:var(--border);margin:0 18px}
.iq-progress-fill{height:100%;background:var(--acid);border-radius:2px;transition:width .4s ease}
.iq-body{flex:1;padding:18px;display:flex;flex-direction:column}
.iq-q-num{font-family:var(--font-mono);font-size:10px;color:var(--acid);letter-spacing:2px;margin-bottom:7px}
.iq-question{font-family:var(--font-display);font-size:19px;font-weight:600;color:var(--ink);margin-bottom:4px;line-height:1.3}
.iq-hint{font-size:13px;color:var(--ink-soft);margin-bottom:18px;font-family:var(--font-mono)}
.iq-options{display:flex;flex-direction:column;gap:7px}
.iq-opt{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:13px 14px;cursor:pointer;font-size:15px;font-weight:600;color:var(--ink);text-align:left;transition:all .12s;width:100%}
.iq-opt:hover{border-color:var(--border-bright)}
.iq-opt.selected{border-color:var(--acid);background:rgba(163,230,53,0.07)}
.iq-opt.correct{border-color:var(--acid);background:rgba(163,230,53,0.14);color:var(--acid)}
.iq-opt.wrong{border-color:var(--danger);background:rgba(239,68,68,0.07);color:var(--danger)}
.iq-timer{font-family:var(--font-mono);font-size:22px;font-weight:500;color:var(--acid);text-align:center;padding:8px 0}
.iq-next{width:100%;padding:12px;background:var(--acid);color:#04100a;border:none;border-radius:10px;font-family:var(--font-display);font-size:17px;font-weight:700;letter-spacing:1px;cursor:pointer;margin-top:10px;opacity:.35;pointer-events:none}
.iq-next.ready{opacity:1;pointer-events:auto}
/* IQ RESULT */
#screen-iq-result{justify-content:center;align-items:center;padding:24px}
.result-card{background:var(--panel);border:1px solid var(--border-bright);border-radius:20px;padding:26px 22px;max-width:360px;width:100%;text-align:center}
.result-clearance{font-family:var(--font-mono);font-size:10px;color:var(--acid);letter-spacing:4px;text-transform:uppercase;margin-bottom:4px}
.result-level{font-family:var(--font-display);font-size:38px;font-weight:700;color:var(--acid);margin-bottom:6px;line-height:1}
.result-score{font-family:var(--font-mono);font-size:12px;color:var(--ink-muted);margin-bottom:14px}
.result-desc{font-size:14px;line-height:1.7;color:var(--ink-soft);margin-bottom:18px}
.result-proceed{width:100%;padding:13px;background:var(--acid);color:#04100a;border:none;border-radius:10px;font-family:var(--font-display);font-size:17px;font-weight:700;letter-spacing:1px;cursor:pointer}
/* ENLISTMENT */
#screen-enlist{justify-content:flex-start;align-items:stretch;overflow-y:auto}
.enlist-hero{padding:24px 18px 18px;text-align:center;border-bottom:1px solid var(--border)}
.enlist-logo{width:72px;height:72px;border-radius:50%;overflow:hidden;border:2px solid var(--border-bright);margin:0 auto 10px}
.enlist-logo img{width:100%;height:100%;object-fit:cover}
.enlist-from{font-family:var(--font-mono);font-size:10px;color:var(--acid);letter-spacing:3px;text-transform:uppercase;margin-bottom:6px}
.enlist-name{font-family:var(--font-display);font-size:26px;font-weight:700;color:var(--ink);margin-bottom:2px}
.enlist-title-sm{font-size:11px;color:var(--ink-muted);font-family:var(--font-mono)}
.enlist-speech{padding:18px;font-size:14px;line-height:1.8;color:var(--ink-soft)}
.enlist-speech p{margin-bottom:11px}
.enlist-speech strong{color:var(--acid);font-weight:700}
.enlist-offer{margin:0 18px 14px;background:rgba(163,230,53,0.04);border:1px solid var(--border-bright);border-radius:12px;padding:18px}
.enlist-offer-title{font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--acid);margin-bottom:8px}
.enlist-offer-body{font-size:13px;line-height:1.75;color:var(--ink-soft)}
.enlist-actions{padding:0 18px 24px;display:flex;flex-direction:column;gap:7px}
.enlist-accept{padding:14px;background:var(--acid);color:#04100a;border:none;border-radius:10px;font-family:var(--font-display);font-size:19px;font-weight:700;letter-spacing:2px;cursor:pointer}
.enlist-decline{padding:11px;background:transparent;color:var(--ink-muted);border:1px solid var(--border);border-radius:10px;font-family:var(--font-mono);font-size:10px;cursor:pointer}
/* BADGE */
#screen-badge{justify-content:center;align-items:center;padding:22px}
.badge-wrap{background:var(--panel);border:2px solid var(--acid);border-radius:20px;padding:24px 20px;max-width:360px;width:100%;text-align:center;position:relative;overflow:hidden}
.badge-wrap::before{content:'HOWLIE LABS · TOP SECRET';position:absolute;top:0;left:0;right:0;font-family:var(--font-mono);font-size:10px;color:rgba(163,230,53,0.4);background:rgba(163,230,53,0.06);padding:4px;letter-spacing:3px;text-align:center}
.badge-logo{width:60px;height:60px;border-radius:50%;overflow:hidden;border:2px solid var(--border-bright);margin:12px auto 10px}
.badge-logo img{width:100%;height:100%;object-fit:cover}
.badge-org{font-family:var(--font-mono);font-size:10px;color:var(--acid);letter-spacing:3px;text-transform:uppercase;margin-bottom:3px}
.badge-role{font-family:var(--font-display);font-size:17px;font-weight:600;color:var(--ink);margin-bottom:2px}
.badge-name-display{font-family:var(--font-display);font-size:26px;font-weight:700;color:var(--acid);margin-bottom:4px}
.badge-dept-sm{font-size:10px;color:var(--ink-muted);margin-bottom:14px;font-family:var(--font-mono)}
.badge-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:18px;text-align:left}
.badge-field{background:rgba(4,16,10,0.8);border:1px solid var(--border);border-radius:6px;padding:7px 9px}
.badge-field-label{font-family:var(--font-mono);font-size:10px;color:var(--ink-muted);letter-spacing:2px;text-transform:uppercase;margin-bottom:2px}
.badge-field-value{font-family:var(--font-mono);font-size:11px;color:var(--acid);font-weight:500}
.badge-proceed{width:100%;padding:12px;background:var(--acid);color:#04100a;border:none;border-radius:10px;font-family:var(--font-display);font-size:17px;font-weight:700;letter-spacing:1px;cursor:pointer}

/* ============ FEVER FIGHTER ============ */
#screen-fever{position:relative;overflow:hidden;padding:0;background:var(--void)}
.ff-header{display:flex;align-items:center;justify-content:space-between;padding:9px 14px 5px;z-index:10;background:rgba(4,16,10,0.85);border-bottom:1px solid var(--border);position:relative}
.ff-layout{display:flex;flex:1;overflow:hidden}
.ff-thermo-wrap{width:60px;display:flex;flex-direction:column;align-items:center;padding:12px 0;background:rgba(4,16,10,0.6);border-right:1px solid var(--border);position:relative;flex-shrink:0}
.ff-thermo-label{font-family:var(--font-mono);font-size:10px;color:var(--ink-muted);letter-spacing:1px;writing-mode:vertical-rl;text-orientation:mixed;transform:rotate(180deg);margin-bottom:8px}
.ff-thermo-tube{width:20px;flex:1;border-radius:10px;background:rgba(255,255,255,0.08);border:1.5px solid rgba(255,255,255,0.15);position:relative;overflow:hidden;margin:0 auto}
.ff-thermo-fill{position:absolute;bottom:0;left:0;right:0;transition:height .3s ease;border-radius:8px}
.ff-safe-zone{position:absolute;left:-2px;right:-2px;background:rgba(163,230,53,0.15);border-top:1px solid var(--acid);border-bottom:1px solid var(--acid)}
.ff-thermo-bulb{width:28px;height:28px;border-radius:50%;margin-top:6px;border:2px solid rgba(255,255,255,0.15);transition:background .3s}
.ff-temp-label{font-family:var(--font-mono);font-size:10px;margin-top:6px;font-weight:500}
.ff-arena{flex:1;position:relative;overflow:hidden}
.ff-obj{position:absolute;top:-60px;cursor:pointer;pointer-events:auto;animation:fall linear forwards;text-align:center;font-size:36px;filter:drop-shadow(0 0 8px currentColor);user-select:none;-webkit-user-select:none}
.ff-obj.ice{color:var(--cold)}
.ff-obj.fire{color:#f97316;filter:drop-shadow(0 0 10px #f97316)}
.ff-obj.caught{animation:caught .4s forwards;pointer-events:none}
.ff-status{padding:6px 14px;font-family:var(--font-mono);font-size:10px;color:var(--ink-muted);border-bottom:1px solid var(--border);background:rgba(4,16,10,0.6);display:flex;gap:16px;align-items:center}
.ff-hold-bar{height:6px;flex:1;background:rgba(255,255,255,0.08);border-radius:3px;overflow:hidden}
.ff-hold-fill{height:100%;background:var(--acid);border-radius:3px;transition:width .3s ease}

/* ============ AIRWAY DEFENDER ============ */
#screen-airway{position:relative;overflow:hidden;padding:0}
.ad-header{display:flex;align-items:center;justify-content:space-between;padding:9px 14px 5px;z-index:10;background:rgba(4,16,10,0.85);border-bottom:1px solid var(--border)}
.ad-arena{flex:1;position:relative;overflow:hidden;background:linear-gradient(180deg,rgba(4,16,10,1) 0%,rgba(10,28,40,1) 100%)}
.ad-target{position:absolute;left:0;top:50%;transform:translateY(-50%);width:44px;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;background:rgba(4,16,10,0.8);border-right:1px solid var(--border-bright)}
.ad-target-icon{font-size:28px}
.ad-target-label{font-family:var(--font-mono);font-size:10px;color:var(--acid);letter-spacing:1px;writing-mode:vertical-rl;transform:rotate(180deg)}
.ad-germ{position:absolute;cursor:pointer;pointer-events:auto;animation:slide-left linear forwards;text-align:center;filter:drop-shadow(0 0 8px currentColor)}
.ad-germ svg{width:100%;height:100%}
@keyframes slide-left{from{left:110%}to{left:-80px}}
.ad-germ.caught{animation:caught .4s forwards;pointer-events:none}
.ad-health{display:flex;gap:8px;align-items:center;padding:6px 14px;border-bottom:1px solid var(--border);background:rgba(4,16,10,0.6)}
.ad-health-bar{flex:1;height:8px;background:rgba(255,255,255,0.08);border-radius:4px;overflow:hidden}
.ad-health-fill{height:100%;background:var(--acid);border-radius:4px;transition:width .4s ease}
.ad-health-label{font-family:var(--font-mono);font-size:10px;color:var(--ink-muted);white-space:nowrap}

/* ============ ENERGY CORE ============ */
#screen-energy{position:relative;overflow:hidden;padding:0}
.ec-header{display:flex;align-items:center;justify-content:space-between;padding:9px 14px 5px;z-index:10;background:rgba(4,16,10,0.85);border-bottom:1px solid var(--border)}
.ec-arena{flex:1;position:relative;overflow:hidden;background:radial-gradient(ellipse at center,rgba(56,189,248,0.04) 0%,var(--void) 70%)}
.ec-progress{padding:6px 14px;border-bottom:1px solid var(--border);background:rgba(4,16,10,0.6);font-family:var(--font-mono);font-size:10px;color:var(--ink-muted);display:flex;align-items:center;gap:10px}
.ec-prog-bar{flex:1;height:6px;background:rgba(255,255,255,0.08);border-radius:3px;overflow:hidden}
.ec-prog-fill{height:100%;background:var(--cold);border-radius:3px;transition:width .5s ease}
.mito{position:absolute;cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;animation:mito-float ease-in-out infinite;transition:box-shadow .2s,transform .1s}
.mito:active{transform:scale(.92)}
.mito-inner{width:100%;height:100%;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.mito-fill{position:absolute;bottom:0;left:0;right:0;background:rgba(56,189,248,0.35);transition:height .15s ease;border-radius:0 0 50% 50%}
.mito-icon{font-size:18px;position:relative;z-index:1}
.mito-label{font-family:var(--font-mono);font-size:10px;color:rgba(255,255,255,0.5);margin-top:2px;letter-spacing:.5px;position:relative;z-index:1}
.mito.charged{animation:none;box-shadow:0 0 20px var(--cold),0 0 40px rgba(56,189,248,0.4)}
.mito.exploding{animation:mito-pop .5s forwards;pointer-events:none}
@keyframes mito-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes mito-pop{0%{opacity:1;transform:scale(1)}60%{opacity:.8;transform:scale(1.4)}100%{opacity:0;transform:scale(.1)}}

/* ============ THROAT SHIELD ============ */
#screen-throat{position:relative;overflow:hidden;padding:0}
.ts-header{display:flex;align-items:center;justify-content:space-between;padding:9px 14px 5px;z-index:10;background:rgba(4,16,10,0.85);border-bottom:1px solid var(--border)}
.ts-arena{flex:1;position:relative;overflow:hidden;background:linear-gradient(180deg,var(--void) 0%,rgba(40,8,20,0.6) 100%)}
.ts-threat-zone{position:absolute;bottom:0;left:0;right:0;height:60px;background:linear-gradient(180deg,transparent,rgba(185,28,28,0.15));border-top:1px solid rgba(239,68,68,0.2);display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:10px;color:rgba(239,68,68,0.5);letter-spacing:2px}
.ts-germ{position:absolute;cursor:pointer;pointer-events:auto;animation:fall-slow linear forwards;text-align:center;filter:drop-shadow(0 0 8px currentColor)}
.ts-germ svg{width:100%;height:100%}
@keyframes fall-slow{from{top:-60px}to{top:calc(100% + 10px)}}
.ts-germ.shielded{animation:ts-shield-fade .6s forwards;pointer-events:none}
.ts-germ.reached{pointer-events:none}
@keyframes ts-shield-fade{0%{opacity:1;filter:drop-shadow(0 0 20px var(--cold))}100%{opacity:0;transform:scale(.3)}}
.ts-shield-bar{display:flex;gap:8px;align-items:center;padding:6px 14px;border-bottom:1px solid var(--border);background:rgba(4,16,10,0.6)}
.ts-shield-label{font-family:var(--font-mono);font-size:10px;color:var(--cold)}
.ts-shield-fill-wrap{flex:1;height:8px;background:rgba(255,255,255,0.08);border-radius:4px;overflow:hidden}
.ts-shield-fill{height:100%;background:var(--cold);border-radius:4px;transition:width .4s ease}

/* ============ SHARED GAME ADDITIONS ============ */
.game-exit{background:transparent;border:1px solid var(--border);color:var(--ink-muted);font-family:var(--font-mono);font-size:10px;padding:4px 8px;border-radius:4px;cursor:pointer}
@keyframes screen-flash-good{0%,100%{background:inherit}50%{background:rgba(163,230,53,0.08)}}
@keyframes screen-flash-bad{0%,100%{background:inherit}50%{background:rgba(239,68,68,0.1)}}
.flash-good{animation:screen-flash-good .3s}
.flash-bad{animation:screen-flash-bad .3s}

/* ============ DR. HOWLIE COMMENTARY ============ */
.howlie-bubble-wrap{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);z-index:100;pointer-events:none;width:min(340px,90vw);animation:bubble-in .3s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes bubble-in{from{opacity:0;transform:translateX(-50%) translateY(20px) scale(.9)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
.howlie-bubble{background:rgba(7,26,12,0.96);border:1px solid var(--border-bright);border-radius:16px;padding:12px 14px 12px 56px;position:relative;box-shadow:0 8px 32px rgba(0,0,0,0.5)}
.howlie-bubble-avatar{position:absolute;left:-2px;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;border:1.5px solid var(--border-bright);background:var(--void);display:flex;align-items:center;justify-content:center;font-size:26px;overflow:hidden}
.howlie-bubble-avatar img{width:100%;height:100%;object-fit:cover}
.howlie-bubble-name{font-family:var(--font-mono);font-size:10px;color:var(--acid);letter-spacing:2px;margin-bottom:4px}
.howlie-bubble-text{font-size:13px;line-height:1.55;color:var(--ink-soft)}
.howlie-bubble-text strong{color:var(--acid)}

/* ============ PARTICLE SYSTEM ============ */
.particle{position:fixed;pointer-events:none;border-radius:50%;z-index:200;animation:particle-burst .7s forwards}
@keyframes particle-burst{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(0) translate(var(--px),var(--py))}}

/* ============ SOUND TOGGLE ============ */
.sound-btn{position:fixed;top:12px;right:12px;z-index:50;background:var(--panel);border:1px solid var(--border);border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;transition:all .15s}
.sound-btn:hover{border-color:var(--border-bright)}

/* DOLL SVG in voodoo containers */
.voodoo-mini svg,.voodoo-in-game svg{width:100%;height:100%;display:block}
.voodoo-mini{overflow:hidden;padding:2px}
.voodoo-in-game{overflow:hidden;padding:2px}

/* MILESTONE POPUP */
@keyframes milestone-pop{from{opacity:0;transform:translate(-50%,-50%) scale(.7)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes wolf-howl{0%,100%{transform:rotate(0deg)}25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}

/* CUSTOMIZE SCREEN */
#screen-customize{overflow-y:auto}
.cust-header{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;border-bottom:1px solid var(--border);background:rgba(4,16,10,0.9);position:sticky;top:0;z-index:10}
.cust-title{font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--acid);letter-spacing:1px}
.cust-save{padding:8px 16px;background:var(--acid);color:#04100a;border:none;border-radius:8px;font-family:var(--font-display);font-size:14px;font-weight:700;cursor:pointer;letter-spacing:1px}
.cust-preview-wrap{display:flex;flex-direction:column;align-items:center;padding:20px;gap:12px}
.cust-doll-large{width:120px;height:140px}
.cust-state-row{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.cust-state-btn{font-family:var(--font-mono);font-size:10px;padding:4px 8px;border:1px solid var(--border);border-radius:4px;color:var(--ink-muted);background:transparent;cursor:pointer;letter-spacing:.5px}
.cust-state-btn.active{border-color:var(--acid);color:var(--acid)}
.cust-section{padding:14px 18px;border-bottom:1px solid var(--border)}
.cust-label{font-family:var(--font-mono);font-size:10px;color:var(--acid);letter-spacing:3px;text-transform:uppercase;margin-bottom:10px}
.swatch-row{display:flex;gap:8px;flex-wrap:wrap}
.swatch{width:36px;height:36px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:all .12s;position:relative;flex-shrink:0}
.swatch.active{border-color:var(--acid);transform:scale(1.12)}
.swatch.locked{opacity:.35;cursor:not-allowed}
.swatch .lock-icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12px}
.style-row{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.style-btn{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:8px 4px;cursor:pointer;text-align:center;transition:all .12s}
.style-btn.active{border-color:var(--acid);background:rgba(163,230,53,0.08)}
.style-btn-preview{width:32px;height:32px;margin:0 auto 3px}
.style-btn-label{font-family:var(--font-mono);font-size:10px;color:var(--ink-muted);letter-spacing:.5px}
.accessory-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.acc-card{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:12px;display:flex;align-items:center;gap:10px;cursor:pointer;transition:all .12s;position:relative}
.acc-card.active{border-color:var(--acid);background:rgba(163,230,53,0.06)}
.acc-card.locked{opacity:.4;cursor:not-allowed}
.acc-card-icon{font-size:24px;flex-shrink:0}
.acc-card-name{font-size:12px;font-weight:700;color:var(--ink)}
.acc-card-sub{font-size:10px;color:var(--ink-muted);font-family:var(--font-mono);margin-top:1px}
.acc-toggle{margin-left:auto;width:18px;height:18px;border-radius:50%;border:1.5px solid var(--border-bright);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.acc-toggle.on{background:var(--acid);border-color:var(--acid)}
.hq-customize-btn{margin:4px 18px 8px;width:calc(100% - 36px);padding:10px;background:transparent;border:1px solid var(--border);border-radius:8px;font-family:var(--font-mono);font-size:10px;color:var(--ink-muted);cursor:pointer;letter-spacing:1px;transition:all .12s}
.hq-customize-btn:hover{border-color:var(--border-bright);color:var(--acid)}

/* ── STREAK WIDGET IN HQ ── */
.hq-streak-row{display:flex;align-items:center;gap:10px;padding:8px 18px 4px;border-bottom:1px solid var(--border)}
.streak-flame{font-size:20px}
.streak-info{flex:1}
.streak-count{font-family:var(--font-display);font-size:16px;font-weight:700;color:var(--warn);line-height:1}
.streak-label{font-family:var(--font-mono);font-size:10px;color:var(--ink-muted);letter-spacing:1px}
.notes-pill{font-family:var(--font-mono);font-size:10px;color:var(--acid);border:1px solid var(--border-bright);border-radius:10px;padding:3px 8px;cursor:pointer}
.notes-pill:hover{background:rgba(163,230,53,0.08)}

/* ── WELCOME BACK BANNER ── */
.welcome-banner{margin:8px 18px 4px;background:rgba(163,230,53,0.06);border:1px solid var(--border-bright);border-radius:10px;padding:10px 14px;display:flex;align-items:center;gap:10px}
.welcome-banner-text{font-size:13px;color:var(--ink-soft);line-height:1.5}
.welcome-banner-close{margin-left:auto;cursor:pointer;color:var(--ink-muted);font-size:16px;flex-shrink:0;padding:2px}

/* ── PROGRESS SCREEN ── */
#screen-progress{overflow-y:auto}
.prog-header{padding:12px 18px;border-bottom:1px solid var(--border);background:rgba(4,16,10,0.9);position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between}
.prog-title{font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--acid);letter-spacing:1px}
.prog-back{font-family:var(--font-mono);font-size:10px;color:var(--ink-muted);border:1px solid var(--border);padding:4px 10px;border-radius:4px;cursor:pointer}
.prog-doll-row{display:flex;align-items:center;gap:14px;padding:16px 18px;border-bottom:1px solid var(--border)}
.prog-doll{width:64px;height:76px;flex-shrink:0}
.prog-doll-info{flex:1}
.prog-agent{font-family:var(--font-display);font-size:16px;font-weight:700;color:var(--ink)}
.prog-clearance{font-family:var(--font-mono);font-size:10px;color:var(--acid);letter-spacing:2px;margin-top:2px}
.prog-domain{font-family:var(--font-mono);font-size:10px;color:var(--ink-muted);margin-top:4px}
.metrics-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:14px 18px;border-bottom:1px solid var(--border)}
.metric-card{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:12px}
.metric-val{font-family:var(--font-display);font-size:28px;font-weight:700;color:var(--acid);line-height:1}
.metric-label{font-family:var(--font-mono);font-size:10px;color:var(--ink-muted);letter-spacing:1.5px;margin-top:4px;text-transform:uppercase}
.milestone-progress{padding:14px 18px;border-bottom:1px solid var(--border)}
.ms-title{font-family:var(--font-mono);font-size:10px;color:var(--acid);letter-spacing:3px;text-transform:uppercase;margin-bottom:10px}
.ms-row{display:flex;align-items:center;gap:10px;padding:6px 0;border-bottom:0.5px solid var(--border)}
.ms-row:last-child{border:none}
.ms-icon{font-size:18px;flex-shrink:0;width:28px;text-align:center}
.ms-info{flex:1}
.ms-name{font-size:12px;font-weight:700;color:var(--ink)}
.ms-sub{font-size:10px;color:var(--ink-muted);font-family:var(--font-mono);margin-top:1px}
.ms-badge{font-family:var(--font-mono);font-size:10px;padding:2px 7px;border-radius:3px}
.ms-done{background:var(--color-background-success,rgba(163,230,53,0.1));color:var(--acid)}
.ms-lock{background:rgba(255,255,255,0.05);color:var(--ink-muted)}
.prog-notes-btn{display:block;width:calc(100% - 36px);margin:14px 18px;padding:13px;background:transparent;border:1px solid var(--border-bright);border-radius:10px;font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--acid);cursor:pointer;letter-spacing:1px}

/* ── LAB NOTES SCREEN ── */
#screen-labnotes{overflow-y:auto}
.ln-header{padding:12px 18px;border-bottom:1px solid var(--border);background:rgba(4,16,10,0.9);position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between}
.ln-title{font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--acid);letter-spacing:1px}
.ln-count{font-family:var(--font-mono);font-size:10px;color:var(--ink-muted)}
.ln-back{font-family:var(--font-mono);font-size:10px;color:var(--ink-muted);border:1px solid var(--border);padding:4px 10px;border-radius:4px;cursor:pointer}
.ln-empty{padding:40px 18px;text-align:center;color:var(--ink-muted);font-family:var(--font-mono);font-size:12px;line-height:1.8}
.ln-list{padding:10px 18px 40px;display:flex;flex-direction:column;gap:10px}
.ln-card{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:14px}
.ln-card-top{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.ln-card-icon{font-size:20px;flex-shrink:0}
.ln-card-title{font-size:13px;font-weight:700;color:var(--ink);flex:1}
.ln-card-date{font-family:var(--font-mono);font-size:10px;color:var(--ink-muted)}
.ln-card-text{font-size:13px;line-height:1.7;color:var(--ink-soft)}
.ln-card-cat{font-family:var(--font-mono);font-size:10px;color:var(--acid);letter-spacing:2px;margin-top:7px;opacity:.7}
.ln-new-badge{background:rgba(163,230,53,0.12);color:var(--acid);font-family:var(--font-mono);font-size:10px;padding:2px 6px;border-radius:3px;margin-left:6px}

/* ── NOTE COLLECTED TOAST ── */
.ln-toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--panel);border:1px solid var(--border-bright);border-radius:10px;padding:10px 16px;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--ink-soft);z-index:500;animation:toast-in .3s ease;white-space:nowrap;box-shadow:0 4px 20px rgba(0,0,0,0.4)}
@keyframes toast-in{from{opacity:0;transform:translateX(-50%) translateY(16px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}

/* ── GUT SQUAD ── */
#screen-gutquad{position:relative;overflow:hidden;padding:0}
.gq-header{display:flex;align-items:center;justify-content:space-between;padding:9px 14px 5px;z-index:10;background:rgba(4,16,10,0.85);border-bottom:1px solid var(--border)}
.gq-title{font-family:var(--font-display);font-size:14px;font-weight:600;color:var(--acid);letter-spacing:2px}
.gq-gut-bar{display:flex;gap:8px;align-items:center;padding:6px 14px;border-bottom:1px solid var(--border);background:rgba(4,16,10,0.6)}
.gq-gut-label{font-family:var(--font-mono);font-size:10px;color:var(--acid)}
.gq-gut-wrap{flex:1;height:7px;background:rgba(255,255,255,0.08);border-radius:4px;overflow:hidden}
.gq-gut-fill{height:100%;background:var(--acid);border-radius:4px;transition:width .4s ease}
.gq-score-lbl{font-family:var(--font-mono);font-size:10px;color:var(--ink-muted)}
.gq-arena{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:20px 18px;position:relative}
.gq-item-card{background:var(--panel);border:1px solid var(--border-bright);border-radius:16px;padding:20px 16px;width:100%;max-width:320px;text-align:center;transition:transform .12s}
.gq-item-emoji{font-size:54px;margin-bottom:8px;display:block}
.gq-item-name{font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--ink);margin-bottom:4px}
.gq-item-hint{font-size:12px;color:var(--ink-muted);font-family:var(--font-mono)}
.gq-buttons{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:320px}
.gq-btn-bad{padding:14px;background:rgba(239,68,68,0.1);border:1px solid rgba(239,68,68,0.4);border-radius:10px;font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--danger);cursor:pointer;transition:all .12s}
.gq-btn-good{padding:14px;background:rgba(163,230,53,0.1);border:1px solid var(--border-bright);border-radius:10px;font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--acid);cursor:pointer;transition:all .12s}
.gq-btn-bad:active{background:rgba(239,68,68,0.2);transform:scale(.96)}
.gq-btn-good:active{background:rgba(163,230,53,0.18);transform:scale(.96)}
.gq-result-flash{position:absolute;inset:0;pointer-events:none;border-radius:0;z-index:20;opacity:0;transition:opacity .15s}
.gq-progress-txt{font-family:var(--font-mono);font-size:10px;color:var(--ink-muted)}

/* ── SCREEN TRANSITIONS ── */
.screen.active{animation:screen-in .22s ease}
@keyframes screen-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* ── GAME COUNTDOWN OVERLAY ── */
.countdown-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:50;background:rgba(4,16,10,0.92);font-family:var(--font-display);font-size:88px;font-weight:700;color:var(--acid);letter-spacing:4px;animation:countdown-pulse .5s ease}
@keyframes countdown-pulse{from{transform:scale(1.3);opacity:.5}to{transform:scale(1);opacity:1}}

/* ── IQ TIMER URGENCY ── */
.iq-timer.urgent{color:var(--danger);animation:timer-pulse .5s ease-in-out infinite}
@keyframes timer-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

/* ── WIN SCREEN UPGRADE ── */
.win-confetti{position:fixed;pointer-events:none;z-index:200;animation:confetti-fall linear forwards}
@keyframes confetti-fall{0%{opacity:1;transform:translateY(-20px) rotate(0deg)}100%{opacity:0;transform:translateY(100vh) rotate(720deg)}}

/* ── MOBILE SAFE AREA ── */
.hq-header{padding-top:max(14px,env(safe-area-inset-top))}
.voodoo-strip{padding-bottom:max(10px,env(safe-area-inset-bottom))}
.enlist-actions,.badge-wrap{padding-bottom:max(24px,env(safe-area-inset-bottom))}

/* ── BUTTON PRESS FEEL ── */
.symptom-btn:active,.symptom-all-good:active,.launch-btn:active,.briefing-go:active{transform:scale(.97)}
.iq-opt:active{transform:scale(.98)}

/* ── OFFLINE BANNER ── */
.offline-bar{position:fixed;top:0;left:0;right:0;background:var(--danger);color:white;text-align:center;font-family:var(--font-mono);font-size:10px;padding:4px;z-index:1000;letter-spacing:2px;display:none}
.offline-bar.show{display:block}

/* ── LAUNCH BTN GLOW ── */
.launch-btn.ready{box-shadow:0 0 20px rgba(163,230,53,0.25)}

/* ── STREAK FLAME ANIMATION ── */
.streak-flame{animation:flame-bob 1.5s ease-in-out infinite}
@keyframes flame-bob{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}

/* ===== v1.1 APP SHELL / RESPONSIVE ===== */
.app-shell{max-width:520px;margin:0 auto;position:relative}
@media (min-width:768px){
  .app-shell{box-shadow:0 0 0 1px var(--border-bright),0 20px 70px rgba(0,0,0,0.55);min-height:100vh}
}
@media (min-width:1200px){
  .app-shell{margin:32px auto;min-height:calc(100vh - 64px);border-radius:20px}
}

/* ===== v1.1 LIQUID GLASS LAYER ===== */
.glass{background:var(--glass-bg);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(140%);backdrop-filter:blur(var(--glass-blur)) saturate(140%);border:1px solid var(--glass-stroke);box-shadow:var(--glass-shadow),inset 0 1px 0 var(--glass-hi)}

/* ===== v1.3 HQ GREETING + STATUS EFFECTS ENTRY ===== */
.hq-greeting{padding:14px 18px 2px;font-family:var(--font-display);font-size:17px;font-weight:600;color:var(--ink)}
.status-effects-entry{display:flex;align-items:center;gap:12px;margin:10px 18px 4px;padding:12px 14px;border-radius:12px;cursor:pointer;text-align:left;width:calc(100% - 36px);border:none;font:inherit}
.status-effects-entry:active{transform:scale(.98)}
.status-effects-icon{font-size:22px;line-height:1}
.status-effects-title{font-family:var(--font-mono);font-size:11px;letter-spacing:2px;color:var(--ink);font-weight:700}
.status-effects-caption{font-family:var(--font-mono);font-size:10px;letter-spacing:.5px;color:var(--ink-muted);margin-top:2px}

/* ===== v1.1 DEPARTMENT TEASER ROW (HQ) ===== */
.dept-row{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:10px 18px 4px}
.dept-card{border-radius:12px;padding:10px 3px 8px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;cursor:pointer;transition:all .12s;text-decoration:none}
.dept-card:active{transform:scale(.97)}
.dept-card.locked{cursor:not-allowed;opacity:.65}
.dept-card.dept-unlocked{border-color:var(--border-bright)}
.dept-icon{font-size:19px;line-height:1}
.dept-name{font-family:var(--font-mono);font-size:10px;letter-spacing:1px;color:var(--ink);font-weight:700}
.dept-card.locked .dept-name{color:var(--ink-muted)}
.dept-status{font-family:var(--font-mono);font-size:6.5px;letter-spacing:.5px;color:var(--acid);margin-top:1px;line-height:1.3}
.dept-card.locked .dept-status{color:var(--ink-muted)}
.dept-sub{font-family:var(--font-mono);font-size:6.5px;letter-spacing:.5px;color:var(--ink-muted);margin-top:1px;line-height:1.3}

/* ===== v1.1 WELCOME / SELECTION SCREEN ===== */
.welcome-pane{display:none;flex-direction:column;flex:1;padding:36px 24px;justify-content:center}
.welcome-pane.active{display:flex}
.welcome-eyebrow{font-family:var(--font-mono);font-size:10px;color:var(--acid);letter-spacing:3px;text-transform:uppercase;margin-bottom:12px}
.welcome-title{font-family:var(--font-display);font-size:30px;font-weight:700;color:var(--ink);letter-spacing:1px;line-height:1.15;margin-bottom:18px}
.welcome-body{font-size:15px;line-height:1.75;color:var(--ink-soft);margin-bottom:22px}
.welcome-body p{margin-bottom:10px}
.welcome-body p:last-child{margin-bottom:0}
.welcome-btn{width:100%;padding:13px;background:var(--acid);color:var(--void);border:none;border-radius:10px;font-family:var(--font-display);font-size:18px;font-weight:700;letter-spacing:1.5px;cursor:pointer}
.welcome-btn:active{transform:scale(.97)}
.welcome-btn:disabled{opacity:.35;pointer-events:none}
.name-input{width:100%;padding:13px 14px;margin-bottom:14px;background:var(--panel);border:1px solid var(--border);border-radius:10px;font-family:var(--font-body);font-size:16px;color:var(--ink)}
.name-input:focus{outline:none;border-color:var(--border-bright)}
.name-input::placeholder{color:var(--ink-muted)}
.welcome-link{display:inline-block;margin-top:16px;font-family:var(--font-mono);font-size:11px;color:var(--ink-muted);text-decoration:underline;cursor:pointer;letter-spacing:.5px;background:none;border:none;padding:0}
.welcome-tip{margin-top:12px;padding:12px 14px;border-radius:12px;font-size:13px;line-height:1.6;color:var(--ink-soft)}
.acct-helper{font-family:var(--font-mono);font-size:11px;color:var(--ink-muted);letter-spacing:.3px;margin:-8px 0 14px}
.acct-error{font-family:var(--font-mono);font-size:11px;color:var(--danger);letter-spacing:.3px;margin:-4px 0 14px}
.pack-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:10px}
.pack-card{border-radius:12px;padding:14px 8px;display:flex;flex-direction:column;align-items:center;gap:6px}
.pack-avatar{width:40px;height:40px;border-radius:50%;background:rgba(163,230,53,0.1);border:1px solid var(--border-bright);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--acid)}
.pack-role{font-family:var(--font-mono);font-size:10px;letter-spacing:1.5px;color:var(--ink-muted)}
.pack-caption{font-family:var(--font-mono);font-size:10px;color:var(--ink-muted);text-align:center;line-height:1.5;margin-bottom:4px}

/* ===== v1.1 BLEED FIX: voodoo preview only on its owning screen ===== */
#screen-hq:not(.active) #voodooPreview{display:none}

/* ── PERFORMANCE REVIEW / VERDICT / CONTEST (v1.2) ── */
.rv-exit{position:absolute;top:14px;right:14px;z-index:20;font-family:var(--font-mono);font-size:10px;color:var(--ink-muted);border:1px solid var(--border);padding:4px 10px;border-radius:4px;cursor:pointer;background:transparent;/* 32px failed the 44px touch floor on a phone. Back is the most-tapped control in the app and it was the smallest. */min-height:44px;display:inline-flex;align-items:center}
.rv-exit:active{transform:scale(.96)}
.rv-eyebrow{font-family:var(--font-mono);font-size:10px;color:var(--acid);letter-spacing:3px;text-transform:uppercase;margin-bottom:12px}
.rv-title{font-family:var(--font-display);font-size:27px;font-weight:700;color:var(--ink);letter-spacing:1px;line-height:1.15;margin-bottom:8px}
.rv-subtitle{font-family:var(--font-mono);font-size:11px;color:var(--ink-muted);letter-spacing:1px;line-height:1.6;margin-bottom:18px}
.rv-body{padding:40px 24px 24px;flex:1;display:flex;flex-direction:column;position:relative}
.rv-intro-copy{font-size:15px;line-height:1.75;color:var(--ink-soft);margin-bottom:24px}
.rv-intro-copy p{margin-bottom:10px}
.rv-intro-copy p:last-child{margin-bottom:0}
.rv-intro-copy em{color:var(--ink-muted);font-style:italic}
.rv-dots{display:flex;gap:6px;margin:0 0 4px}
.rv-dot{width:7px;height:7px;border-radius:50%;background:var(--border)}
.rv-dot.active{background:var(--acid)}
.rv-dot.done{background:var(--acid-dim)}
.rv-q-num{font-family:var(--font-mono);font-size:10px;color:var(--acid);letter-spacing:2px;margin:16px 0 8px}
.rv-question{font-family:var(--font-display);font-size:20px;font-weight:600;color:var(--ink);margin-bottom:18px;line-height:1.3}
.rv-options{display:flex;flex-direction:column;gap:8px}
.rv-opt{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:13px 14px;cursor:pointer;font-size:15px;font-weight:600;color:var(--ink);text-align:left;transition:all .12s;width:100%}
.rv-opt:hover{border-color:var(--border-bright)}
.rv-opt.selected{border-color:var(--acid);background:rgba(163,230,53,0.1);color:var(--acid)}
.rv-opt:active{transform:scale(.98)}
.rv-textarea{width:100%;min-height:110px;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:12px 14px;font-family:var(--font-body);font-size:14px;color:var(--ink);resize:none;margin-bottom:6px}
.rv-textarea:focus{outline:none;border-color:var(--border-bright)}
.rv-textarea::placeholder{color:var(--ink-muted)}
.rv-charcount{font-family:var(--font-mono);font-size:10px;color:var(--ink-muted);text-align:right;margin-bottom:18px}
.rv-submit{width:100%;padding:13px;background:var(--acid);color:var(--void);border:none;border-radius:10px;font-family:var(--font-display);font-size:17px;font-weight:700;letter-spacing:1px;cursor:pointer;margin-top:auto}
.rv-submit:active{transform:scale(.97)}
.rv-btn-primary{width:100%;padding:14px;background:var(--acid);color:var(--void);border:none;border-radius:10px;font-family:var(--font-display);font-size:18px;font-weight:700;letter-spacing:1.5px;cursor:pointer}
.rv-btn-primary:active{transform:scale(.97)}
.rv-btn-primary:disabled{opacity:.5;pointer-events:none}
.rv-btn-link{display:block;margin:14px auto 0;font-family:var(--font-mono);font-size:11px;color:var(--ink-muted);text-decoration:underline;cursor:pointer;letter-spacing:.5px;background:none;border:none;padding:0;text-align:center}
.rv-btn-link:disabled{opacity:.4;pointer-events:none;text-decoration:none}
.rv-tip{margin-top:12px;padding:12px 14px;border-radius:12px;font-size:13px;line-height:1.6;color:var(--ink-soft)}

/* Verdict */
.rv-verdict-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center;gap:4px;position:relative}
.rv-beat{font-family:var(--font-mono);font-size:14px;color:var(--acid);letter-spacing:2px;opacity:0;animation:rv-fade-in .4s ease forwards}
.rv-countdown-label{font-family:var(--font-display);font-size:17px;font-weight:600;color:var(--ink);opacity:0;animation:rv-fade-in .4s ease forwards}
.rv-countdown{font-family:var(--font-mono);font-size:30px;font-weight:500;color:var(--acid);letter-spacing:1px;margin:6px 0 10px;transition:filter .2s ease}
.rv-countdown.rv-spin{filter:blur(1.5px);color:var(--ink-soft)}
.rv-countdown-note{font-family:var(--font-mono);font-size:12px;color:var(--ink-muted);min-height:16px}
.rv-verdict-actions{width:100%;max-width:320px;display:flex;flex-direction:column;gap:4px;margin-top:10px}
.rv-reveal-line{font-family:var(--font-display);font-size:19px;font-weight:600;color:var(--ink);opacity:0;line-height:1.35;animation:rv-fade-in .5s ease forwards;margin-bottom:10px}
.rv-reveal-line.rv-emphasis{font-size:25px;font-weight:700;color:var(--acid)}
@keyframes rv-fade-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.rv-continue{width:100%;max-width:320px;padding:14px;background:var(--acid);color:var(--void);border:none;border-radius:10px;font-family:var(--font-display);font-size:18px;font-weight:700;letter-spacing:1.5px;cursor:pointer;margin-top:16px;opacity:0;animation:rv-fade-in .5s ease forwards}
.rv-continue:active{transform:scale(.97)}

/* Contest */
.rv-contest-body{padding:40px 24px 24px;flex:1;display:flex;flex-direction:column;position:relative;overflow-y:auto}
.rv-contest-copy{font-size:15px;line-height:1.75;color:var(--ink-soft);margin-bottom:20px}
.rv-contest-copy p{margin-bottom:10px}
.rv-contest-copy p:last-child{margin-bottom:0}
.prize-card{border-radius:16px;padding:20px 18px;margin-bottom:14px}
.prize-card.hero{border:2px solid var(--acid)}
.prize-kicker{font-family:var(--font-mono);font-size:10px;color:var(--acid);letter-spacing:2px;margin-bottom:8px}
.prize-name{font-family:var(--font-display);font-size:20px;font-weight:700;color:var(--ink);margin-bottom:10px}
.prize-specs{list-style:none;display:flex;flex-direction:column;gap:5px}
.prize-specs li{font-size:13px;color:var(--ink-soft);padding-left:14px;position:relative}
.prize-specs li::before{content:'·';position:absolute;left:0;color:var(--acid)}
.rv-closing{font-size:14px;line-height:1.7;color:var(--ink-muted);margin:6px 0 22px}
.rv-contest-actions{display:flex;flex-direction:column;gap:8px;padding-bottom:max(24px,env(safe-area-inset-bottom))}

/* ===== v1.3 AGENT APTITUDE SCREENING — interactive beats (reaction / hold) ===== */
.scr-reaction-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;padding:30px 0}
.scr-reaction-circle{width:120px;height:120px;border-radius:50%;background:var(--panel);border:2px solid var(--border-bright);transition:background .15s ease,border-color .15s ease}
.scr-reaction-circle.go{background:var(--acid);border-color:var(--acid);box-shadow:0 0 20px rgba(163,230,53,0.4)}
.scr-reaction-circle.hit{background:var(--acid-dim);border-color:var(--acid-dim)}
.scr-reaction-msg{font-family:var(--font-mono);font-size:12px;color:var(--ink-muted);letter-spacing:.5px;text-align:center}
.scr-hold-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;padding:30px 0}
.scr-hold-btn{width:120px;height:120px;border-radius:50%;background:var(--panel);border:2px solid var(--border-bright);color:var(--ink);font-family:var(--font-display);font-size:16px;font-weight:700;letter-spacing:1px;cursor:pointer}
.scr-hold-btn:active{border-color:var(--acid)}
.scr-hold-track{width:100%;max-width:220px;height:6px;background:rgba(255,255,255,0.08);border-radius:3px;overflow:hidden}
.scr-hold-fill{height:100%;width:0%;background:var(--acid);border-radius:3px}
.scr-hold-msg{font-family:var(--font-mono);font-size:12px;color:var(--ink-muted);letter-spacing:.5px;text-align:center}

/* ===== v1.2 PWA UPDATE BAR + VERSION STAMP ===== */
.ggtl-update-bar{position:fixed;left:12px;right:12px;bottom:12px;z-index:800;background:var(--panel);border:1px solid var(--border-bright);border-radius:12px;padding:10px 12px;display:flex;align-items:center;gap:10px;box-shadow:0 8px 32px rgba(0,0,0,0.45);animation:toast-in .3s ease}
.ggtl-update-text{flex:1;font-family:var(--font-mono);font-size:11px;color:var(--ink-soft);letter-spacing:.3px}
.ggtl-update-btn{background:var(--acid);color:var(--void);border:none;border-radius:8px;padding:8px 14px;font-family:var(--font-display);font-size:13px;font-weight:700;letter-spacing:1px;cursor:pointer;flex-shrink:0}
.ggtl-update-btn:active{transform:scale(.96)}
.ggtl-update-dismiss{background:none;border:none;color:#7A9B82;font-family:var(--font-mono);font-size:11px;letter-spacing:.5px;padding:8px 6px;cursor:pointer;flex-shrink:0;text-decoration:underline}
.ggtl-update-dismiss:active{opacity:.6}
.ggtl-version-stamp{position:fixed;bottom:6px;right:8px;z-index:50;font-family:var(--font-mono);font-size:10px;color:var(--ink-muted);letter-spacing:1px;opacity:.7;pointer-events:none}
.scr-skip-wrap{display:flex;justify-content:center;margin-top:18px}
.scr-skip{font-family:var(--font-mono);font-size:10px;color:var(--ink-muted);background:transparent;border:none;text-decoration:underline;cursor:pointer;padding:6px 10px}
.scr-skip:hover{color:var(--ink)}

/* ===== v1.4 LIQUID GLASS — onboarding surfaces =====
   Real material: layered translucency, backdrop blur + saturation, a specular
   highlight along the top edge, and a soft float shadow. Glass sits on chrome
   and cards; paragraph text keeps a near-solid backing so it stays legible. */

.welcome-pane{padding:22px 18px;justify-content:center}

.welcome-card{
  position:relative;
  border-radius:26px;
  padding:30px 24px 26px;
  background:
    linear-gradient(180deg, rgba(163,230,53,.11) 0%, rgba(163,230,53,.035) 42%, rgba(4,16,10,.34) 100%),
    rgba(9,24,15,.58);
  -webkit-backdrop-filter:blur(22px) saturate(165%);
  backdrop-filter:blur(22px) saturate(165%);
  border:1px solid rgba(163,230,53,.22);
  box-shadow:
    0 26px 64px rgba(0,0,0,.58),
    0 1px 0 rgba(255,255,255,.05),
    inset 0 1px 0 rgba(255,255,255,.15);
  overflow:hidden;
}
/* specular sweep — the light catching the top curve of the glass */
.welcome-card::before{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(125% 62% at 50% -22%, rgba(255,255,255,.17) 0%, rgba(255,255,255,0) 62%);
}
/* faint inner edge, like the far wall of a thick pane */
.welcome-card::after{
  content:'';position:absolute;inset:1px;border-radius:calc(26px - 1px);pointer-events:none;
  box-shadow:inset 0 -14px 28px rgba(0,0,0,.22);
}
.welcome-card > *{position:relative;z-index:1}

/* brand mark — restores the logo to the screens people actually land on */
.welcome-mark{display:flex;justify-content:center;margin-bottom:18px}
.welcome-mark img{
  width:78px;height:78px;border-radius:50%;object-fit:cover;display:block;
  border:1px solid rgba(163,230,53,.38);
  box-shadow:
    0 0 0 7px rgba(163,230,53,.055),
    0 12px 34px rgba(0,0,0,.55),
    inset 0 1px 0 rgba(255,255,255,.22);
}

.welcome-title{font-size:29px;text-shadow:0 1px 0 rgba(0,0,0,.35)}
.welcome-eyebrow{text-shadow:0 0 14px rgba(163,230,53,.35)}

/* lit button — a glass slab with light on its top face, not a flat rectangle */
.welcome-btn{
  position:relative;padding:15px;border-radius:14px;overflow:hidden;
  background:linear-gradient(180deg,#c9f45c 0%,var(--acid) 52%,#82bd27 100%);
  color:#0a1a0e;
  box-shadow:
    0 10px 26px rgba(163,230,53,.26),
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -1px 0 rgba(0,0,0,.2);
}
.welcome-btn::after{
  content:'';position:absolute;left:0;right:0;top:0;height:46%;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.32),rgba(255,255,255,0));
}
.welcome-btn:active{transform:scale(.985)}

/* sign-in pill — always reachable during onboarding for returning agents */
.welcome-signin{
  position:absolute;top:14px;right:14px;z-index:30;
  font-family:var(--font-mono);font-size:10px;letter-spacing:1.6px;
  color:var(--ink-soft);padding:9px 15px;border-radius:999px;cursor:pointer;
  background:rgba(163,230,53,.07);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  backdrop-filter:blur(14px) saturate(150%);
  border:1px solid rgba(163,230,53,.24);
  box-shadow:0 6px 18px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.15);
}
.welcome-signin:hover{color:var(--ink);border-color:rgba(163,230,53,.4)}

/* glass depth on the pack + tip cards so they read as the same material */
.pack-card{border-radius:16px;box-shadow:0 10px 26px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.12)}
.welcome-tip{border-radius:14px;box-shadow:0 10px 26px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.12)}

/* ===== v1.4.3 NAV COLLISION FIX =====
   The sound toggle was fixed at top-right z-50, directly over the back/exit and
   sign-in controls (z-20/z-30) at the same coordinates — it swallowed their
   clicks and disabled navigation. Nav owns the top corners; the sound toggle
   moves to bottom-left where nothing else lives. */
.sound-btn{
  top:auto; right:auto;
  bottom:14px; left:14px;
  z-index:40;
  opacity:.75;
}
.sound-btn:hover{opacity:1}

/* Navigation always wins over ambient chrome */
.rv-exit{z-index:120}
.welcome-signin{z-index:120}

/* Keep the sound toggle clear of the update bar when it appears */
@media (max-width:520px){
  .sound-btn{bottom:16px;left:16px}
}

/* ===== v1.5.0 HEALTH DEPT ===== */
.rv-exit-left{left:14px;right:auto}

/* dept home — fuel meter */
.fuel-meter{margin:16px 0;padding:14px 16px;border-radius:16px}
.fuel-meter-label{font-family:var(--font-display);font-size:17px;font-weight:700;letter-spacing:1px;color:var(--warn)}
.fuel-meter-label.good{color:var(--acid)}
.fuel-meter-track{height:8px;background:rgba(255,255,255,0.08);border-radius:4px;overflow:hidden;margin:8px 0}
.fuel-meter-fill{height:100%;background:var(--warn);border-radius:4px;transition:width .4s ease}
.fuel-meter-fill.good{background:var(--acid)}
.fuel-meter-sub{font-size:13px;line-height:1.5;color:var(--ink-soft)}

/* dept home — four system cards */
.h-sys-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}
.h-sys-card{position:relative;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:16px 12px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;text-align:center;font:inherit}
.h-sys-card:active{transform:scale(.97)}
.h-sys-icon{font-size:26px}
.h-sys-name{font-family:var(--font-display);font-size:14px;font-weight:700;color:var(--ink);letter-spacing:.5px}
.h-sys-sub{font-family:var(--font-mono);font-size:10px;color:var(--ink-muted);letter-spacing:.3px}
.h-sys-check{position:absolute;top:8px;right:10px;color:var(--acid);font-size:14px;font-weight:700}

/* dept home — streak row */
.h-streak-row{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:14px;margin:10px 0}
.h-streak-row .streak-flame{font-size:22px}
.h-streak-row .streak-flame.h-flame-dim{opacity:.35}
.h-streak-text{font-family:var(--font-mono);font-size:12px;letter-spacing:.5px;color:var(--ink-soft)}

/* dept home — quest board */
.h-quest-heading{font-family:var(--font-display);font-size:18px;font-weight:700;color:var(--ink);letter-spacing:1px;margin:18px 0 4px}
.h-quest-helper{font-family:var(--font-mono);font-size:10px;color:var(--ink-muted);letter-spacing:.3px;margin-bottom:10px}
.h-quest-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:12px;margin-bottom:8px}
.h-quest-row.done{border-color:var(--border-bright)}
.h-quest-tappable{cursor:pointer}
.h-quest-tappable:active{transform:scale(.98)}
.h-quest-info{display:flex;flex-direction:column;gap:4px}
.h-quest-title{font-size:14px;font-weight:700;color:var(--ink)}
.h-quest-tag{align-self:flex-start;font-family:var(--font-mono);font-size:10px;letter-spacing:1px;padding:2px 8px;border-radius:3px;border:1px solid var(--border)}
.h-quest-tag.solo{color:var(--ink-muted)}
.h-quest-tag.partner{color:var(--acid);border-color:var(--border-bright)}
.h-quest-tick{color:var(--acid);font-size:16px;font-weight:700;min-width:18px;text-align:center}

/* AVATAR MAINTENANCE — checklist */
.h-check-list{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.h-check-item{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:13px 14px;cursor:pointer;text-align:left;width:100%;font:inherit}
.h-check-item:active{transform:scale(.98)}
.h-check-item.done{border-color:var(--acid);background:rgba(163,230,53,0.1)}
.h-check-box{width:18px;height:18px;border-radius:4px;border:1.5px solid var(--border-bright);flex-shrink:0}
.h-check-item.done .h-check-box{background:var(--acid);border-color:var(--acid)}
.h-check-label{font-size:14px;color:var(--ink);font-weight:600}
.h-check-helper{font-family:var(--font-mono);font-size:11px;color:var(--ink-muted);padding:0 2px;margin:-2px 0 2px}

/* FUEL — chips, DLC unlock, mood taps */
.h-chip-grid{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.h-chip{background:var(--panel);border:1px solid var(--border);border-radius:20px;padding:9px 14px;font-size:13px;font-weight:600;color:var(--ink-soft);cursor:pointer;font-family:inherit}
.h-chip.selected{border-color:var(--acid);background:rgba(163,230,53,0.1);color:var(--acid)}
.h-helper{font-family:var(--font-mono);font-size:11px;color:var(--ink-muted);letter-spacing:.3px;margin-bottom:16px}
.h-fuel-dlc{border-radius:14px;padding:16px;margin-bottom:16px}
.h-dlc-heading{font-family:var(--font-display);font-size:15px;font-weight:700;color:var(--ink);letter-spacing:.5px;margin-bottom:6px}
.h-dlc-body{font-size:13px;line-height:1.6;color:var(--ink-soft);margin-bottom:12px}
.h-btn-outline{width:100%;padding:11px;background:transparent;border:1px solid var(--border-bright);border-radius:10px;color:var(--acid);font-family:var(--font-display);font-size:14px;font-weight:700;letter-spacing:1px;cursor:pointer}
.h-btn-outline:active{transform:scale(.97)}
.h-flavour-msg{font-family:var(--font-mono);font-size:11px;color:var(--acid);margin-top:8px;min-height:14px}
.h-flavour-list{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.h-flavour-item{font-size:13px;color:var(--ink-soft);padding:8px 10px;border-radius:8px;background:rgba(163,230,53,0.05);border:1px solid var(--border)}
.h-mood-row{display:flex;gap:8px;margin-bottom:8px}
.h-mood-btn{flex:1;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:11px 6px;font-size:12px;font-weight:600;color:var(--ink-soft);cursor:pointer;text-align:center;font-family:inherit}
.h-mood-btn.selected{border-color:var(--acid);background:rgba(163,230,53,0.1);color:var(--acid)}

/* COOLANT — tap counter */
.h-cool-wrap{display:flex;align-items:center;justify-content:center;gap:22px;margin:24px 0}
.h-cool-plus,.h-cool-minus{width:56px;height:56px;border-radius:50%;background:var(--panel);border:2px solid var(--border-bright);color:var(--acid);font-family:var(--font-display);font-size:24px;font-weight:700;cursor:pointer}
.h-cool-plus:active,.h-cool-minus:active{transform:scale(.94)}
.h-cool-count-wrap{width:70px;text-align:center}
.h-cool-count{font-family:var(--font-display);font-size:38px;font-weight:700;color:var(--ink)}

/* FRAME — countdown ring */
.h-frame-ring-wrap{position:relative;width:140px;height:140px;margin:10px auto 18px}
.h-frame-ring{width:100%;height:100%;transform:rotate(-90deg)}
.h-frame-ring-track{fill:none;stroke:var(--border);stroke-width:6}
.h-frame-ring-fill{fill:none;stroke:var(--acid);stroke-width:6;stroke-linecap:round;transition:stroke-dashoffset 1s linear}
.h-frame-ring-num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:28px;color:var(--ink)}
.h-frame-step-text{font-family:var(--font-display);font-size:19px;font-weight:600;color:var(--ink);text-align:center;margin-bottom:6px}
.h-frame-step-helper{font-family:var(--font-mono);font-size:11px;color:var(--ink-muted);text-align:center;margin-bottom:20px}

/* shared confirmation panel (all four system logs land here) */
.h-confirm-wrap{flex:1;display:flex;flex-direction:column;justify-content:center;gap:18px;padding:10px 0}
.h-confirm-msg{padding:20px 18px;border-radius:16px;font-size:16px;line-height:1.6;color:var(--ink);text-align:center}

/* ===== v1.6.0 AVATAR BREADTH — customize screen additions ===== */
.cust-pin{position:sticky;top:0;z-index:10;background:rgba(4,16,10,0.95)}
.cust-randomise-btn{margin-top:2px;padding:8px 18px;background:transparent;border:1px solid var(--border-bright);border-radius:10px;color:var(--acid);font-family:var(--font-display);font-size:13px;font-weight:700;letter-spacing:2px;cursor:pointer}
.cust-randomise-btn:active{transform:scale(.97)}
.cust-sublabel{font-family:var(--font-mono);font-size:10px;color:var(--ink-muted);letter-spacing:1px;text-transform:uppercase;margin:10px 0 6px}
.cust-section .cust-sublabel:first-of-type{margin-top:0}
.style-row-6{display:grid;grid-template-columns:repeat(6,1fr);gap:5px}
.style-row-4{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.silhouette-row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.silhouette-btn{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:8px 4px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s}
.silhouette-btn.active{border-color:var(--acid);background:rgba(163,230,53,0.08)}
.silhouette-btn svg{width:26px;height:44px;display:block}

/* ===== v1.6.1 CUSTOMIZER POLISH =====
   The breadth pass shipped structurally complete but visually rough: option
   labels were unreadable against the dark panel, the preview was small relative
   to its panel, and the option grid wasted vertical space. This is that pass. */

/* Preview: bigger figure, glass panel, sticky while scrolling options */
.cust-preview-wrap{
  padding:22px 20px 18px;gap:14px;
  background:linear-gradient(180deg,rgba(163,230,53,.07) 0%,rgba(4,16,10,.5) 100%);
  border-bottom:1px solid var(--glass-stroke);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  backdrop-filter:blur(18px) saturate(150%);
}