:root {
  --skin: #dcb099;
  --ink: #3b1511;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--skin);
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  overscroll-behavior: none;
}

/*
  The picture is a stack of full-screen layers. The browser's compositor
  blends them, which is much cheaper than blending on a canvas every frame.
  Bottom to top (see js/dom.js for what draws into each):

    #void      what you see through a cut
    #under     bugs seen through cuts, and the wound bed
    #skin      the skin texture, with holes where there are cuts
    #sil       soft shapes of the bugs under the skin   (multiplied in)
    #sil2      a copy of #sil as a faint highlight      (screen blended)
    #resting   bugs sitting still on the skin
    #moving    bugs on the skin that are moving; also receives the input
*/
.layer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

#void { background: radial-gradient(ellipse at 50% 50%, #5a1114 0%, #1e0405 100%); }
#sil  { mix-blend-mode: multiply; opacity: .5; }
#sil2 { mix-blend-mode: screen; opacity: .16; transform: translate(-1.5px, -1.5px); }

/* The top layer takes all input. touch-action: none stops the browser from
   scrolling or zooming while a finger is pushing bugs about. */
#moving {
  pointer-events: auto;
  touch-action: none;
}

/* Custom cursors only where there is a real pointer: a ring while hovering,
   a blade while the button is down. Touch screens never see them. */
@media (hover: hover) and (pointer: fine) {
  #moving {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><circle cx='16' cy='16' r='9' fill='none' stroke='%233b1511' stroke-width='1.6' opacity='.75'/><circle cx='16' cy='16' r='1.6' fill='%233b1511' opacity='.75'/></svg>") 16 16, default;
  }
  #moving:active {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><path d='M3 29 L22 8 L26 12 Z' fill='%23d8d4d0' stroke='%233b1511' stroke-width='1.4' stroke-linejoin='round'/><path d='M22 8 L30 2' stroke='%233b1511' stroke-width='2.4' stroke-linecap='round'/></svg>") 3 29, crosshair;
  }
}

/* The page is all canvas, so the heading is only for screen readers. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Shown only if the page is opened straight from disk (see index.html). */
.file-warning {
  position: fixed;
  inset: auto 16px 16px 16px;
  margin: 0;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--ink);
  color: #f1d9cb;
  font: 13px/1.5 ui-monospace, Menlo, Consolas, monospace;
  z-index: 10;
}