Cyd
5ad55aa1eb
RPConfig.xml has always named a picture for nine of the eighteen tracks. The pictures exist after all, so the page reads the mapping straight out of the config and uses them: score zones, drop zone, the chambers drawn properly and labelled. No reconstruction beats the real thing. The other nine keep the course traced from their gates, and each card now says which of the two it is showing. The pictures also check the reconstruction. Brewer's Bane is the one track shaped distinctively enough to be obviously wrong, and it matches the console picture turn for turn - long leg up one side to Score Zone 1, the corner, the run out to Score Zone 2, junction chambers spaced along it. It matched MIRRORED. Seen from above with +Z up the page the engine's +X runs to the left, and every plan here had been drawn the other way round. Fixed, so the nine tracks without a picture are drawn the same way round as the nine with one.
179 lines
6.5 KiB
CSS
179 lines
6.5 KiB
CSS
|
|
*, *::before, *::after { box-sizing: border-box; }
|
|
|
|
:root {
|
|
/* The pod's own lamp fills - MUNGA_L4/L4MFDVIEW.cpp:112 */
|
|
--amber: #ffd230;
|
|
--red: #ff482c;
|
|
--phosphor: #6fdc8c;
|
|
|
|
--ground: #0d0b07;
|
|
--panel: #16130d;
|
|
--rule: #2f2819;
|
|
--ink: #f3ead6;
|
|
--ink-mid: #b3a68a;
|
|
--ink-low: #7d7360;
|
|
|
|
--sys: var(--amber);
|
|
--wep: var(--red);
|
|
--pilot: var(--phosphor);
|
|
--on-accent: #0d0b07;
|
|
|
|
--step--1: clamp(.72rem, .70rem + .1vw, .78rem);
|
|
--step-0: clamp(.88rem, .85rem + .15vw, .95rem);
|
|
--step-1: clamp(1.05rem, 1rem + .3vw, 1.2rem);
|
|
--step-2: clamp(1.25rem, 1.1rem + .6vw, 1.6rem);
|
|
--step-3: clamp(1.9rem, 1.5rem + 2vw, 3.1rem);
|
|
|
|
--mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
|
|
--sans: ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
}
|
|
|
|
@media (prefers-color-scheme: light) {
|
|
:root {
|
|
--ground: #f7f3e8; --panel: #fffdf7; --rule: #ddd2b8;
|
|
--ink: #17140d; --ink-mid: #5c5340; --ink-low: #857a63;
|
|
--sys: #8a6400; --wep: #b3260f; --pilot: #1c7a3f;
|
|
--on-accent: #fffdf7;
|
|
}
|
|
}
|
|
:root[data-theme="light"] {
|
|
--ground: #f7f3e8; --panel: #fffdf7; --rule: #ddd2b8;
|
|
--ink: #17140d; --ink-mid: #5c5340; --ink-low: #857a63;
|
|
--sys: #8a6400; --wep: #b3260f; --pilot: #1c7a3f;
|
|
--on-accent: #fffdf7;
|
|
}
|
|
:root[data-theme="dark"] {
|
|
--ground: #0d0b07; --panel: #16130d; --rule: #2f2819;
|
|
--ink: #f3ead6; --ink-mid: #b3a68a; --ink-low: #7d7360;
|
|
--sys: #ffd230; --wep: #ff482c; --pilot: #6fdc8c;
|
|
--on-accent: #0d0b07;
|
|
}
|
|
|
|
body {
|
|
margin: 0; background: var(--ground); color: var(--ink);
|
|
font: 400 var(--step-0)/1.6 var(--sans); -webkit-font-smoothing: antialiased;
|
|
}
|
|
.wrap { max-width: 82rem; margin: 0 auto; padding: 0 clamp(1rem, 4vw, 3rem); }
|
|
.sr-only {
|
|
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
|
|
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
|
|
}
|
|
:focus-visible { outline: 2px solid var(--sys); outline-offset: 2px; }
|
|
|
|
.top { border-bottom: 1px solid var(--rule); padding: clamp(2.5rem,6vw,4.5rem) 0 2rem; }
|
|
.eyebrow {
|
|
font: 500 var(--step--1)/1 var(--mono); letter-spacing: .22em;
|
|
text-transform: uppercase; color: var(--ink-low); margin: 0 0 1.1rem;
|
|
}
|
|
h1 {
|
|
font: 700 var(--step-3)/1.02 var(--mono); letter-spacing: -.02em;
|
|
text-transform: uppercase; text-wrap: balance; margin: 0 0 1rem;
|
|
}
|
|
h1 em { font-style: normal; color: var(--sys); }
|
|
.lede { max-width: 62ch; color: var(--ink-mid); margin: 0 0 1.4rem; font-size: var(--step-1); }
|
|
.lede strong { color: var(--ink); font-weight: 600; }
|
|
|
|
.bar {
|
|
position: sticky; top: 0; z-index: 5; background: var(--ground);
|
|
background: color-mix(in srgb, var(--ground) 92%, transparent);
|
|
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
|
|
border-bottom: 1px solid var(--rule); padding: .75rem 0;
|
|
}
|
|
.bar__in { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; }
|
|
.seg { display: inline-flex; border: 1px solid var(--rule); }
|
|
.seg button {
|
|
font: 500 var(--step--1)/1 var(--mono); letter-spacing: .12em;
|
|
text-transform: uppercase; background: none; border: 0; color: var(--ink-mid);
|
|
padding: .55rem .9rem; cursor: pointer;
|
|
}
|
|
.seg button[aria-pressed="true"] { background: var(--sys); color: var(--on-accent); }
|
|
.search {
|
|
flex: 1 1 12rem; min-width: 9rem; font: 400 var(--step--1) var(--mono);
|
|
background: var(--panel); color: var(--ink);
|
|
border: 1px solid var(--rule); padding: .55rem .7rem;
|
|
}
|
|
.search::placeholder { color: var(--ink-low); }
|
|
.count { font: 500 var(--step--1) var(--mono); color: var(--ink-low); letter-spacing: .1em; }
|
|
|
|
.grid {
|
|
display: grid; gap: 1px; background: var(--rule);
|
|
border: 1px solid var(--rule); margin: 1.75rem 0 4rem;
|
|
grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
|
|
}
|
|
.trk { background: var(--panel); padding: 1.1rem 1.25rem 1.25rem; }
|
|
.trk[hidden] { display: none; }
|
|
|
|
.plan {
|
|
margin: 0 0 1rem; display: flex; flex-direction: column;
|
|
align-items: center; gap: .5rem;
|
|
}
|
|
.plan__src {
|
|
font: 500 var(--step--1)/1 var(--mono); letter-spacing: .1em;
|
|
text-transform: uppercase; color: var(--ink-low); text-align: center;
|
|
}
|
|
.plan__img {
|
|
/* The mask is drawn with contain, so clamping the box letterboxes the
|
|
art rather than stretching it - a portrait console map stays legible
|
|
beside a squat arena. */
|
|
display: block; width: 100%; max-width: 15rem; max-height: 22rem;
|
|
aspect-ratio: var(--ar);
|
|
background-color: var(--ink-mid);
|
|
-webkit-mask-image: var(--art); mask-image: var(--art);
|
|
-webkit-mask-size: contain; mask-size: contain;
|
|
-webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
|
|
-webkit-mask-position: center; mask-position: center;
|
|
}
|
|
.trk h3 {
|
|
font: 700 var(--step-2)/1.1 var(--mono); margin: 0 0 .2rem; color: var(--ink);
|
|
text-wrap: balance;
|
|
}
|
|
.trk__key {
|
|
font: 500 var(--step--1)/1 var(--mono); letter-spacing: .12em;
|
|
color: var(--ink-low); margin: 0 0 .7rem;
|
|
}
|
|
.trk__chips { display: flex; flex-wrap: wrap; gap: .3rem; margin: 0 0 .8rem; }
|
|
.chip {
|
|
font: 500 var(--step--1)/1 var(--mono); letter-spacing: .08em;
|
|
padding: .3rem .45rem; border: 1px solid currentColor;
|
|
}
|
|
.chip--arcade { color: var(--ink-mid); }
|
|
.chip--r411 { color: var(--ink-low); }
|
|
.chip--later { color: var(--ink-low); }
|
|
.chip--race { color: var(--sys); }
|
|
.chip--ball { color: var(--pilot); }
|
|
.chip--none { color: var(--wep); }
|
|
|
|
.stat { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: .15rem .8rem; }
|
|
.stat div { display: contents; }
|
|
.stat dt {
|
|
font: 500 var(--step--1) var(--mono); letter-spacing: .1em;
|
|
text-transform: uppercase; color: var(--ink-low);
|
|
}
|
|
.stat dd {
|
|
margin: 0; text-align: right; font: 500 var(--step--1) var(--mono);
|
|
color: var(--ink); font-variant-numeric: tabular-nums;
|
|
}
|
|
.twin {
|
|
margin: .8rem 0 0; font: 400 var(--step--1)/1.45 var(--mono); color: var(--ink-low);
|
|
}
|
|
.twin.warn { color: var(--wep); }
|
|
|
|
.key { display: flex; flex-wrap: wrap; gap: .4rem .9rem; padding: 1.25rem 0 0; }
|
|
.key span {
|
|
display: inline-flex; align-items: center; gap: .4rem;
|
|
font: 500 var(--step--1) var(--mono); letter-spacing: .08em; color: var(--ink-low);
|
|
}
|
|
.key i { width: .7rem; height: .7rem; display: inline-block; }
|
|
|
|
.foot {
|
|
border-top: 1px solid var(--rule); padding: 1.5rem 0 4rem;
|
|
color: var(--ink-low); font-size: var(--step--1); max-width: 78ch;
|
|
}
|
|
.foot code { font-family: var(--mono); color: var(--ink-mid); }
|
|
.empty-state {
|
|
padding: 2rem; background: var(--panel); color: var(--ink-low);
|
|
font: 400 var(--step-0) var(--mono);
|
|
}
|
|
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
|