/* NLL Quest Board. One look by choice: a night-sky board game. Pixel font for the chrome, a plain face for anything
   you read. Shared by the live site (sites/nll-map) and the static page scripts/render-workflows.sh writes. */
:root { --sky: #161a36; --sky2: #1f2450; --ground: #23513f; --panel: #262b55; --panel2: #1c2047; --ink: #000; --fg: #f5f3e7; --muted: #aab0d6; --dim: #6b6f8a;
  --gold: #ffd166; --bot: #5fe08a; --person: #ff8fa3; --build: #ff9f43; --road: #8b5a2b; --client: #9fe3ff;
  --bronze: #cd7f32; --silver: #c9ccd6; --rgold: #ffd700; --platinum: #9fe3ff; --locked: #4a4e6b;
  --pixel: "Press Start 2P", "Courier New", monospace; --num: "VT323", "Courier New", monospace; --body: "Source Sans 3", "Segoe UI", system-ui, sans-serif; color-scheme: dark }
* { box-sizing: border-box }
body { margin: 0; background: var(--sky); color: var(--fg); font: 16px/1.5 var(--body); background-image: radial-gradient(#ffffff22 1px, transparent 1px), radial-gradient(#ffffff14 1px, transparent 1px); background-size: 90px 90px, 150px 150px; background-position: 0 0, 40px 60px }
.wrap { max-width: 1120px; margin: 0 auto; padding-block: 22px 70px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)) }
.px { display: inline-block; position: relative }
h1, h2, h3 { font-family: var(--pixel); font-weight: 400; text-wrap: balance; margin: 0; line-height: 1.5 }
h1 { font-size: clamp(14px, 2.6vw, 22px); color: var(--gold); text-shadow: 3px 3px 0 var(--ink) }
a { color: var(--gold) }
.hud { display: grid; grid-template-columns: 1fr auto; gap: 14px 28px; align-items: center; background: var(--panel); border: 4px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); padding: 16px 18px; margin-top: 14px }
.hud .lvl { font-family: var(--pixel); font-size: 12px; color: var(--muted) } .hud .lvl b { color: var(--gold); font-size: 20px; margin-left: 8px; text-shadow: 2px 2px 0 var(--ink) }
.xpbar { margin-top: 10px; height: 18px; border: 3px solid var(--ink); background: var(--panel2); position: relative; image-rendering: pixelated } .xpbar i { display: block; height: 100%; background: repeating-linear-gradient(90deg, var(--bot) 0 6px, #43b86a 6px 8px) } .xpbar em { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ink) }
.xpnum { font-family: var(--num); font-size: 22px; color: var(--fg); margin-top: 6px; letter-spacing: .5px } .xpnum small { color: var(--muted); font-size: 18px }
.hud .right { font-family: var(--num); font-size: 20px; color: var(--muted); display: grid; gap: 2px; text-align: right } .hud .right b { color: var(--fg); font-weight: 400 }
.next { margin-top: 18px; background: #3a2a0f; border: 4px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); padding: 16px 18px; display: grid; grid-template-columns: auto 1fr; gap: 10px 18px; align-items: start; cursor: pointer; text-align: left; color: var(--fg); width: 100%; font: inherit }
.next:hover, .next:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px }
.next .plus { font-family: var(--pixel); font-size: 18px; color: var(--gold); text-shadow: 2px 2px 0 var(--ink); line-height: 1.3 } .next .plus small { display: block; font-size: 9px; color: var(--muted); margin-top: 6px }
.next .k { font-family: var(--pixel); font-size: 10px; color: var(--build); letter-spacing: .04em } .next b.t { display: block; font-family: var(--pixel); font-size: 12px; line-height: 1.6; margin-top: 6px } .next .plain { display: block; margin-top: 6px; color: var(--muted); font-size: 15px } .next .where { display: block; font-family: var(--num); font-size: 18px; color: var(--muted); margin-top: 4px }
.then { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 10px; font-family: var(--num); font-size: 19px; color: var(--muted) } .then button { font: inherit; color: var(--fg); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px } .then button:hover { color: var(--gold) } .then b { color: var(--gold); font-weight: 400 }
.world { margin-top: 34px; padding: 18px 18px 22px; border: 4px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); background: var(--ground); position: relative }
.world.sky { background: var(--sky2) } .world.base { background: #3b2e4f }
.world h2 { font-size: 11px; color: var(--gold); text-shadow: 2px 2px 0 var(--ink); display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline } .world h2 small { font-family: var(--num); font-size: 19px; color: var(--fg); text-shadow: none; font-weight: 400; text-transform: none; letter-spacing: 0 }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px }
.road { display: inline-flex; align-items: center; justify-content: center; width: 26px; flex: 0 0 auto }
.lanes { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 12px; margin-top: 16px }
.tile { position: relative; width: 176px; min-height: 196px; background: var(--panel); color: var(--fg); border: 4px solid var(--silver); box-shadow: 0 0 0 3px var(--ink), 5px 5px 0 3px var(--ink); padding: 10px 10px 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; font: inherit; text-align: center; flex: 0 0 auto; transition: transform .08s steps(2) }
.tile:hover, .tile:focus-visible { transform: translate(-2px, -2px); outline: none; box-shadow: 0 0 0 3px var(--ink), 7px 7px 0 3px var(--ink), 0 0 0 7px var(--gold) }
.lanes .tile { width: auto } .row .tile { width: auto; flex: 1 1 140px; max-width: 200px; min-width: 140px }
.tile.r-locked { border-color: var(--locked); background: #1b1e3a; color: var(--dim) } .tile.r-bronze { border-color: var(--bronze) } .tile.r-silver { border-color: var(--silver) } .tile.r-gold { border-color: var(--rgold) } .tile.r-platinum { border-color: var(--platinum) } .tile.r-person-run { border-color: var(--person) }
.tile .tile-top { display: flex; justify-content: space-between; width: 100%; font-family: var(--pixel); font-size: 8px } .tile .rank { color: var(--muted) } .r-bronze .rank { color: var(--bronze) } .r-silver .rank { color: var(--silver) } .r-gold .rank { color: var(--rgold) } .r-platinum .rank { color: var(--platinum) } .r-locked .rank { color: var(--dim) } .tile .soon { color: var(--build) }
.tile .art { position: relative; height: 52px; width: 100%; display: flex; align-items: center; justify-content: center; margin-top: 4px }
.tile .lockmark { position: absolute; right: 14px; bottom: -2px } .tile .flagmark { position: absolute; right: 12px; top: -4px }
.tile .name { font-family: var(--pixel); font-size: 9px; line-height: 1.6; margin-top: 4px; min-height: 30px; display: flex; align-items: center; text-wrap: balance }
.tile .sub { font-family: var(--num); font-size: 17px; color: var(--muted) } .r-locked .sub { color: var(--dim) }
.pips { display: inline-flex; gap: 2px } .pips i { width: 10px; height: 10px; background: var(--panel2); border: 2px solid var(--ink) } .pips i.on { background: var(--bot) } .pips.none { font-family: var(--num); font-size: 16px; color: var(--person) }
.worker { position: absolute; left: 14px; bottom: -4px; width: 16px; height: 24px } .worker span { position: absolute; inset: 0 } .worker .f2 { opacity: 0 }
@media (prefers-reduced-motion: no-preference) { .worker .f1 { animation: f1 .9s steps(1) infinite } .worker .f2 { animation: f2 .9s steps(1) infinite } @keyframes f1 { 50% { opacity: 0 } } @keyframes f2 { 50% { opacity: 1 } } }
.gate { display: inline-flex; align-items: center; gap: 10px; font-family: var(--pixel); font-size: 9px; color: var(--gold); background: var(--ink); padding: 8px 12px; margin-top: 14px; border: 2px solid var(--gold) }
.loop { font-family: var(--num); font-size: 19px; color: #e6e2d0; display: flex; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap }
.foot { margin-top: 36px; display: grid; gap: 10px }
details { background: var(--panel); border: 4px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); padding: 0 } summary { cursor: pointer; font-family: var(--pixel); font-size: 10px; padding: 14px 16px; color: var(--gold); list-style: none } summary::before { content: "> "; color: var(--muted) } details[open] summary::before { content: "v " } summary::-webkit-details-marker { display: none }
details .in { padding: 0 16px 16px; font-size: 15px } details .in ul { margin: 0; padding-left: 18px } details .in li { margin-top: 6px } details .in .plain b { font-weight: 600 }
.crew { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px } .crew div { background: var(--panel2); border: 2px solid var(--ink); padding: 10px 12px } .crew b { font-family: var(--pixel); font-size: 9px; color: var(--gold); display: block; line-height: 1.6 } .crew .who { font-family: var(--num); font-size: 19px } .crew .plain { color: var(--muted); font-size: 14px; margin-top: 4px }
.queue { display: grid; gap: 12px } .queue > div { background: var(--panel2); border: 2px solid var(--ink); padding: 10px 12px } .queue b.who { font-family: var(--pixel); font-size: 9px; color: var(--gold); line-height: 1.6 } .queue .n { font-family: var(--num); font-size: 19px; color: var(--muted); margin-left: 10px }
.queue ul { margin: 6px 0 0 } .queue li { font-size: 14px } .queue li small, .dlg .wait li small, .dlg .here li small, .pop li small { color: var(--muted) }
.meta { font-family: var(--num); font-size: 17px; color: var(--muted); margin-top: 22px; max-width: 80ch; line-height: 1.3 }
.stamp { font-family: var(--num); font-size: 18px; color: var(--muted) }
/* dialogs */
.dlg { border: 4px solid var(--ink); box-shadow: 8px 8px 0 var(--ink); background: var(--panel); color: var(--fg); padding: 0; width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px) } .dlg::backdrop { background: rgba(5, 6, 20, .78) }
.dlg-in { margin: 0; padding: 18px 20px 22px; overflow: auto; max-height: calc(100dvh - 40px) }
.dlg-head { display: flex; gap: 12px; align-items: center; flex-wrap: wrap } .dlg-head h2 { font-size: 12px; line-height: 1.6; flex: 1; min-width: 0 } .dlg-head .rank { font-family: var(--pixel); font-size: 9px; padding: 4px 8px; border: 2px solid currentColor } .dlg-head .x { font-family: var(--pixel); font-size: 10px; background: var(--ink); color: var(--fg); border: 2px solid var(--gold); padding: 8px 10px; cursor: pointer } .dlg-head .x:hover { background: var(--gold); color: var(--ink) }
.rank.r-bronze { color: var(--bronze) } .rank.r-silver { color: var(--silver) } .rank.r-gold { color: var(--rgold) } .rank.r-platinum { color: var(--platinum) } .rank.r-locked { color: var(--dim) } .rank.r-person-run { color: var(--person) }
.dlg-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin-top: 12px; font-family: var(--num); font-size: 19px } .dlg-meta .seat { color: var(--muted) }
.plain { font-family: var(--body); font-size: 15px; line-height: 1.45; color: #e6e2d0 } .plain b { font-weight: 600; color: var(--fg) } .plain em { color: var(--muted) } p.plain { margin: 12px 0 0 }
.next-in { margin-top: 14px; background: #3a2a0f; border: 3px solid var(--ink); padding: 10px 12px } .next-in .k { font-family: var(--pixel); font-size: 8px; color: var(--build) } .next-in b { font-family: var(--pixel); font-size: 10px; display: block; margin-top: 6px; line-height: 1.6 } .next-in .plus { font-family: var(--pixel); font-size: 10px; color: var(--gold) } .next-in .plain { margin-top: 4px; color: var(--muted) }
.dlg .wait, .dlg .here { margin-top: 14px; background: var(--panel2); border: 3px solid var(--ink); padding: 10px 12px } .dlg .wait .k, .dlg .here .k { font-family: var(--pixel); font-size: 8px; color: var(--person) } .dlg .here .k { color: var(--client) } .dlg .wait ul, .dlg .here ul { margin: 6px 0 0; padding-left: 18px; font-size: 14px } .dlg .wait li, .dlg .here li { margin-top: 4px } .dlg .wait .more, .dlg .here .more { font-family: var(--num); font-size: 16px; color: var(--muted); margin-top: 4px }
.steps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px } .steps li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: start; padding: 8px 10px; background: var(--panel2); border: 2px solid var(--ink) } .steps li.is-next { outline: 2px solid var(--gold) } .steps .mark { position: relative; height: 24px } .steps .mark .worker { position: static; display: inline-block }
.steps .line { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline } .steps .line b { font-weight: 600 } .steps .st { font-family: var(--pixel); font-size: 7px; letter-spacing: .04em } .s-done .st { color: var(--bot) } .s-building .st { color: var(--build) } .s-todo .st { color: var(--dim) } .s-person .st { color: var(--person) } .steps .xps { font-family: var(--num); font-size: 16px; color: var(--muted) } .steps .body .plain { display: block; margin-top: 2px; font-size: 14px; color: var(--muted) }
/* the crew, the people and the client pieces */
.board { position: relative }
.crewline { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; justify-content: space-between; font-family: var(--num); font-size: 19px; color: var(--muted); border-top: 2px solid var(--ink); padding-top: 12px; margin-top: 4px } .crewline b { color: var(--fg); font-weight: 400 } .crewline .btns { display: flex; gap: 8px; flex-wrap: wrap }
.pxbtn { font-family: var(--pixel); font-size: 9px; background: var(--ink); color: var(--gold); border: 2px solid var(--gold); padding: 8px 12px; cursor: pointer } .pxbtn:hover, .pxbtn[aria-pressed="true"] { background: var(--gold); color: var(--ink) }
.char { position: absolute; left: 0; top: 0; width: 24px; height: 32px; z-index: 5; pointer-events: auto; cursor: help; will-change: transform; transform: translate(0, 0); outline: none }
.char:focus-visible .body { outline: 2px solid var(--gold); outline-offset: 2px }
.char .body { position: absolute; inset: 0; transform-origin: 50% 50% } .char.flip .body { transform: scaleX(-1) }
.char .fr { position: absolute; inset: 0; opacity: 0 } .char .fr.on { opacity: 1 }
.char.ghost { opacity: .72 } @media (prefers-reduced-motion: no-preference) { .char.ghost .body { animation: hover 2.4s ease-in-out infinite } @keyframes hover { 50% { translate: 0 -4px } } .char.idle .body { animation: bob 1.6s steps(2) infinite } @keyframes bob { 50% { translate: 0 1px } } }
.char.working::after { content: ""; position: absolute; left: 18px; top: 2px; width: 6px; height: 6px; background: var(--gold); box-shadow: 2px -6px 0 var(--gold), -4px -5px 0 #ff9f43; animation: spark .5s steps(2) infinite } @keyframes spark { 50% { opacity: 0 } }
.char .n { position: absolute; left: 50%; top: -14px; transform: translateX(-50%); font-family: var(--pixel); font-size: 7px; line-height: 1; color: var(--ink); background: var(--person); border: 2px solid var(--ink); padding: 3px 4px; pointer-events: none }
.bubble { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); background: var(--fg); color: var(--ink); font-family: var(--pixel); font-size: 7px; line-height: 1.5; padding: 5px 7px; border: 2px solid var(--ink); white-space: nowrap; box-shadow: 2px 2px 0 var(--ink); pointer-events: none; z-index: 6 } .bubble::after { content: ""; position: absolute; left: 50%; bottom: -6px; width: 6px; height: 6px; background: var(--fg); border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: translateX(-50%) rotate(45deg) }
.piece { position: absolute; left: 0; top: 0; width: 22px; height: 22px; z-index: 4; cursor: help; background: var(--client); color: var(--ink); border: 2px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); font-family: var(--pixel); font-size: 6px; line-height: 18px; text-align: center; transform: translate(0, 0); outline: none }
.piece:focus-visible, .piece:hover { outline: 2px solid var(--gold); outline-offset: 1px } .piece.new { background: var(--gold) } .piece.unknown { background: var(--silver) }
.board[data-clients="off"] .piece { display: none }
.pop { position: absolute; z-index: 20; width: min(340px, calc(100vw - 40px)); background: var(--panel); color: var(--fg); border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); padding: 10px 12px; font-family: var(--body); font-size: 14px; line-height: 1.4; pointer-events: auto }
.pop b.t { font-family: var(--pixel); font-size: 8px; line-height: 1.6; color: var(--gold); display: block } .pop .sub { font-family: var(--num); font-size: 17px; color: var(--muted); display: block } .pop ul { margin: 6px 0 0; padding-left: 16px } .pop li { margin-top: 3px } .pop .more { font-family: var(--num); font-size: 16px; color: var(--muted); margin-top: 4px }
.pop a { color: var(--fg); text-decoration: underline dotted; text-underline-offset: 2px } .pop a:hover { color: var(--gold) }
/* the live site's chrome: top bar, sign-in, notices */
.topbar { background: var(--ink); border-bottom: 4px solid var(--gold) } .topbar .inner { max-width: 1120px; margin: 0 auto; padding: 10px 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap }
.topbar .brand { font-family: var(--pixel); font-size: 10px; color: var(--gold); text-decoration: none } .topbar .fill { flex: 1 } .topbar .user { font-family: var(--num); font-size: 17px; color: var(--muted) }
.btn { font-family: var(--pixel); font-size: 8px; background: var(--ink); color: var(--gold); border: 2px solid var(--gold); padding: 8px 10px; cursor: pointer } .btn:hover { background: var(--gold); color: var(--ink) } .btn.primary { background: var(--gold); color: var(--ink) } .btn.primary:hover { background: var(--fg) } .btn[disabled] { opacity: .5; cursor: wait }
.signin { max-width: 440px; margin: 48px auto 0; background: var(--panel); border: 4px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); padding: 22px 24px } .signin p { color: var(--muted); font-size: 15px }
.signin form { display: grid; gap: 10px; margin-top: 14px } .signin label { font-family: var(--pixel); font-size: 8px; color: var(--muted) } .signin input { font: 18px var(--num); padding: 10px 12px; background: var(--panel2); color: var(--fg); border: 3px solid var(--ink) } .signin .or { text-align: center; font-family: var(--num); font-size: 17px; color: var(--muted); margin: 12px 0 }
.notice { margin-top: 12px; padding: 10px 12px; border: 3px solid var(--ink); background: var(--panel2); font-size: 14px } .notice.err { border-color: var(--person); color: var(--person) }
.loading { font-family: var(--num); font-size: 22px; color: var(--muted); padding: 40px 0; text-align: center }
@media (max-width: 640px) { .hud { grid-template-columns: 1fr } .hud .right { text-align: left } .next { grid-template-columns: 1fr } .tile { width: 100% } .row { flex-direction: column; align-items: stretch } .road { width: auto; height: 26px } .lanes { grid-template-columns: 1fr 1fr } }