/* Square, and small enough to leave room for the arrow pad on touch screens. */
.field {
  display: block;
  width: min(100%, max(240px, calc(100dvh - 290px)));
  aspect-ratio: 1;
  margin: 0 auto;
  border: 2px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--surface);
  touch-action: none;
}
.time { min-width: 2.6em; font-variant-numeric: tabular-nums; }

.dpad {
  display: grid;
  grid-template-areas: ". up ." "left down right";
  grid-template-columns: repeat(3, 68px);
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}
.dpad button {
  height: 54px;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  background: var(--surface);
  color: var(--muted);
  font-size: 1.1rem;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
.dpad button:active { background: var(--surface-2); color: var(--text); }
.dpad [data-dir="up"] { grid-area: up; }
.dpad [data-dir="left"] { grid-area: left; }
.dpad [data-dir="down"] { grid-area: down; }
.dpad [data-dir="right"] { grid-area: right; }

@media (pointer: coarse) {
  .field { width: min(100%, max(240px, calc(100dvh - 420px))); }
}
@media (pointer: fine) {
  .dpad { display: none; }
}