/* Layout for the square-beach widget. Additive, and deliberately thin: the
   palette (--v1 … --v4), the hatch fills, the carts, the chips, the stepper and
   the status box are all reused from hotelling-n.css and hotelling.css, neither
   of which this file touches. Only what is genuinely new to two dimensions
   lives here. */

.d2-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
}

.d2-board {
  flex: 0 1 320px;
  min-width: 220px;
}

.d2-side {
  flex: 1 1 240px;
  min-width: 220px;
}

/* The square is the control: tap or drag anywhere in it to move your cart.
   touch-action keeps a drag from scrolling the page on a phone. */
#hd-beach {
  display: block;
  width: 100%;
  height: auto;
  cursor: pointer;
  touch-action: none;
  border-radius: 4px;
}

#hd-beach:focus { outline: none; }

#hd-beach:focus-visible {
  outline: 2px solid var(--v1);
  outline-offset: 3px;
}

/* A hairline between neighbouring territories, so touching cells of different
   hue still read as two regions rather than one. */
.hd-cell {
  stroke: #fff;
  stroke-width: 1;
}

#hd-howto {
  font-size: 11px;
  fill: var(--muted, #666);
  font-family: inherit;
}

.d2-side .scoreboard {
  margin-top: 0;
  display: grid;
  gap: 6px;
  justify-items: start;
}

/* hotelling-n.css sizes its own reset button by id, so this one needs the same
   escape from the square 34px the stepper gives the − and + buttons. */
.stepper button#hd-reset {
  width: auto;
  padding: 0 12px;
  font-size: 0.85rem;
  margin-left: auto;
}