@font-face{font-family:'Jost';src:url('fonts/jost-latin-wght-normal.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Jost';src:url('fonts/jost-latin-wght-italic.woff2') format('woff2');font-weight:100 900;font-style:italic;font-display:swap}
@font-face{font-family:'Courier Prime';src:url('fonts/courier-prime-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Courier Prime';src:url('fonts/courier-prime-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Courier Prime';src:url('fonts/courier-prime-latin-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}

/* Saltmarsh: the page is the stand the dollhouse sits on. Palette shared with game.js (PAL). */
:root{
  --salmon:#ee9f95;
  --duck-egg:#a9d6cb;
  --mustard:#e2b13c;
  --marsh-olive:#7f8f4e;
  --plum-ink:#4b2e3e;
  --powder:#b9cfe8;
  --title-face:'Jost','Futura','Century Gothic',sans-serif;
  --type-face:'Courier Prime','Courier New',Courier,monospace;
}

*{box-sizing:border-box}

html,body{margin:0;height:100%}

body{
  background:var(--duck-egg);
  color:var(--plum-ink);
  font-family:var(--type-face);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  padding:16px;
}

.stage{
  background:var(--salmon);
  border:3px solid var(--plum-ink);
  padding:10px;
  box-shadow:0 0 0 6px var(--duck-egg),0 0 0 8px var(--plum-ink);
  line-height:0;
}

#game{
  display:block;
  width:min(960px,calc(100vw - 56px));
  height:auto;
  aspect-ratio:960 / 600;
  background:var(--plum-ink);
  image-rendering:auto;
}

#controls{
  margin:0;
  max-width:980px;
  font-family:var(--title-face);
  font-weight:500;
  font-size:15px;
  text-align:center;
  line-height:1.9;
}

#controls span{margin:0 10px;white-space:nowrap}

kbd{
  font-family:var(--type-face);
  font-weight:700;
  font-size:13px;
  background:var(--mustard);
  color:var(--plum-ink);
  border:2px solid var(--plum-ink);
  border-radius:2px;
  padding:0 6px;
}

.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}