/*
 * The two things a finger cannot otherwise reach.
 *
 * Throwing the peluche is bound to the right button and to Space, and pausing to P — so on
 * a phone the one way to steer him and the one way to stop were both simply unreachable.
 * Restart is deliberately not here: it lives in the pause panel, because an always-visible
 * restart under a thumb is one mis-tap away from throwing a run away.
 *
 * Present in the markup for everyone and revealed only for a coarse pointer, so there is no
 * second layout to keep in sync — just a display switch.
 */
.controls {
  display: none;
}

body[data-pointer="coarse"] .controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  /* Tight against the canvas: with the peluche gone this is the only control, and it wants
     to be beside the thing it interrupts rather than adrift at the bottom of the screen. */
  margin-top: 4px;
}

.controls__button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  /* 56px because a thumb is not a mouse pointer: this is the floor for a control you press
     while watching something else on the screen. */
  min-height: 44px;
  padding: 8px 26px;
  border: 0;
  border-radius: 12px;
  background: rgba(18, 13, 32, 0.9);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 600;
  /* A control the player hammers must not flash a selection highlight or fire the
     double-tap zoom that `touch-action: none` only suppresses on the canvas. */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.controls__button:disabled {
  opacity: 0.4;
}

/*
 * Landscape on a phone: height is the scarce thing, not width.
 *
 * The controls become a rail beside the stage rather than a bar under it, which buys the
 * canvas back its 66px. Done by re-areaing `.page` — the canvas element simply gets
 * narrower, so nothing ends up drawn over the house. `.menu` and `.briefing` are
 * `position: fixed` and so are out of flow entirely; they ignore this.
 */
@media (orientation: landscape) and (max-height: 560px) {
  body[data-pointer="coarse"] .page {
    display: grid;
    grid-template-areas:
      "hud hud"
      "stage controls"
      "log log";
    grid-template-columns: minmax(0, 1fr) auto;
    /* The stage row takes the slack; `minmax(0, ...)` is what lets it shrink below the
       canvas's own idea of how tall it would like to be. */
    grid-template-rows: auto minmax(0, 1fr) auto;
    align-items: stretch;
  }

  body[data-pointer="coarse"] .hud {
    grid-area: hud;
  }
  body[data-pointer="coarse"] .stage {
    grid-area: stage;
  }
  body[data-pointer="coarse"] .log {
    grid-area: log;
  }

  body[data-pointer="coarse"] .controls {
    grid-area: controls;
    flex-direction: column;
    justify-content: center;
    margin: 0 0 0 10px;
  }

  .controls__button {
    flex-direction: column;
    gap: 4px;
    min-width: 76px;
    padding: 10px 12px;
    font-size: 13px;
  }
}

/*
 * The hand: a pill on the top edge of the map.
 *
 * It used to be a band between the bar and the house, whose height had to be reserved
 * whether or not it held anything so that filling it could not shove the canvas down. Sitting
 * over the map instead makes that impossible by construction, and hands the canvas the band
 * back. It is the one thing allowed over the house, and it earns it by being transient and by
 * staying on the edge.
 */

.hand {
  display: block;
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  /* The strip of floor under it stays tappable; only the pill itself takes a touch. */
  pointer-events: none;
  z-index: 2;
}

.hand__slot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px 5px 6px;
  border: 0;
  border-radius: 999px;
  background: rgba(10, 8, 18, 0.82);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
  color: var(--ink);
  font-family: var(--font-body);
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.hand__art {
  display: block;
  width: 34px;
  height: 34px;
}

.hand__label {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.hand[data-hand="empty"] {
  visibility: hidden;
}

/* Carrying something: amber, because it is a live thing you are still holding. */
.hand[data-hand="held"] .hand__slot {
  background: rgba(60, 40, 8, 0.88);
  box-shadow: inset 0 0 0 1px rgba(255, 209, 102, 0.6);
}

.hand[data-hand="fixing"] .hand__slot {
  background: rgba(10, 40, 30, 0.88);
  box-shadow: inset 0 0 0 1px rgba(126, 224, 184, 0.5);
}

/*
 * A line of instruction in the room itself.
 *
 * Takes no pointer events at all: it sits over the middle of the board, and a tap meant for
 * the floor beneath it has to reach the floor.
 */
.notice {
  display: none;
}

body[data-pointer="coarse"] .notice {
  display: block;
  position: absolute;
  /*
   * Along the bottom, not across the middle.
   *
   * Dead centre is where the player throws the peluche and where the child then walks, so a
   * panel there covers the very thing it is describing — on a twelve-tile lesson room it
   * covers most of the floor. Low and centred keeps it in the room without standing in it.
   */
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  max-width: min(84%, 320px);
  padding: 10px 16px;
  border-radius: 12px;
  background: rgba(10, 8, 18, 0.86);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  color: #f2ecff;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms ease;
  z-index: 2;
}

body[data-pointer="coarse"] .notice--on {
  opacity: 1;
}

/* Landscape: the pause button becomes a rail beside the stage, since height is the scarce
   thing there and the canvas needs every pixel of it. */
@media (orientation: landscape) and (max-height: 560px) {
  body[data-pointer="coarse"] .controls {
    grid-area: controls;
    flex-direction: column;
    justify-content: center;
    margin: 0 0 0 10px;
  }

  .controls__button {
    min-width: 68px;
    padding: 8px 12px;
    font-size: 13px;
  }

  .hand__label {
    display: none;
  }

  body[data-pointer="coarse"] .notice {
    font-size: 14px;
    padding: 8px 14px;
  }
}