@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;500&display=swap');

:root { color-scheme: light; }

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #f1f0eb;
}

body { font-family: "DM Mono", monospace; }

#stage, #art {
  width: 100%;
  height: 100%;
}

#stage { position: relative; isolation: isolate; }

#art { display: block; cursor: crosshair; }

.grain {
  position: absolute;
  inset: -40%;
  pointer-events: none;
  opacity: .1;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
  animation: grain .18s steps(2) infinite;
}

.label, .status, .hint {
  position: absolute;
  z-index: 2;
  margin: 0;
  color: #101010;
  pointer-events: none;
  letter-spacing: .12em;
  mix-blend-mode: difference;
  filter: invert(1);
}

.label {
  top: 24px;
  left: 28px;
  display: flex;
  flex-direction: column;
  font-size: clamp(14px, 1.5vw, 22px);
  font-weight: 500;
  line-height: .92;
}

.status {
  top: 24px;
  right: 28px;
  display: flex;
  gap: 18px;
  font-size: 10px;
}

.hint {
  bottom: 23px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-size: 9px;
  opacity: .7;
}

@keyframes grain {
  0% { transform: translate(1%, -1%); }
  25% { transform: translate(-2%, 2%); }
  50% { transform: translate(2%, 1%); }
  75% { transform: translate(-1%, -2%); }
  100% { transform: translate(1%, -1%); }
}

@media (max-width: 600px) {
  .label { top: 18px; left: 18px; }
  .status { top: 18px; right: 18px; }
  .hint { bottom: 17px; }
}