/* GLOWFALL hub page (glowfall/index.html). Colours are Veyra-64 names → wiki/art/palettes.md. */
:root {
    --ink0: #05060d; --ink1: #151a2e; --ink2: #2a3150; --ink3: #464f7a;
    --stone2: #a9a4a8; --stone3: #e8e4dc;
    --cyan1: #11a8c0; --cyan2: #3ef0f0; --violet2: #9a5cf0; --gold2: #f0c020;
    --magenta2: #f04ab0;
}
* { box-sizing: border-box; }
html { background: var(--ink0); }
body {
    margin: 0; background: var(--ink0); color: var(--stone3);
    font: 15px/1.55 'Courier New', ui-monospace, monospace;
}
a { color: var(--cyan2); }
a:hover { color: #c8fffa; }
main { max-width: 1040px; margin: 0 auto; padding: 16px 16px 48px; }

#backLink {
    display: inline-block; margin-bottom: 14px; color: var(--stone2); text-decoration: none;
    letter-spacing: 2px; font-size: 13px;
}
#backLink:hover { color: var(--cyan2); }

.hero { position: relative; border: 1px solid var(--ink2); background: #000; }
.hero canvas {
    display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
    image-rendering: pixelated; background: #000 url('../../art/look/rootfall-night.png')
        center / cover no-repeat;
}
.hero .title {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 20px 16px;
    background: linear-gradient(transparent, rgba(5, 6, 13, 0.92));
}
h1 {
    margin: 0; font-size: clamp(32px, 7vw, 64px); letter-spacing: 0.18em; color: var(--cyan2);
    text-shadow: 0 0 10px rgba(62, 240, 240, 0.8), 0 0 28px rgba(154, 92, 240, 0.6);
}
.hero .sub { margin: 4px 0 0; color: var(--stone2); letter-spacing: 2px; font-size: 13px; }

.intro { margin: 20px 0 8px; max-width: 72ch; }
h2 {
    margin: 32px 0 12px; font-size: 18px; letter-spacing: 4px; color: var(--gold2);
    text-transform: uppercase;
}

.links { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.links a {
    display: block; padding: 12px 14px; border: 1px solid var(--ink2); background: var(--ink1);
    text-decoration: none; color: var(--stone3);
}
.links a:hover { border-color: var(--cyan2); box-shadow: 0 0 12px rgba(62, 240, 240, 0.25); }
.links b { display: block; color: var(--cyan2); letter-spacing: 1px; }
.links span { font-size: 13px; color: var(--stone2); }

.progress { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.progress .bar {
    flex: 1; height: 10px; background: var(--ink1); border: 1px solid var(--ink2);
    position: relative;
}
.progress .bar::after {
    content: ''; position: absolute; inset: 0; width: calc(var(--done, 0) * 100%);
    background: var(--cyan2); box-shadow: 0 0 10px var(--cyan2);
}
.progress span { font-size: 13px; color: var(--stone2); white-space: nowrap; }

#roadmap { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--ink2); }
.phase { margin: 0 0 10px; padding-left: 18px; position: relative; }
.phase summary {
    cursor: pointer; list-style: none; display: flex; flex-wrap: wrap; align-items: baseline;
    gap: 4px 12px; padding: 10px 12px; background: var(--ink1); border: 1px solid var(--ink2);
}
.phase summary::-webkit-details-marker { display: none; }
.phase .dot {
    position: absolute; left: -7px; top: 16px; width: 12px; height: 12px;
    background: var(--ink0); border: 2px solid var(--ink3);
}
.phase.done .dot { background: var(--cyan1); border-color: var(--cyan1); }
.phase.current .dot {
    background: var(--cyan2); border-color: var(--cyan2); box-shadow: 0 0 10px var(--cyan2);
}
.phase .num { color: var(--stone2); font-size: 13px; letter-spacing: 1px; }
.phase .title { font-weight: bold; color: var(--stone3); }
.phase .chip {
    font-size: 12px; padding: 0 8px; border: 1px solid var(--ink3); color: var(--stone2);
}
.phase.done .chip { border-color: var(--cyan1); color: var(--cyan1); }
.phase.current .chip { border-color: var(--gold2); color: var(--gold2); }
.phase.current summary { border-color: var(--cyan1); }
.phase .note { flex-basis: 100%; font-size: 13px; color: var(--stone2); }
.phase .body {
    padding: 4px 16px 10px; border: 1px solid var(--ink2); border-top: 0;
    background: rgba(21, 26, 46, 0.5); font-size: 14px; overflow-wrap: anywhere;
}
.phase .body ul { padding-left: 20px; margin: 8px 0; }
.phase .body code, .phase .note code { color: var(--gold2); font-size: 13px; }
.phase .body strong { color: var(--cyan2); }
.phase .body table { border-collapse: collapse; margin: 8px 0; font-size: 13px; width: 100%; }
.phase .body th, .phase .body td {
    border: 1px solid var(--ink2); padding: 4px 8px; text-align: left; vertical-align: top;
}
.phase .body th { color: var(--stone2); font-weight: normal; letter-spacing: 1px; }
.phase .body td:first-child { white-space: nowrap; color: var(--stone2); }
.error { padding: 12px; color: var(--magenta2); }

footer { margin-top: 40px; font-size: 12px; color: var(--ink3); letter-spacing: 2px; }

@media (max-width: 560px) {
    .hero .title { position: static; padding: 12px; background: var(--ink0); }
    .phase .body { padding: 4px 10px 8px; }
}