:root {
  --bg: #d9dde3;
  --shell: #f4f5f7;
  --bezel: #1d2026;
  --text: #4a5058;
  --grid: #e1e4e8;
  --paper: #fcfcfc;
  --s: 2; /* screen scale, set by app.js to fit the window */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  /* The white grid of the DS home screen. */
  background-color: var(--paper);
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 16px 16px;
  color: var(--text);
  font: 13px/1.4 system-ui, sans-serif;
}

body {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 16px env(safe-area-inset-bottom);
}

/* The DS top bar: name, time, date and battery, drawn by app.js. */
#statusbar {
  position: sticky;
  top: 0;
  z-index: 1;
  display: block;
  width: calc(100% + 32px);
  margin: 0 -16px 8px;
  height: 24px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

header h1 {
  margin: 4px 0 8px;
  line-height: 0;
}

header img {
  height: clamp(44px, 9vh, 76px);
  width: auto;
  /* A thin dark edge keeps the light silver letters off the white grid. */
  filter: drop-shadow(0 0 0.5px #3d4046) drop-shadow(0 0 0.5px #3d4046) drop-shadow(0 1px 1px rgb(0 0 0 / 0.25));
}

.ds {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: calc(6px * var(--s));
  background: var(--shell);
  border-radius: calc(8px * var(--s));
  box-shadow: 0 2px 0 #b9bec6, 0 8px 24px rgb(0 0 0 / 0.12);
}

.ds canvas {
  display: block;
  width: calc(256px * var(--s));
  height: calc(192px * var(--s));
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  border: calc(3px * var(--s)) solid var(--bezel);
  border-radius: calc(2px * var(--s));
  box-sizing: content-box;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.hinge {
  height: calc(10px * var(--s));
}

footer {
  margin-top: 10px;
  text-align: center;
  font-size: 12px;
}

footer p { margin: 2px 0; }

@media (pointer: coarse) {
  footer p:first-child { display: none; }
}

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