:root {
  --ink: #2a2630;
  --paper: #f3e6c4;
  --accent: #4f9d4a;
}

* { box-sizing: border-box; }

html, body { margin: 0; height: 100%; }

body {
  background: #2a2630;
  display: grid;
  place-items: center;
  overflow: hidden;
  font-family: 'Press Start 2P', monospace;
  color: var(--ink);
}

canvas {
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

/* Every scene is a 160x90 grid; children are placed in % of it. */
.scene {
  position: relative;
  width: min(100vw, 177.78vh);
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.scene > canvas.bg { position: absolute; inset: 0; width: 100%; height: 100%; }

.layer { position: absolute; inset: 0; pointer-events: none; }

.thing {
  position: absolute;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  line-height: 0;
  cursor: pointer;
  pointer-events: auto;
}

.thing canvas { display: block; width: 100%; height: auto; }

/* No hint that the mushroom does anything. */
.secret, .secret:focus { cursor: default; outline: none; }

.raccoon.flip { transform: scaleX(-1); }
.raccoon.walking canvas { animation: bob 0.35s steps(1) infinite; }
.raccoon:not(.walking) canvas { animation: breathe 1.6s steps(1) infinite; }
.raccoon.asleep canvas { animation: breathe 2.8s steps(1) infinite; }
.raccoon.hop canvas { animation: hop 0.4s steps(4); }
.raccoon.stir canvas { animation: stir 0.4s steps(4); }

@keyframes hop { 25%, 50% { transform: translateY(-12%); } }
@keyframes stir { 25% { transform: translateX(-3%); } 75% { transform: translateX(3%); } }

.zzz {
  position: absolute;
  z-index: 100;
  font-size: clamp(7px, 1.2vw, 13px);
  color: #f3ecd2;
  pointer-events: none;
}

.zzz span { position: absolute; bottom: 0; opacity: 0; animation: drift 3s steps(12) infinite; }
.zzz span:nth-child(2) { animation-delay: 1s; }
.zzz span:nth-child(3) { animation-delay: 2s; }

@keyframes drift {
  0% { opacity: 0; transform: translate(0, 0); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(1.5em, -2.5em); }
}

@keyframes bob { 50% { transform: translateY(-5%); } }
@keyframes breathe { 50% { transform: translateY(-2%); } }

.bubble {
  position: absolute;
  z-index: 100;
  transform: translateX(-50%);
  max-width: 40%;
  padding: 0.7em 0.9em;
  background: #fff;
  border: 3px solid var(--ink);
  font-size: clamp(7px, 1.2vw, 13px);
  line-height: 1.6;
  text-align: center;
}

.bubble::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 9px;
  height: 9px;
  background: #fff;
  border-right: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  transform: translateX(-50%) rotate(45deg);
}

dialog {
  width: min(90vw, 420px);
  padding: 0;
  border: 4px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font-size: 11px;
  line-height: 1.9;
}

dialog::backdrop { background: rgb(20 16 30 / 0.6); }
dialog .body { padding: 1.4em 1.4em 0; }
dialog form { padding: 0 1.4em 1.4em; text-align: right; }
dialog h2 { margin: 0 0 1em; font-size: 13px; }
dialog .intro { margin: 0; opacity: 0.7; }

.detail { text-align: center; }
.detail > canvas { width: 50%; max-width: 160px; margin: 0 auto 1em; display: block; }
.detail p, .detail pre { text-align: left; }
.detail pre { font-family: inherit; white-space: pre-wrap; }

.case-open { display: flex; gap: 8%; justify-content: center; align-items: center; margin-bottom: 1em; }
.case-open canvas { width: 40%; }

.btn {
  display: inline-block;
  padding: 0.6em 0.9em;
  border: 3px solid var(--ink);
  background: var(--accent);
  color: #fff;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.corner { position: fixed; right: 10px; bottom: 8px; font-size: 8px; color: #fff; opacity: 0.6; }
.corner button { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }

.easel-board {
  position: relative;
  width: 100%;
  max-width: 288px;
  margin: 0 auto 1em;
  border: 3px solid var(--ink);
}

.easel-canvas {
  display: block;
  width: 100%;
  cursor: crosshair;
  touch-action: none;
}

.easel-canvas[data-tool="fill"], .easel-canvas[data-tool="pick"] { cursor: cell; }

.easel-board.grid::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to right, rgb(42 38 48 / 0.15) 1px, transparent 1px) 0 0 / 6.25% 100%,
    linear-gradient(to bottom, rgb(42 38 48 / 0.15) 1px, transparent 1px) 0 0 / 100% 6.25%;
}

.tools { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-bottom: 0.8em; }

.tool {
  padding: 0.4em 0.5em;
  border: 2px solid var(--ink);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 8px;
  cursor: pointer;
}

.tool.on { background: var(--ink); color: var(--paper); }
.tool:disabled { opacity: 0.35; cursor: default; }

.swatches { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 1em; }

.swatch {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 3px solid var(--ink);
  font: inherit;
  font-size: 10px;
  cursor: pointer;
}

.swatch.on { outline: 3px solid var(--accent); outline-offset: 2px; }

.actions { display: flex; gap: 8px; justify-content: center; }
.btn.quiet { background: var(--paper); color: var(--ink); }

/* Invisible click targets drawn over the canvas. */
.hit { aspect-ratio: 1; }

/* The room's lighting, set by the switch and dimmer. Bubbles stay readable above it. */
.shade {
  position: absolute;
  inset: 0;
  z-index: 95;
  background: #120e24;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s steps(4);
}

.dimmer { cursor: ns-resize; touch-action: none; }