:root{
  --bg:#071116; --bg2:#0b1d24; --grid:#173049; --text:#eaf8fa; --muted:#7ea4aa;
  --cyan:#52e0e8; --blue:#5ca9ff; --green:#6df2b3; --gold:#f3c969; --warn:#ff3630;
  --accent:var(--cyan); --good:var(--green); --ink:#eaf8fa; --danger:var(--warn);
  --codeSize:22px;
  /* Category color law: LIFE = Signal Green, WORLD = World Blue, ATMOSPHERE = Console Cyan */
  --life:var(--green); --world:var(--blue); --atmosphere:var(--cyan);
}
html,body{height:100%}
body{margin:0;background:radial-gradient(1200px 800px at 60% -10%, #17324a 0%, var(--bg) 65%) fixed;color:var(--text);font:16px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow:hidden;cursor:crosshair;user-select:none}
.vignette::before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(120% 120% at 50% 50%, transparent 60%, rgba(0,0,0,.2) 90%);mix-blend-mode:multiply}
.scanlines::after{content:"";position:fixed;inset:0;pointer-events:none;background:repeating-linear-gradient(to bottom, rgba(82,224,232,0.03) 0 1px, transparent 1px 3px);animation:scan 8s linear infinite;opacity:.22}
@keyframes scan{0%{background-position-y:0}100%{background-position-y:100%}}

header{position:fixed;inset:0 auto auto 0;right:0;height:56px;display:flex;align-items:center;gap:16px;padding:10px 14px;background:linear-gradient(#0a1420,#080e14);border-bottom:1px solid var(--grid);box-shadow:0 6px 24px rgba(0,0,0,.45)}
.logo{letter-spacing:.22em;font-weight:700;color:var(--cyan);text-shadow:0 0 12px rgba(82,224,232,.4)}
.sep{height:18px;width:1px;background:var(--grid);opacity:.8}
.stat{display:flex;gap:8px;align-items:baseline}
.stat label{color:var(--muted)}
.stat.last-spark-stat{flex:0 1 auto; min-width:0; max-width:900px}
.stat.last-spark-stat label{white-space:nowrap}
.stat.last-spark-stat strong{color:var(--text);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;display:inline-block;max-width:100%}
.lights{display:flex;gap:8px;margin-left:auto;align-items:center}
.btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--grid);padding:6px 10px;border-radius:8px;background:#0e1720;color:var(--text);cursor:pointer;transition:border-color .2s ease}
.btn:hover{border-color:var(--cyan)}
.btn.toggle.off{color:#5b7d8f;border-color:#152a36}

.workspace{position:fixed;inset:56px 0 0 0;padding:14px}
.terminal{position:relative;height:100%;width:100%;border:1px solid var(--grid);border-radius:16px;overflow:hidden;background:linear-gradient(180deg, rgba(19,34,48,.75), rgba(11,29,36,.75));display:grid;grid-template-columns: 1fr 380px;opacity:0;transition:opacity .8s ease;z-index:1}
.terminal.on{opacity:1}
.cloud-wrap{position:relative;padding:24px}
.cloud{position:absolute;inset:12px 12px 12px 12px;display:grid;grid-template-columns:repeat(8,1fr);grid-auto-rows:calc(var(--codeSize) + 14px);gap:14px 10px}
.spark-tile{position:relative;align-self:center;justify-self:center;font-size:var(--codeSize);letter-spacing:.06em;color:var(--muted);opacity:0;transform:translateY(0);transition:transform .15s linear, opacity .6s ease, text-shadow .2s ease;text-align:center}
.spark-tile.ready{opacity:.75}
.spark-tile.flash{animation:blink 1.2s step-end infinite}
@keyframes blink{50%{opacity:.4}}
.spark-tile.flash-anchor{animation:anchorpulse 1.6s ease-in-out infinite}
@keyframes anchorpulse{0%,100%{transform:scale(1.1);opacity:1}50%{transform:scale(1.22);opacity:.88}}
.spark-tile.flash-common{color:var(--cyan); text-shadow:0 0 10px var(--cyan),0 0 18px rgba(82,224,232,.5)}
.spark-tile.flash-common.cat-LIFE{color:var(--life); text-shadow:0 0 10px var(--life),0 0 18px rgba(109,242,179,.5)}
.spark-tile.flash-common.cat-WORLD{color:var(--world); text-shadow:0 0 10px var(--world),0 0 18px rgba(92,169,255,.5)}
.spark-tile.flash-common.cat-ATMOSPHERE{color:var(--atmosphere); text-shadow:0 0 10px var(--atmosphere),0 0 18px rgba(82,224,232,.5)}
.spark-tile.flash-anchor{color:var(--gold); font-weight:700; transform:scale(1.12); text-shadow:0 0 18px var(--gold),0 0 30px rgba(243,201,105,.85),0 0 4px #fff}
.spark-tile.flash-anchor.flash-rare{font-size:calc(var(--codeSize) + 6px)}
.spark-tile.flash-anchor.cat-LIFE{color:var(--life); text-shadow:0 0 14px var(--life),0 0 30px rgba(243,201,105,.65),0 0 4px #fff}
.spark-tile.flash-anchor.cat-WORLD{color:var(--world); text-shadow:0 0 14px var(--world),0 0 30px rgba(243,201,105,.65),0 0 4px #fff}
.spark-tile.flash-anchor.cat-ATMOSPHERE{color:var(--atmosphere); text-shadow:0 0 14px var(--atmosphere),0 0 30px rgba(243,201,105,.65),0 0 4px #fff}
.spark-tile .badge{position:absolute;font-size:9px;letter-spacing:.05em;transform:translate(6px,-10px);opacity:.85}
.spark-tile.flash-common .badge{color:var(--muted)}
.spark-tile.flash-anchor .badge{color:var(--gold)}

.panel{border-left:1px solid var(--grid);padding:14px;background:#0e1c26;display:flex;flex-direction:column;gap:12px}
.panel h4{margin:0 0 4px;font-size:12px;color:var(--muted);letter-spacing:.12em}
.process{position:relative;border:1px solid var(--grid);border-radius:10px;overflow:hidden;height:84px}
.process.rare-flash{animation:rareFlash 1.2s ease}
@keyframes rareFlash{0%{box-shadow:inset 0 0 0 2px var(--gold),0 0 0 rgba(243,201,105,0)}30%{box-shadow:inset 0 0 0 2px var(--gold),0 0 26px rgba(243,201,105,.65)}100%{box-shadow:inset 0 0 0 0 rgba(243,201,105,0),0 0 0 rgba(243,201,105,0)}}
.bar{position:absolute;left:0;top:0;bottom:0;width:0%;background:linear-gradient(90deg, rgba(82,224,232,.2), rgba(82,224,232,.6));box-shadow:0 0 12px rgba(82,224,232,.35) inset}
.msg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);letter-spacing:.16em;text-align:center;padding:0 10px}
.msg.done{color:var(--good)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 10px;align-items:baseline}
.kv label{color:var(--muted)}
.kv .cat-LIFE{color:var(--life)}
.kv .cat-WORLD{color:var(--world)}
.kv .cat-ATMOSPHERE{color:var(--atmosphere)}
.cat-LIFE{color:var(--life)}
.cat-WORLD{color:var(--world)}
.cat-ATMOSPHERE{color:var(--atmosphere)}
.log{flex:1;min-height:0;border:1px solid var(--grid);border-radius:10px;padding:8px;overflow:auto}
.entry{font-size:12px;color:var(--ink);opacity:.95}
.entry+.entry{margin-top:4px;border-top:1px dashed var(--grid);padding-top:4px}
.insp{border:1px solid var(--grid);border-radius:10px;padding:8px;background:rgba(10,17,25,.6);color:var(--text);font-size:16px}
.insp-flash{animation:inspflash 1.2s ease}
@keyframes inspflash{0%{color:var(--cyan);text-shadow:0 0 0 rgba(82,224,232,0)}30%{text-shadow:0 0 16px rgba(82,224,232,.6)}100%{color:var(--text);text-shadow:0 0 0 rgba(0,0,0,0)}}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;padding:10px 16px;background:#0a1119;border:1px solid var(--cyan);border-radius:10px;color:var(--cyan);font-weight:700;letter-spacing:.06em;box-shadow:0 0 18px rgba(82,224,232,.5);opacity:0;transition:opacity .3s ease;z-index:10}
.toast.show{opacity:1}

.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.55);z-index:5}
.modal.show{display:flex}
.modal .box{width:740px;max-width:92vw;min-height:280px;border:1px solid var(--grid);border-radius:14px;background:#0a1119;padding:24px;box-shadow:0 20px 60px rgba(0,0,0,.5);color:var(--cyan);text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}
#rewardModal .box h3{margin:0 0 16px;letter-spacing:.18em;color:var(--cyan);flex-shrink:0}
#breakModal .box h3{margin:0 0 16px;letter-spacing:.18em;color:var(--cyan);flex-shrink:0}
.modal .box p{margin:0 0 12px;font-size:14px;line-height:1.6;max-height:160px;overflow-y:auto}
.modal .box .seed-chip{display:inline-block;margin:2px 6px;padding:4px 10px;border:1px solid var(--grid);border-radius:20px;font-size:12px;letter-spacing:.1em}
.signal-log-box{width:100%;max-width:640px;max-height:220px;overflow-y:auto;border:1px solid var(--grid);border-radius:12px;padding:12px 14px;background:#060d12;text-align:left;margin:4px 0 10px}
.signal-log-box .entry{font-size:13px;line-height:1.5;color:var(--text)}
.signal-log-box .entry+.entry{margin-top:6px;padding-top:6px;border-top:1px dashed var(--grid)}
.signal-log-box .log-empty{color:var(--muted);font-style:italic;font-size:13px}
.modal-actions{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:4px}
.modal-actions .btn,.resonant-signal .btn,.lineage-actions .btn,.break-actions .btn{font-size:15px;padding:14px 30px;font-weight:700}
@keyframes cyanGlow{0%,100%{box-shadow:0 0 6px rgba(82,224,232,.3)}50%{box-shadow:0 0 20px rgba(82,224,232,.7),0 0 38px rgba(82,224,232,.35)}}
.glow-btn{animation:cyanGlow 2.6s ease-in-out infinite}

.controls{position:fixed;right:12px;top:64px;width:260px;background:#0a1119;border:1px solid var(--grid);border-radius:10px;padding:10px;backdrop-filter:blur(2px);box-shadow:0 10px 30px rgba(0,0,0,.4);z-index:6;pointer-events:auto}
.controls.off{display:none}
.controls h3{margin:0 0 6px;font-size:12px;color:var(--muted);letter-spacing:.12em}
.controls .row{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:6px 0}
.controls input[type="range"]{width:140px}
.controls .lock{display:flex;flex-direction:column;gap:8px}
.controls .lock input{background:#0e1720;border:1px solid var(--grid);border-radius:8px;padding:6px 8px;color:var(--text);user-select:text;cursor:text}
.controls .lock small{display:none}
.controls.locked #controlsBody{display:none}
@media (max-width: 900px){.terminal{grid-template-columns:1fr}.cloud{inset:12px 12px}.controls{width:220px}}
.controls *{user-select:text}
.danger{color:var(--danger)}
.room-flash{animation:roomflash 1.2s ease}
@keyframes roomflash{0%{color:var(--green);text-shadow:0 0 0 rgba(109,242,179,0)}30%{text-shadow:0 0 18px rgba(109,242,179,.6)}100%{color:var(--text);text-shadow:0 0 0 rgba(0,0,0,0)}}
.tip{position:fixed;pointer-events:none;padding:6px 8px;border:1px solid var(--grid);border-radius:8px;background:#0a1119;box-shadow:0 10px 24px rgba(0,0,0,.4);color:var(--cyan);font-size:12px;letter-spacing:.03em;opacity:0;transition:opacity .15s ease;z-index:7}
.tip.show{opacity:.95}

.mgmt-alerts{position:fixed;top:64px;left:14px;width:300px;display:flex;flex-direction:column;gap:6px;pointer-events:none;z-index:3}
.mgmt-alerts .msg{padding:8px 10px;background:#0a1119;border:1px solid var(--grid);border-radius:8px;color:var(--muted);font-size:11px;letter-spacing:.08em;opacity:0;animation:alertFade 4s ease forwards}
.mgmt-alerts .msg.warn{border-color:var(--warn);color:var(--warn)}
.mgmt-alerts .msg.info{border-color:var(--cyan);color:var(--cyan)}
@keyframes alertFade{0%{opacity:0;transform:translateX(-10px)}10%{opacity:.9;transform:translateX(0)}90%{opacity:.9}100%{opacity:0}}

.entry.mood{color:var(--text)}
.entry.warn{color:var(--warn)}
.entry.data{color:var(--cyan)}
.entry.inspo{color:var(--ink)}
.log .entry.mood,.log .entry.mood *{color:var(--text) !important}
.log .entry.tier-anchor{font-weight:700}
.log .entry.tier-rare{font-weight:700;font-size:14px}
.log .entry.warn,.log .entry.warn *{color:var(--warn) !important}
.log .entry.data,.log .entry.data *{color:var(--cyan) !important}
.log .entry.inspo,.log .entry.inspo *{color:var(--ink) !important}
.log .entry.cat-LIFE,.log .entry.cat-LIFE *{color:var(--life) !important}
.log .entry.cat-WORLD,.log .entry.cat-WORLD *{color:var(--world) !important}
.log .entry.cat-ATMOSPHERE,.log .entry.cat-ATMOSPHERE *{color:var(--atmosphere) !important}

/* ===== Landing screen ===== */
.landing{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:radial-gradient(1400px 900px at 50% 0%, #17324a 0%, var(--bg) 65%);z-index:8;text-align:center}
.landing.hide{display:none}
.landing .rth-presents{font-size:clamp(15px, 1.7vw, 22px);letter-spacing:.14em;color:var(--muted)}
.landing h1{margin:0;font-size:clamp(56px, 10vw, 108px);font-weight:700;letter-spacing:.06em;color:var(--cyan);text-shadow:0 0 28px rgba(82,224,232,.45)}
.landing .invite{font-size:clamp(22px, 3vw, 34px);letter-spacing:.08em;color:var(--green);text-shadow:0 0 16px rgba(109,242,179,.4)}
.landing .subcopy{font-size:clamp(14px, 1.6vw, 19px);font-style:italic;letter-spacing:.04em;color:var(--muted);max-width:640px}
.landing .version-tag{font-size:clamp(12px, 1.3vw, 15px);letter-spacing:.04em;color:var(--muted);opacity:.7}
.landing .enter-btn{margin-top:16px;font-size:clamp(15px, 1.6vw, 19px);letter-spacing:.16em;padding:16px 36px;border-radius:10px;animation:welcomeGlow 3.2s ease-in-out infinite}
@keyframes welcomeGlow{
  0%,100%{box-shadow:0 0 6px rgba(82,224,232,.25),0 0 0 rgba(82,224,232,0);border-color:var(--grid)}
  50%{box-shadow:0 0 22px rgba(82,224,232,.65),0 0 42px rgba(82,224,232,.3);border-color:var(--cyan)}
}
.landing .fm-egg{position:fixed;bottom:14px;right:18px;font-size:10px;letter-spacing:.14em;color:#1c3846;cursor:default}
.ambient-field{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.ambient-token{position:absolute;font:18px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.06em;font-weight:700;color:var(--cyan);opacity:0;animation:ambientDrift 7s ease-in-out infinite, ambientFade .8s ease forwards}
.ambient-token.cat-LIFE{color:var(--life)}
.ambient-token.cat-WORLD{color:var(--world)}
.ambient-token.cat-ATMOSPHERE{color:var(--atmosphere)}
@keyframes ambientFade{to{opacity:.32}}
@keyframes ambientDrift{0%,100%{transform:translateY(0)}50%{transform:translateY(-14px)}}
.landing .rth-presents,.landing h1,.landing .invite,.landing .subcopy,.landing .version-tag,.landing .enter-btn{position:relative;z-index:1}

/* ===== Welcome screen — distinct from Landing, teaches the one thing before play ===== */
.welcome-screen{position:fixed;inset:56px 0 0 0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:radial-gradient(1400px 900px at 50% 0%, #0e2030 0%, var(--bg) 60%);z-index:8;text-align:center;padding:20px}
.welcome-screen.show{display:flex}
.welcome-screen h2{margin:0;letter-spacing:.14em;color:var(--cyan);font-size:clamp(32px, 5vw, 56px);font-weight:700;text-shadow:0 0 24px rgba(82,224,232,.45)}
.welcome-screen p{max-width:560px;color:var(--text);font-size:clamp(15px, 1.8vw, 20px);line-height:1.7}
.welcome-screen .enter-btn{margin-top:16px;font-size:clamp(15px, 1.6vw, 19px);letter-spacing:.16em;padding:16px 36px;border-radius:10px;animation:welcomeGlow 3.2s ease-in-out infinite}
.welcome-screen h2,.welcome-screen p,.welcome-screen .enter-btn{position:relative;z-index:1}

/* ===== Lineage Complete screen ===== */
.lineage-complete{position:fixed;inset:0;display:none;flex-direction:column;align-items:center;justify-content:flex-start;overflow-y:auto;padding:60px 20px;gap:22px;background:radial-gradient(1400px 900px at 50% 0%, #17324a 0%, var(--bg) 68%);z-index:9;text-align:center}
.lineage-complete.show{display:flex}
.lineage-complete h1{margin:0;letter-spacing:.2em;color:var(--cyan);text-shadow:0 0 20px rgba(82,224,232,.45)}
.resonant-signal{max-width:720px;border:1px solid var(--grid);border-radius:14px;padding:22px;background:var(--bg2);color:var(--text);font-size:17px;line-height:1.7;display:flex;flex-direction:column;gap:14px;align-items:center}
.stage-directive{color:var(--muted);font-style:italic}
.signal-label{color:var(--muted);font-size:12px;letter-spacing:.12em;text-transform:uppercase;align-self:flex-start}
.signal-instructions{max-width:600px;color:var(--muted);font-size:14px;letter-spacing:.04em}
.moises-line{max-width:560px;color:var(--cyan);font-size:17px;font-style:italic}
.btn.primary-btn{border-color:var(--cyan);color:#fff;font-weight:700;background:#0e1720}
.btn.primary-btn:hover{background:rgba(255,255,255,.08)}
.lineage-path{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:820px}
.lineage-step{border:1px solid var(--grid);border-radius:12px;padding:14px 16px;background:#0a1119;min-width:180px}
.lineage-step .it-name{color:var(--text);font-weight:700;font-size:14px;letter-spacing:.06em;margin-bottom:6px}
.lineage-step .seed-text{font-size:13px;line-height:1.5}
.lineage-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.break-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:10px}