/* Palette colours only: black, white, silver #c0c0c0, grey #808080, blue #0000ff, dark red #800000. */
:root{
  --snow:#ffffff;
  --snow-shade:#c0c0c0;
  --ink:#000000;
  --grey:#808080;
  --silver:#c0c0c0;
  --accent:#0000ff;
  --danger:#800000;
  font-family: "Lucida Console","Consolas","Courier New",monospace;
}
*{box-sizing:border-box;}
html,body{margin:0;height:100%;width:100%;background:#000000;overflow:hidden;}
body{
  color:var(--ink);
}
#app{
  width:100vw;height:100vh;height:100dvh;
  display:flex;flex-direction:column;gap:0;
  background:#000000;
}

/* The race HUD is drawn on the canvas (render/hud.js); this is only its hidden text for screen readers, and the
   same hiding for the real text behind each pixel-font title (ui.js) */
.sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

#stage{position:relative;flex:1 1 auto;min-height:0;line-height:0;background:#fff;overflow:hidden;}
#screen{
  display:block;width:100%;height:100%;
  image-rendering:pixelated;image-rendering:crisp-edges;
  background:#fff;touch-action:none;cursor:crosshair;
}

/* Overlays */
.overlay{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  line-height:1.4;
}
.overlay.hidden{display:none;}
/* the "press R again" prompt: a small card near the top, over the slope, that does not take clicks */
.toast{position:absolute;left:50%;top:14%;transform:translateX(-50%);padding:.5em 1em;background:#fff;color:#000;
  border:2px solid #000;box-shadow:3px 3px 0 #808080;font-weight:bold;font-size:14px;pointer-events:none;z-index:5;}
.toast.hidden{display:none;}
#pause{background:rgba(255,255,255,.5);cursor:pointer;}
/* the demo race behind the menu is washed grey, so the white title card stands out against it */
#menu{background:rgba(128,128,128,.45);}
#error,#file-notice{background:rgba(255,255,255,.65);}

/* A panel: white, a black outline and a hard grey shadow, like the HUD's panels */
.panel{
  background:#ffffff;border:2px solid #000000;
  padding:18px 22px;text-align:center;max-width:90%;max-height:96%;overflow:auto;
  box-shadow:6px 6px 0 var(--grey);
}
/* a pixel-font title (an image; its real text is hidden beside it) */
.panel h1,.panel h2{margin:.1em 0 .45em;font-size:22px;line-height:1;color:var(--accent);}
.panel h1 canvas,.panel h2 canvas{display:block;margin:0 auto;image-rendering:pixelated;max-width:100%;}
.panel p{margin:.4em 0;}
.panel .tag{margin:.2em 0 1em;color:var(--grey);}
.panel .warn{margin:.8em 0 0;color:var(--danger);font-size:12px;}
.panel .privacy{margin:.4em 0 .7em;color:var(--ink);font-size:13px;line-height:1.4;}
.keys{list-style:none;margin:.6em 0 14px;padding:0;text-align:center;font-size:13px;}
.keys li{padding:2px 0;}
.keys b{color:var(--accent);}

button{
  font-family:inherit;font-size:15px;font-weight:bold;cursor:pointer;color:var(--ink);
  background:#ffffff;border:2px solid #000000;padding:7px 16px;margin:4px 6px 6px 4px;
  box-shadow:3px 3px 0 var(--grey);
}
button:hover{background:var(--silver);}
button:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--grey);}
button:focus-visible{outline:3px solid var(--accent);outline-offset:2px;}


/* How to play (FLO-01): a taller panel that scrolls inside the window; a picture beside each short topic */
#guide{background:rgba(128,128,128,.45);}
.guide{max-width:min(560px,94%);text-align:left;font-size:13px;line-height:1.4;}
.guide h2{text-align:center;}
.guide h3{margin:1em 0 .3em;font-size:14px;color:var(--accent);border-bottom:1px solid var(--silver);}
.guide .keys{text-align:left;margin:.3em 0 .6em;}
.guide .topic{display:flex;align-items:center;gap:10px;margin:.3em 0;}
.guide .topic p{margin:0;}
.guide .art{flex:none;image-rendering:pixelated;image-rendering:crisp-edges;}
.guide button{display:block;margin:12px auto 2px;}

/* About (FLO-04) */
#about{background:rgba(128,128,128,.45);}
.about{max-width:min(420px,94%);font-size:13px;line-height:1.4;}
.about h3{margin:1em 0 .2em;font-size:14px;color:var(--accent);border-bottom:1px solid var(--silver);text-align:center;}
.about .about-name{font-weight:bold;font-size:15px;}
.about button{margin-top:10px;}

/* Countdown + results */
#countdown{background:rgba(255,255,255,.22);pointer-events:none;}
#countdown .count-num canvas{display:block;image-rendering:pixelated;max-width:90vw;}
#res-list{text-align:left;font-size:14px;margin:.4em auto 1em;max-width:340px;}
#res-list li{padding:1px 0;white-space:pre;}
#res-list li.you{color:var(--danger);font-weight:bold;}
#res-gap{margin:.1em 0 .2em;font-weight:bold;color:var(--accent);}
#res-gap:empty,#res-best:empty{display:none;}
/* the human's race in four cells, two to a row */
#res-stats{list-style:none;margin:0 auto 1em;padding:0;max-width:340px;font-size:13px;
  display:grid;grid-template-columns:1fr 1fr;gap:2px 14px;text-align:left;}
#res-stats li{display:flex;justify-content:space-between;padding:2px 0;border-bottom:1px solid var(--silver);}
#res-stats b{color:var(--accent);}
#res-best{white-space:pre-line;margin:0 0 .8em;font-weight:bold;color:var(--danger);font-size:13px;line-height:1.5;}
#res-manual{display:block;width:100%;max-width:340px;box-sizing:border-box;margin:0 auto 1em;font-family:inherit;font-size:12px;
  line-height:1.4;resize:none;border:2px solid #000;padding:6px;}
#res-manual.hidden{display:none;}
/* a course opened from a shared link, and a warning when its version differs */
.shared{margin:0 0 .8em;white-space:pre-line;font-weight:bold;color:var(--accent);font-size:13px;line-height:1.5;}
.shared:empty{display:none;}
.swatch{display:inline-block;width:10px;height:10px;border:1px solid #000;margin-right:6px;vertical-align:middle;}

/* Touch controls */
#controls{
  display:flex;gap:6px;padding:6px;background:#000000;
}
#controls button{flex:1;margin:0;font-size:18px;padding:12px 0;min-width:0;min-height:44px;}
@media (max-width:480px){ #controls{gap:4px;padding:4px;} #controls button{font-size:13px;} }
/* the pause screen says what works on this device */
.for-touch{display:none;}
@media (hover:none), (pointer:coarse){ .for-keys{display:none;} .for-touch{display:block;} }
@media (hover:hover) and (pointer:fine){ #controls{display:none;} }