/* Act 1 — the map.
 *
 * Six places on a road that climbs out of the foundry, a figure standing on it,
 * and a card that tells you where you are pointing before you go. Behaviour and
 * the reasoning behind it: js/act1-map.js.
 *
 * Everything here is scoped under .a1-map*, so if that file never runs, not one
 * rule below matches anything and the hub is untouched.
 */

.a1-map-wrap {
    max-width: 420px;
    margin: 26px auto 4px;
}

.a1-map-head { text-align: center; margin-bottom: 10px; }

.a1-map-title {
    font-size: 12px; font-weight: 800; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--a1-amber);
}

.a1-map-head p {
    margin: 6px 0 0; font-size: 12.5px; line-height: 1.65;
    color: var(--a1-ink-3);
}

/* ---------- the map itself ---------- */

.a1-map {
    position: relative;
    width: 100%;
    aspect-ratio: 100 / 132;
    border-radius: 18px;
    background:
        radial-gradient(120% 70% at 50% 100%, rgba(255, 143, 43, 0.13), transparent 62%),
        radial-gradient(90% 55% at 60% 4%, rgba(53, 224, 245, 0.10), transparent 60%),
        linear-gradient(180deg, #070a12, #0a1120);
    border: 1px solid var(--a1-line);
    overflow: hidden;
}

.a1-map > svg {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
}

.a1-map-road {
    fill: none; stroke: #1e2a44; stroke-width: 0.62;
    stroke-linecap: round; stroke-dasharray: 0.9 1.2;
}

/* The stretch you have already walked. Amber, solid, and it stops exactly at
   the last place you finished.

   Strokes and dashes here are in the viewBox's own units, NOT screen pixels.
   The first cut carried vector-effect: non-scaling-stroke, which quietly moves
   dash lengths into screen space — so a run measured along the path in user
   units came out ~3.4x short, repeated, and lit the wrong half of the map.
   Measure and draw in one space. */
.a1-map-road-lit {
    fill: none; stroke: var(--a1-amber); stroke-width: 0.78;
    stroke-linecap: round; opacity: 0.5;
    transition: stroke-dashoffset 0.8s ease;
}

/* ---------- a place ---------- */

.a1-map-node {
    position: absolute;
    transform: translate(-50%, -50%);
    background: none; border: none; padding: 0; cursor: pointer;
    font-family: inherit;
    display: grid; justify-items: center;
    -webkit-tap-highlight-color: transparent;
}

.a1-map-plate {
    position: relative;
    width: 46px; height: 46px; border-radius: 13px;
    display: grid; place-items: center; overflow: hidden;
    background: #0d1424;
    border: 1px solid #22304c;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.a1-map-tile {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
    opacity: 0.62;
    transition: opacity 0.2s ease;
}

/* The number sits over the art, which is why it carries its own shadow — on a
   bright ember in the tile beneath, flat white text disappears. */
.a1-map-mark {
    position: relative;
    font-size: 13px; font-weight: 800; color: var(--a1-ink);
    text-shadow: 0 1px 6px #000, 0 0 12px #000;
}

.a1-map-lbl {
    margin-top: 6px; width: 96px; text-align: center;
    font-size: 10.5px; line-height: 1.35; font-weight: 600;
    color: var(--a1-ink-3);
    transition: color 0.2s ease;
}

.a1-map-node.done .a1-map-plate { border-color: rgba(52, 211, 153, 0.55); }
.a1-map-node.done .a1-map-tile { opacity: 0.82; }
.a1-map-node.done .a1-map-lbl { color: var(--a1-ink-2); }

/* Outside the plate, because the plate clips its own art. */
.a1-map-tick {
    position: absolute; top: -5px; right: calc(50% - 28px);
    width: 17px; height: 17px; border-radius: 50%;
    display: grid; place-items: center;
    font-size: 10px; font-weight: 800; line-height: 1;
    color: #05140e; background: var(--a1-ok);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}

.a1-map-node.finale .a1-map-plate { border-color: rgba(255, 207, 107, 0.42); }

/* ---------- a place you have not opened yet ----------
   Unlit rather than removed. You can see it from the road, you can walk over
   and read what it is, and the plate says plainly that the door is shut — the
   art goes dark and colourless because an unopened place is somewhere the
   lantern has not reached, not somewhere the map is hiding from you. */
.a1-map-node.locked .a1-map-tile { opacity: 0.22; filter: grayscale(1); }
.a1-map-node.locked .a1-map-plate { border-color: #1a2337; box-shadow: none; }
.a1-map-node.locked .a1-map-mark { color: var(--a1-ink-3); text-shadow: 0 1px 6px #000; }
.a1-map-node.locked .a1-map-lbl { color: #4d5b78; }
.a1-map-node.locked:hover .a1-map-tile { opacity: 0.34; }
.a1-map-node.on.locked .a1-map-plate { border-color: #33415f; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.6); }
.a1-map-node.on.locked .a1-map-tile { opacity: 0.4; }

.a1-map-lock {
    position: absolute; top: -5px; right: calc(50% - 28px);
    width: 17px; height: 17px; border-radius: 50%;
    display: grid; place-items: center;
    font-size: 9px; line-height: 1;
    background: #16203a; border: 1px solid #26314c;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}

.a1-map-card-n.locked { background: #101828; color: var(--a1-ink-3); font-size: 11px; }

/* Where the story says to go next. It pulses; it is the one place that is
   open and unfinished, which is now the same thing. */
.a1-map-node.next .a1-map-plate {
    border-color: var(--a1-amber);
    animation: a1-map-beacon 2.2s ease-in-out infinite;
}

@keyframes a1-map-beacon {
    0%, 100% { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), 0 0 0 0 rgba(255, 207, 107, 0.34); }
    50%      { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), 0 0 0 7px rgba(255, 207, 107, 0); }
}

.a1-map-node.on .a1-map-plate {
    transform: scale(1.12);
    border-color: var(--a1-cyan);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.6), 0 0 18px rgba(53, 224, 245, 0.3);
}
.a1-map-node.on .a1-map-tile { opacity: 1; }
.a1-map-node.on .a1-map-lbl { color: var(--a1-ink); }

.a1-map-node:hover .a1-map-tile { opacity: 0.92; }
.a1-map-node:focus-visible { outline: none; }
.a1-map-node:focus-visible .a1-map-plate { border-color: var(--a1-cyan); }

/* ---------- you ----------
   A lantern at the door of the place you are standing at, stepping from rung to
   rung. It sits just outside the plate's right edge and level with its middle,
   which is the one spot that clears both the art it stands in front of and the
   name written under it — the corner reads better but lands on the label. */

.a1-map-you {
    position: absolute;
    width: 13px; height: 13px; border-radius: 50%;
    transform: translate(-50%, -50%) translate(29px, 5px);
    background: radial-gradient(circle at 40% 35%, #fff3d4, var(--a1-amber) 55%, #b9752a);
    box-shadow: 0 0 14px rgba(255, 207, 107, 0.75), 0 0 34px rgba(255, 143, 43, 0.35);
    transition: left 0.23s linear, top 0.23s linear;
    pointer-events: none;
}

.a1-map-you::after {
    content: ''; position: absolute; inset: -7px;
    border-radius: 50%; border: 1px solid rgba(255, 207, 107, 0.42);
    animation: a1-map-lamp 2.4s ease-in-out infinite;
}

@keyframes a1-map-lamp {
    0%, 100% { transform: scale(1); opacity: 0.65; }
    50%      { transform: scale(1.28); opacity: 0.15; }
}

/* ---------- the card under the map ---------- */

.a1-map-card {
    margin-top: 14px;
    background: var(--a1-panel);
    border: 1px solid var(--a1-line);
    border-radius: 16px;
    padding: 15px 16px 16px;
}

.a1-map-card-top { display: flex; align-items: center; gap: 11px; }

.a1-map-card-n {
    flex: none; width: 30px; height: 30px; border-radius: 9px;
    display: grid; place-items: center;
    font-size: 13.5px; font-weight: 800;
    background: #131c30; color: var(--a1-ink-2);
}
.a1-map-card-n.done { background: rgba(52, 211, 153, 0.14); color: var(--a1-ok); }

.a1-map-card-heads { display: grid; gap: 2px; min-width: 0; }
.a1-map-card-heads b { font-size: 16px; font-weight: 700; color: var(--a1-ink); }
.a1-map-card-heads i {
    font-style: normal; font-size: 12px; color: var(--a1-ink-3);
}

.a1-map-card-line {
    margin: 11px 0 0; font-size: 13.5px; line-height: 1.72;
    color: var(--a1-ink-2);
}

/* Who is inside. The faces are the reason to pick one place over another — a
   name and a role line are a menu, a face is somebody waiting. */
.a1-map-who {
    display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
    margin-top: 12px;
}

.a1-map-who-lbl { font-size: 11.5px; color: var(--a1-ink-3); }

.a1-map-who-one {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12px; color: var(--a1-ink-2);
}

.a1-map-face {
    position: relative; flex: none;
    width: 26px; height: 26px; border-radius: 8px;
    display: grid; place-items: center; overflow: hidden;
    font-size: 12px; line-height: 1;
    color: var(--tint, var(--a1-amber));
    background: color-mix(in srgb, var(--tint, #ffcf6b) 14%, #0b1120);
    border: 1px solid color-mix(in srgb, var(--tint, #ffcf6b) 32%, transparent);
}

.a1-map-face-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover;
}

.a1-map-go { width: 100%; margin-top: 14px; }

/* ---------- the list, once the map has drawn ----------
   It stays — it is the fallback and it is the only place the task names are
   written out — but it stops competing with the map for the top of the page. */

.a1-map-idx {
    max-width: 420px; margin: 26px auto 10px;
    font-size: 11px; font-weight: 800; letter-spacing: 0.16em;
    text-transform: uppercase; color: var(--a1-ink-3);
}

.has-map .a1-list { max-width: 420px; margin-left: auto; margin-right: auto; }
.has-map .a1-list .a1-ch { padding-top: 11px; padding-bottom: 11px; }
.has-map .a1-list .a1-ch-art { display: none; }

@media (prefers-reduced-motion: reduce) {
    .a1-map-you { transition: none; }
    .a1-map-you::after,
    .a1-map-node.next .a1-map-plate { animation: none; }
    .a1-map-road-lit { transition: none; }
    .a1-map-plate { transition: none; }
}