:root{--serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif}.root{--bg: #130a07;--bg2: #24120a;--card: rgba(36, 20, 12, .78);--line: #4a2c1a;--text: #f1e6d6;--muted: #a8917a;--accent: #f29a1f;--accent2: #c2410c;--flame: #ffd27a;--glow: rgba(242, 154, 31, .35)}.root[data-mode=haunting]{--bg: #07090d;--bg2: #0f1620;--card: rgba(15, 22, 32, .8);--line: #25364a;--text: #e4edf3;--muted: #7f94a6;--accent: #9cc3d6;--accent2: #46667a;--flame: #cfe8f5;--glow: rgba(156, 195, 214, .3)}*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,sans-serif;background:#0a0605}.root{min-height:100vh;color:var(--text);background:radial-gradient(ellipse at 50% 0%,var(--bg2) 0%,var(--bg) 60%),var(--bg);transition:background .8s;position:relative}.petals{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0}.gate{position:relative;z-index:2;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem;gap:.6rem}.gate-title{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,6vw,3.4rem);letter-spacing:.04em;margin:1rem 0 0}.gate-sub{color:var(--muted);font-family:var(--serif);font-style:italic;font-size:1.15rem;margin:0 0 1rem}.gate-note{color:var(--muted);font-size:.85rem;max-width:360px;margin-top:1.5rem}.candle{position:relative;width:22px;height:70px;flex:none}.candle .wax{position:absolute;bottom:0;left:0;right:0;height:46px;background:linear-gradient(#f4e8d0,#cdb88f);border-radius:3px 3px 5px 5px;box-shadow:0 0 30px var(--glow)}.candle .flame{position:absolute;bottom:44px;left:50%;width:12px;height:24px;transform:translate(-50%);background:radial-gradient(ellipse at 50% 70%,#fff 0%,var(--flame) 40%,var(--accent) 75%,transparent 100%);border-radius:50%/65% 65% 35% 35%;filter:blur(.4px);box-shadow:0 0 22px 8px var(--glow);transform-origin:50% 100%;animation:flicker 1.6s infinite ease-in-out}.candle.big{transform:scale(2);margin-bottom:1.5rem}@keyframes flicker{0%,to{transform:translate(-50%) scale(1) rotate(-1deg);opacity:1}25%{transform:translate(-50%) scale(.92,1.06) rotate(1.5deg);opacity:.92}50%{transform:translate(-50%) scale(1.05,.95) rotate(-1.5deg);opacity:1}75%{transform:translate(-50%) scale(.95,1.04) rotate(1deg);opacity:.9}}.banner{position:relative;z-index:3;display:flex;gap:6px;padding:0 8px;pointer-events:none}.banner span{flex:1;height:38px;opacity:.85;clip-path:polygon(0 0,100% 0,100% 78%,87% 100%,74% 78%,62% 100%,50% 78%,38% 100%,26% 78%,13% 100%,0 78%);transform-origin:top center;animation:sway 4.5s ease-in-out infinite}.root[data-mode=haunting] .banner span{filter:grayscale(.85) brightness(.55)}@keyframes sway{0%,to{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}.app{position:relative;z-index:2;max-width:780px;margin:0 auto;padding:1rem 1rem 4rem}.topbar{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:space-between;align-items:center;margin-bottom:1rem}.topbar-right{display:flex;gap:.5rem;align-items:center}.hero{text-align:center;margin:1.5rem 0 2rem}.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,6vw,3rem);letter-spacing:.04em;margin:0;text-shadow:0 0 30px var(--glow)}.hero p{color:var(--muted);font-family:var(--serif);font-style:italic;margin:.5rem 0 0}.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:1.4rem 1.4rem 1.6rem;margin-bottom:1.4rem;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 10px 40px #00000059}.card h2{font-family:var(--serif);font-weight:400;font-size:1.35rem;margin:0 0 1rem;display:flex;align-items:center;gap:.7rem}.card h2 small{color:var(--muted);font-size:.8rem;font-family:system-ui,sans-serif}.num{color:var(--accent);border:1px solid var(--accent);border-radius:50%;width:1.9rem;height:1.9rem;display:inline-flex;align-items:center;justify-content:center;font-size:.85rem}.altar{display:flex;align-items:flex-end;justify-content:center;gap:1.6rem;padding:1rem 0 .5rem}.frame{display:flex;align-items:center;justify-content:center;min-width:200px;max-width:280px;min-height:240px;background:#00000059;border:2px solid var(--accent);outline:9px dotted var(--accent2);outline-offset:7px;box-shadow:0 0 50px var(--glow);cursor:pointer;overflow:hidden;transition:box-shadow .3s}.frame:hover{box-shadow:0 0 70px var(--glow)}.frame img{display:block;width:100%;max-height:340px;object-fit:contain}.frame-empty{display:flex;flex-direction:column;align-items:center;gap:.5rem;color:var(--muted);padding:2rem 1rem;text-align:center;font-size:.9rem}.plus{font-size:2.4rem;color:var(--accent);line-height:1}input,textarea{width:100%;margin-bottom:.6rem;background:#00000059;border:1px solid var(--line);color:var(--text);padding:.7rem .8rem;border-radius:8px;font:inherit}input:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--glow)}.row{display:grid;gap:.6rem;margin-top:1.2rem}.row input{margin:0}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}.grid2 input{margin-bottom:.6rem}.btnrow{display:flex;flex-wrap:wrap;gap:.6rem;margin:.3rem 0 1rem}.suggest{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1rem}button{background:#ffffff0f;color:var(--text);border:1px solid var(--line);padding:.6rem 1.1rem;border-radius:8px;cursor:pointer;font:inherit;transition:background .2s,border-color .2s,transform .1s}button:hover:not(:disabled){background:#ffffff1f;border-color:var(--accent)}button:active:not(:disabled){transform:translateY(1px)}button:disabled{opacity:.5;cursor:default}button.primary{background:var(--accent);color:#1a0d05;border-color:var(--accent);font-weight:600;box-shadow:0 0 24px var(--glow)}button.primary:hover:not(:disabled){background:var(--flame);border-color:var(--flame)}button.ghostbtn{background:transparent;color:var(--muted);font-size:.85rem;padding:.4rem .8rem}button.chip{border-radius:999px;font-size:.85rem;padding:.4rem .9rem;color:var(--muted)}.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}.seg button{border:0;border-radius:0;background:transparent;padding:.4rem .9rem;font-size:.85rem;color:var(--muted)}.seg button.on{background:var(--accent);color:#1a0d05;font-weight:600}.pill{font-size:.78rem;padding:.35rem .8rem;border-radius:999px;border:1px solid var(--line);color:var(--muted);background:#0000004d}.pill.ok:before,.pill.bad:before,.pill.warn:before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:.5rem}.pill.ok:before{background:#5ad17a;box-shadow:0 0 8px #5ad17a}.pill.bad:before{background:#e5584c}.pill.warn:before{background:#e8b64c}.chips{list-style:none;padding:0;margin:0 0 1rem;display:flex;flex-direction:column;gap:.4rem}.chips li{display:flex;justify-content:space-between;align-items:center;gap:.5rem;background:#0000004d;border:1px solid var(--line);border-radius:8px;padding:.45rem .4rem .45rem .8rem;font-size:.9rem}.chips .x{border:0;background:transparent;font-size:1.2rem;line-height:1;padding:.1rem .5rem;color:var(--muted)}.veil{margin-top:1.2rem}.veil-head{display:flex;justify-content:space-between;font-family:var(--serif);font-size:1.05rem;margin-bottom:.5rem}.meter{height:8px;background:#0006;border-radius:999px;overflow:hidden;border:1px solid var(--line)}.fill{height:100%;background:linear-gradient(90deg,var(--accent2),var(--accent),var(--flame));box-shadow:0 0 12px var(--glow);transition:width 1s ease}.hint{color:var(--muted);font-size:.82rem;margin:.5rem 0 0}.hint.center{text-align:center}.error{color:#e89a8a;margin:.8rem 0 0}.reading{color:var(--accent);font-family:var(--serif);font-style:italic;margin:0 0 .6rem}.encounter{margin-top:1.6rem;padding-top:1.2rem;border-top:1px solid var(--line)}.ghost-reply{font-family:var(--serif);font-style:italic;font-size:1.3rem;line-height:1.6;padding:1rem 1.2rem;white-space:pre-line;border-left:3px solid var(--accent);background:linear-gradient(90deg,var(--glow),transparent 70%);text-shadow:0 0 18px var(--glow);animation:appear 1.2s ease;min-height:3.2rem}.caret{display:inline-block;width:2px;height:1.1em;background:var(--accent);margin-left:3px;vertical-align:text-bottom;animation:blink .9s steps(1) infinite}@keyframes blink{50%{opacity:0}}@keyframes appear{0%{opacity:0;filter:blur(6px)}to{opacity:1;filter:blur(0)}}.foot{text-align:center;color:var(--muted);font-size:.82rem;margin-top:2rem}.foot p{max-width:560px;margin:0 auto .8rem}@media (max-width: 560px){.grid2{grid-template-columns:1fr}.altar{gap:.8rem}.candle.big{transform:scale(1.6)}}@media (prefers-reduced-motion: reduce){.flame,.banner span,.caret,.ghost-reply{animation:none}}.voicepick{max-width:190px;background:#00000059;color:var(--muted);border:1px solid var(--line);border-radius:8px;padding:.4rem .5rem;font:inherit;font-size:.8rem}
