/* FreeRTOS car demo — gantt, arena, remote pad */

.chart--gantt {
  block-size: 200px;
}

.arena {
  inline-size: 100%;
  block-size: auto;
}

.arena__wall {
  fill: none;
  stroke: var(--c-line-strong);
}

.arena__obstacle {
  fill: var(--c-surface-2);
  stroke: var(--c-line-strong);
}

.arena__ray {
  stroke: var(--c-muted);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}

.arena__ray--front {
  stroke: var(--c-accent);
}

.arena__body {
  fill: var(--c-ink);
}

.arena__wheel {
  fill: var(--c-muted);
}

.arena__nose {
  fill: var(--c-accent-fill);
}

/* D-pad */
.pad {
  display: grid;
  grid-template-columns: repeat(3, 3.25rem);
  grid-template-rows: repeat(3, 3.25rem);
  gap: var(--s-2);
  justify-content: center;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.pad__btn {
  display: grid;
  place-items: center;
  border: var(--hair) solid var(--c-line-strong);
  border-radius: var(--radius);
  font-size: 1.25rem;
  transition: background-color 0.15s var(--ease-soft), color 0.15s var(--ease-soft), border-color 0.15s var(--ease-soft);
}

.pad__btn:hover {
  border-color: var(--c-accent);
}

.pad__btn.is-held {
  background: var(--c-accent-fill);
  border-color: var(--c-accent-fill);
  color: var(--c-accent-ink);
}

.pad__btn--up { grid-area: 1 / 2; }
.pad__btn--left { grid-area: 2 / 1; }
.pad__btn--stop { grid-area: 2 / 2; }
.pad__btn--right { grid-area: 2 / 3; }
.pad__btn--down { grid-area: 3 / 2; }