/* Falling sand. Playful freedoms per design-system.md section 10: the stage
   sets its own art direction, the page around it keeps the site system,
   focus visibility, keyboard operability and reduced motion. */

.fs {
  --fs-field: #0A0D12;
  --fs-sand: #E8C56B;
  --fs-water: #4FA8E8;
  --fs-wall: #8A8F98;
  --fs-fire: #FF7A3C;
  --fs-eraser: #2A3346;
}

.fs__about {
  max-width: var(--measure);
  color: var(--text-2);
}

/* -------------------------------------------------------- the toolbar */

.fs__toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s-4) var(--s-5);
  margin-block: var(--s-5) var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

.fs__group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

/* The chip is reinforcement. The word beside it carries the meaning, so
   nothing here depends on colour alone. */
.fs__chip {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid var(--line-control);
  flex: 0 0 auto;
}

.fs__chip--sand   { background: var(--fs-sand); }
.fs__chip--water  { background: var(--fs-water); }
.fs__chip--wall   { background: var(--fs-wall); }
.fs__chip--fire   { background: var(--fs-fire); }
.fs__chip--eraser { background: var(--fs-eraser); }

.fs__brush {
  min-width: 180px;
  flex: 1 1 180px;
}

.fs__brushValue {
  font-family: var(--font-mono);
  color: var(--accent);
}

.fs__slider {
  width: 100%;
  min-height: 44px;
  accent-color: var(--accent);
}

/* ---------------------------------------------------------- the stage */

.fs__canvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 200 / 140;
  background: var(--fs-field);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  /* One cell is one pixel in the backing store, so the browser must not
     smooth it away on the way up to the container width. */
  image-rendering: pixelated;
  /* The stage takes the drag itself, so the page keeps normal scrolling. */
  touch-action: none;
  cursor: crosshair;
}

.fs__status {
  margin-block-start: var(--s-3);
  color: var(--text-2);
  font-size: var(--t-sm);
}

/* ---------------------------------------------------------- the legend */

.fs__panel {
  margin-block-start: var(--s-5);
  padding: var(--s-4) var(--s-5);
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
}

.fs__panelTitle {
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-2);
  margin-block-end: var(--s-3);
}

.fs__keys {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--s-2) var(--s-5);
  color: var(--text-2);
  font-size: var(--t-sm);
}

.fs__keys kbd {
  display: inline-block;
  min-width: 24px;
  padding: 2px var(--s-2);
  border: 1px solid var(--line-control);
  border-radius: var(--r-control);
  background: var(--bg-0);
  color: var(--text-1);
  font-size: var(--t-xs);
  text-align: center;
}

.fs__note {
  margin-block-start: var(--s-3);
  color: var(--text-2);
  font-size: var(--t-sm);
}