:root {
  --s: 2;               /* set by app.js: the console's scale */
  --status-h: 14;       /* set by app.js: status bar height in DS pixels */
  --page: #fcfcfc;      /* the DS system menu: off-white with a light grid */
  --page-grid: #e1e4e8;
  --body: #e9e9ee;
  --body-edge: #c9c9d1;
  --bezel: #141418;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background:
    linear-gradient(var(--page-grid) 1px, transparent 1px) 0 0 / 16px 16px,
    linear-gradient(90deg, var(--page-grid) 1px, transparent 1px) 0 0 / 16px 16px,
    var(--page);
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
}

body {
  display: grid;
  place-items: center;
  padding-top: calc(var(--s) * var(--status-h) * 1px);
}

/* The status bar across the top of the page; app.js sizes it to the window. */
#status {
  position: fixed;
  top: 0;
  left: 0;
  height: calc(var(--s) * var(--status-h) * 1px);
}

/* Your name and "Settings" in the status bar; app.js places them over their labels. */
.bar-button {
  position: fixed;
  top: 0;
  height: calc(var(--s) * var(--status-h) * 1px);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.bar-button:hover {
  background: rgba(0, 0, 0, 0.05);
}

.bar-button:focus-visible {
  outline: 2px solid #3a6fd8;
  outline-offset: -2px;
}

#console {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* The two halves of the console, the top screen's lid and the touch screen's base, each
   rounded more on its outside corners than where it meets the hinge. */
.half {
  padding: calc(var(--s) * 8px);
  background: linear-gradient(180deg, #f3f3f6, var(--body));
  border-radius: calc(var(--s) * 10px);
  box-shadow:
    inset 0 calc(var(--s) * -2px) 0 var(--body-edge),
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 calc(var(--s) * 3px) calc(var(--s) * 10px) rgba(0, 0, 0, 0.14);
  line-height: 0;
}

.lid {
  border-bottom-left-radius: calc(var(--s) * 4px);
  border-bottom-right-radius: calc(var(--s) * 4px);
}

.base {
  border-top-left-radius: calc(var(--s) * 4px);
  border-top-right-radius: calc(var(--s) * 4px);
}

.screen-frame {
  padding: calc(var(--s) * 3px);
  background: var(--bezel);
  border-radius: calc(var(--s) * 3px);
  line-height: 0;
}

canvas {
  display: block;
  width: calc(var(--s) * 256px);
  height: calc(var(--s) * 192px);
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  outline: none;
}

/* The hinge between the halves: a barrel at each side. */
.hinge {
  width: 100%;
  height: calc(var(--s) * 6px);
  display: flex;
  justify-content: space-between;
  padding: 0 calc(var(--s) * 6px);
}

.hinge span {
  width: calc(var(--s) * 28px);
  border-radius: calc(var(--s) * 1px);
  background: linear-gradient(180deg, var(--body-edge), #dcdce3, var(--body-edge));
}

/* For screen readers only: the live region that announces messages. */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}