:root { color-scheme: dark; --bg:#0a0305; --text:#f7e4e6; --muted:#c79aa2; --rose:#ff6b7d; --crimson:#c8102e; --line:#4a1220; --panel:rgba(23,6,9,.82); }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; background: var(--bg); color: var(--text); font: 1rem/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
body { background: radial-gradient(60rem 40rem at 50% 50%, rgba(200,16,46,.22), transparent 70%), var(--bg); }
a { color: var(--rose); }
:focus-visible { outline: 3px solid #fff; outline-offset: 3px; border-radius: 6px; }
canvas { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
#stage { position: fixed; inset: 0; cursor: grab; touch-action: none; outline: none; opacity: 0; transition: opacity 2.4s ease; }
body.ready #stage { opacity: 1; }
#stage.drag { cursor: grabbing; }
#world { position: absolute; left: 0; top: 0; width: 0; height: 0; transform-origin: 0 0; will-change: transform; }
#lines { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
#lines line { stroke: rgba(255,107,125,.28); stroke-width: 1; vector-effect: non-scaling-stroke; }
#lines line.core { stroke: rgba(200,16,46,.22); stroke-dasharray: 2 6; }
#lines line.cross { stroke: rgba(255,160,170,.4); }
#lines line.hot { stroke: rgba(255,200,205,.9); }

.core { position: absolute; transform: translate(-50%, -50%); text-align: center; pointer-events: none; }
.core i { display: block; width: 26px; height: 26px; margin: 0 auto .4rem; border-radius: 50%; background: radial-gradient(circle, #fff 0 18%, var(--rose) 40%, var(--crimson) 70%, transparent 72%); box-shadow: 0 0 60px 18px rgba(200,16,46,.55), 0 0 160px 60px rgba(200,16,46,.25); }
.core b { font-size: .8rem; letter-spacing: .3em; text-transform: uppercase; color: var(--muted); }

.cl { position: absolute; transform: translate(-50%, -50%); text-align: center; pointer-events: none; white-space: nowrap; }
.cl b { display: block; font-size: 1.15rem; font-style: italic; text-transform: uppercase; font-weight: 900; letter-spacing: .06em; text-shadow: 0 0 22px rgba(200,16,46,.8); }
.cl span { font-size: .78rem; color: var(--muted); letter-spacing: .14em; text-transform: uppercase; }
.cl.ghost b { color: var(--muted); text-shadow: none; }

.star { position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: .3rem; text-decoration: none; color: var(--text); width: 9rem; text-align: center; border-radius: 10px; padding: .3rem; }
.star i { display: block; width: 14px; height: 14px; border-radius: 50%; background: var(--c, var(--rose)); box-shadow: 0 0 14px 4px var(--g, rgba(255,107,125,.55)); transition: transform .5s ease, box-shadow .5s ease; }
.star span { font-size: .82rem; line-height: 1.2; text-shadow: 0 0 8px #000, 0 0 3px #000; }
.star:hover i, .star:focus-visible i, .star.sel i { transform: scale(1.8); box-shadow: 0 0 26px 10px var(--g, rgba(255,107,125,.7)); }
.star.crimson { --c: #ff3b55; --g: rgba(200,16,46,.7); }
.star.rose { --c: #ff9aa6; --g: rgba(255,107,125,.55); }
.star.ember { --c: #ff7a45; --g: rgba(255,90,40,.55); }
.star.ghost { --c: transparent; --g: rgba(199,154,162,.25); color: var(--muted); }
.star.ghost i { border: 1px dashed var(--muted); background: transparent; }
.star.dim { opacity: .18; }
.star.hit i { transform: scale(1.8); box-shadow: 0 0 30px 12px rgba(255,200,205,.8); }
body.far .star span { opacity: 0; }
body.far .star:hover span, body.far .star:focus-visible span, body.far .star.sel span { opacity: 1; }

.title { position: fixed; left: 1.25rem; top: 1rem; pointer-events: none; max-width: 22rem; }
.title h1 { margin: 0; font-size: clamp(2rem, 7vw, 3.2rem); font-style: italic; text-transform: uppercase; font-weight: 900; line-height: 1; text-shadow: 0 0 28px rgba(200,16,46,.7); }
.title h1 span { color: var(--rose); }
.title p { margin: .4rem 0 0; color: var(--muted); font-size: .85rem; }

#info { position: fixed; right: 1.25rem; top: 1rem; width: min(20rem, calc(100vw - 2.5rem)); background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: .8rem 1rem; backdrop-filter: blur(6px); opacity: 0; transform: translateY(-4px); transition: opacity .4s ease, transform .4s ease; pointer-events: none; }
#info.on { opacity: 1; transform: none; pointer-events: auto; }
#info strong { display: block; font-size: 1.05rem; }
#info span { display: block; color: var(--muted); font-size: .9rem; }
#info a { display: inline-block; margin-top: .4rem; font-weight: 700; }

.bar { position: fixed; left: 50%; bottom: 2.6rem; transform: translateX(-50%); display: flex; gap: .5rem; align-items: center; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: .4rem .6rem; backdrop-filter: blur(6px); max-width: calc(100vw - 1.5rem); }
.bar button, .bar input { font: inherit; color: var(--text); background: #170609; border: 1px solid var(--line); border-radius: 999px; padding: .35rem .8rem; min-height: 2.2rem; }
.bar button { cursor: pointer; min-width: 2.2rem; }
.bar button:hover { border-color: var(--rose); }
.bar input { width: 9rem; }
.hint { position: fixed; left: 0; right: 0; bottom: .7rem; margin: 0; text-align: center; color: var(--muted); font-size: .75rem; pointer-events: none; padding: 0 1rem; }

#list { position: fixed; inset: 0; z-index: 5; overflow: auto; background: rgba(10,3,5,.94); padding: 4.5rem 1.25rem 6rem; }
#list[hidden] { display: none; }
#list h2 { font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin: 1.6rem 0 .4rem; }
#list ul { list-style: none; margin: 0; padding: 0; max-width: 40rem; }
#list li { padding: .35rem 0; border-bottom: 1px solid var(--line); }
#list li span { color: var(--muted); font-size: .88rem; display: block; }
.ns { position: fixed; inset: 0; z-index: 9; background: var(--bg); padding: 5rem 1.25rem; }

@media (max-width: 34rem) { .bar { bottom: 3.4rem; flex-wrap: wrap; justify-content: center; border-radius: 18px; } .title p { display: none; } }
@media (prefers-reduced-motion: reduce) { #stage { transition: none; } .star i, #info { transition: none; } }