/* Fossil Fever: one 400 x 225 pixel screen, scaled by game.js (--k = pixels per game pixel). */
html, body { margin: 0; height: 100%; background: #24242c; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
body { display: flex; flex-direction: column; align-items: center; justify-content: center; font-family: FFText, sans-serif; }
#frame { position: relative; line-height: 0; }
canvas { display: block; image-rendering: pixelated; image-rendering: crisp-edges; background: #000; }
#menu, #sure { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--k) * 8px); line-height: 1; }
#menu[hidden], #sure[hidden] { display: none; }
#sure { background: rgba(20, 24, 40, 0.75); }
#sure p { color: #f8f8f8; font-size: calc(var(--k) * 16px); margin: 0 calc(var(--k) * 16px); text-align: center; }
#menu button, #sure button {
  font-family: FFTitle, sans-serif; font-size: calc(var(--k) * 16px); color: #283040; cursor: pointer;
  min-width: calc(var(--k) * 150px); padding: calc(var(--k) * 6px) calc(var(--k) * 10px);
  background: #eef2fa; border: calc(var(--k) * 2px) solid #4868a0; box-shadow: inset 0 0 0 calc(var(--k) * 1px) #a8c0e8; border-radius: calc(var(--k) * 2px);
}
#menu button:focus, #menu button:hover, #sure button:focus, #sure button:hover { background: #ffe890; border-color: #c07818; box-shadow: inset 0 0 0 calc(var(--k) * 1px) #ffd040; outline: none; }
#menu button.primary { font-size: calc(var(--k) * 20px); }
#menu { padding-top: calc(var(--k) * 80px); box-sizing: border-box; }
/* Controls strip under the screen (computers only): key caps and what they do. */
#keys { display: flex; gap: calc(var(--k) * 14px); align-items: center; justify-content: center; height: calc(var(--k) * 14px); margin-top: calc(var(--k) * 2px);
  color: #c8ccd8; font-size: calc(var(--k) * 7px); line-height: 1; }
#keys[hidden] { display: none; }
#keys span { display: inline-flex; align-items: center; gap: calc(var(--k) * 2px); }
#keys kbd { font-family: inherit; color: #283040; background: #eef2fa; border: calc(var(--k) * 1px) solid #4868a0; border-radius: calc(var(--k) * 1.5px);
  padding: calc(var(--k) * 1.5px) calc(var(--k) * 2.5px); min-width: calc(var(--k) * 6px); text-align: center; }