/* kit.css: the shared pieces of the 16-bit look. Each page links it before its own style sheet. */
:root{--grass:#FAF9F5;--deep:#E8E6DC;--sand:#E3DACC;--stone:#B0AEA5;--slate:#666664;--navy:#FAF9F5;--edge:#141413;--gold:#D97757;--gold-dk:#C6613F;--ink:#E3DACC;--line:#E8E6DC;--dim:#666664;
/* Twelve roles that share a colour today. A theme can part them. */
--gold-text:var(--gold);--awake:var(--gold);--awake-line:var(--awake);--on-gold:var(--navy);--field:var(--edge);--field-ink:var(--navy);--field-edge:inset 3px 3px 0 #D4D1C1;--field-hint:#6D6B67;--tick:var(--navy);--tick-on-deep:var(--navy);--off:var(--slate);--off-ink:#424241;
--red:#641919;--orange:#D19B75;--yellow:#D17050;--teal:#6A9BCC;--sky:#6A9BCC;--blue:#6A9BCC;--pink:#C46686;--grey:#C7C6BF;
--mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
--body:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
body{font-family:var(--body);font-weight:600;letter-spacing:0;color:var(--edge);background:var(--ink)}
h1,h2,h3,.mono,.btn,.tag,.cap{font-family:var(--mono);font-weight:700;letter-spacing:.04em}
.cap{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text)}
.sprite,.px{image-rendering:pixelated;shape-rendering:crispEdges}
/* The text box: navy, a 4 px light edge with notched corners, a hard navy drop. */
.box{position:relative;background:var(--navy);box-shadow:0 -4px 0 var(--edge),0 4px 0 var(--edge),-4px 0 0 var(--edge),4px 0 0 var(--edge),inset 0 0 0 2px var(--line),inset 0 -4px 0 2px #E8E6DC,8px 8px 0 var(--ink),4px 8px 0 var(--ink),8px 4px 0 var(--ink)}
/* The chunky button; .quiet is the secondary form; :active is pressed in. */
.btn{display:inline-block;min-height:48px;padding:0 20px;border:0;border-radius:0;background:var(--gold);color:var(--on-gold);font-size:18px;line-height:48px;text-transform:uppercase;letter-spacing:.14em;cursor:pointer;
box-shadow:0 -4px 0 var(--navy),0 4px 0 var(--navy),-4px 0 0 var(--navy),4px 0 0 var(--navy),inset -4px -6px 0 var(--gold-dk),inset 4px 4px 0 #E8B29E,6px 8px 0 var(--ink)}
.btn:active{transform:translate(4px,4px);box-shadow:0 -4px 0 var(--navy),0 4px 0 var(--navy),-4px 0 0 var(--navy),4px 0 0 var(--navy),inset 4px 6px 0 var(--gold-dk),2px 4px 0 var(--ink)}
.btn.quiet{background:var(--line);color:var(--edge);box-shadow:0 -4px 0 var(--navy),0 4px 0 var(--navy),-4px 0 0 var(--navy),4px 0 0 var(--navy),inset -4px -6px 0 #E8E6DC,inset 4px 4px 0 #B0AEA5,6px 8px 0 var(--ink)}
.btn.quiet:active{box-shadow:0 -4px 0 var(--navy),0 4px 0 var(--navy),-4px 0 0 var(--navy),4px 0 0 var(--navy),inset 4px 6px 0 #E8E6DC,2px 4px 0 var(--ink)}
.btn:focus-visible{outline:3px solid var(--sky);outline-offset:6px}
/* The step bar: one <i> per step, .on for the steps done. */
.steps{display:flex;gap:10px;height:16px}
.steps i{flex:1;background:var(--deep);box-shadow:0 -3px 0 var(--navy),0 3px 0 var(--navy),-3px 0 0 var(--navy),3px 0 0 var(--navy)}
.steps i.on{background:var(--gold)}
/* A tag on light, and a plate of navy behind text on a busy floor. */
.tag{display:inline-block;font-size:14px;line-height:22px;padding:0 8px;background:var(--edge);color:var(--navy);text-transform:uppercase;letter-spacing:.1em;box-shadow:2px 2px 0 var(--ink)}
.plate{display:inline-block;padding:2px 8px;background:#FAF9F5E0;color:var(--edge)}
/* Avatar colours: .c-* sets a sprite's tunic, .f-* fills a swatch. */
.c-red{color:var(--red)}.c-orange{color:var(--orange)}.c-yellow{color:var(--yellow)}.c-teal{color:var(--teal)}.c-sky{color:var(--sky)}.c-blue{color:var(--blue)}.c-pink{color:var(--pink)}.c-grey{color:var(--grey)}
.spark{animation:kit-blink 1s steps(2,jump-none) infinite}
@keyframes kit-blink{50%{opacity:.8}}
@media (prefers-reduced-motion:reduce){.spark{animation:none}}

:root{--gold-text:#AE461C;--awake:#C6613F;--awake-line:#AE461C;--on-gold:#141413;--field:#FFFFFF;--field-ink:#141413;--field-edge:inset 0 0 0 3px #141413;--tick:#141413;--tick-on-deep:#FAF9F5;--off:#D5D4CD;--off-ink:#666664}