/* ==========================================================================
   Console — the side readout and the bottom control panel: direction pad,
   the program tape of draggable move chips, and the action buttons.
   ========================================================================== */

/* --- Icons ---------------------------------------------------------------
   Heroicons, drawn on a 24x24 grid. The outline set is stroked and unfilled,
   the solid set filled and unstroked; keeping those apart is what makes them
   read as Heroicons rather than as paths. Both take their colour from the
   control they sit in, so a disabled or pressed button carries its icon with
   it for free.
   ------------------------------------------------------------------------ */

.icon {
  width: 1em;
  height: 1em;
  flex: none;
}

.icon--outline {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
}

.icon--solid {
  fill: currentColor;
  stroke: none;
}

/* --- Action buttons ------------------------------------------------------ */

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-2);
  min-width: 7.5rem;
  padding: var(--gap-2) var(--gap-4);
  border-radius: var(--radius-sm);
  font-family: var(--font-pixel);
  font-size: .82rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--parchment);
  background: linear-gradient(180deg, var(--wood-lit) 0%, var(--wood) 100%);
  box-shadow:
    inset 0 0 0 2px var(--wood-deep),
    inset 0 2px 0 rgba(255, 255, 255, .26),
    0 var(--lift) 0 var(--wood-deep);
  transition: transform 80ms var(--ease-out), box-shadow 80ms var(--ease-out), filter 120ms var(--ease-out);
}

.btn:hover:not(:disabled) { filter: brightness(1.09); }

.btn:active:not(:disabled) {
  transform: translateY(var(--lift));
  box-shadow: inset 0 0 0 2px var(--wood-deep), inset 0 2px 0 rgba(255, 255, 255, .16), 0 0 0 var(--wood-deep);
}

.btn:disabled { filter: grayscale(.55) brightness(.88); opacity: .65; }

/* Pressed-in while it is on, so a toggle looks different from a button you
   merely clicked. */
.btn--icon[aria-pressed="true"] {
  color: var(--wood-deep);
  background: linear-gradient(180deg, var(--lit-gold), var(--gold));
  box-shadow: inset 0 0 0 2px var(--gold-deep), 0 0 0 var(--gold-deep);
  transform: translateY(var(--lift));
}

/* Square, and no room for words. For actions rare enough that a tooltip is
   enough and common enough to want out of the way. */
.btn--icon {
  min-width: 0;
  width: 2.6rem;
  padding: var(--gap-2);
}

/* A quieter button for the secondary things a screen offers: not the one you
   came to press, but not tucked away either. Lives here beside its siblings
   rather than in the sheet that first wanted it — a button variant belongs
   with the button. */
.btn--quiet {
  min-width: 0;
  color: var(--ink);
  background: var(--page);
  box-shadow:
    inset 0 0 0 2px var(--page-line),
    0 var(--lift) 0 var(--page-line);
}

.btn--quiet:active:not(:disabled) {
  box-shadow: inset 0 0 0 2px var(--page-line), 0 0 0 var(--page-line);
}

.btn--go {
  color: var(--wood-deep);
  background: linear-gradient(180deg, var(--lit-gold) 0%, var(--gold) 100%);
  box-shadow:
    inset 0 0 0 2px var(--gold-deep),
    inset 0 2px 0 rgba(255, 255, 255, .5),
    0 var(--lift) 0 var(--gold-deep);
}

.btn--go:active:not(:disabled) {
  box-shadow: inset 0 0 0 2px var(--gold-deep), inset 0 2px 0 rgba(255, 255, 255, .3), 0 0 0 var(--gold-deep);
}

.btn--go[data-mode="stop"] {
  color: var(--lit-white);
  background: linear-gradient(180deg, var(--lit-coral) 0%, var(--berry) 100%);
  box-shadow:
    inset 0 0 0 2px var(--berry-deep),
    inset 0 2px 0 rgba(255, 255, 255, .3),
    0 var(--lift) 0 var(--berry-deep);
}

/* The icon in a button is a shade smaller than its label, so the label still
   leads. */
.btn .icon { width: .95em; height: .95em; }

/* --- Battery --------------------------------------------------------------
   Ten blocks, one per move. Drawn as the thing itself rather than as a
   percentage bar: a block leaving IS a move gone, so there is nothing to work
   out from it.
   ------------------------------------------------------------------------ */

/* The battery lives in the masthead, with the rest of the status. Down in the
   console it was taking height from the only thing that wanted it — the plot. */
.masthead__power {
  display: grid;
  justify-items: center;
  gap: 4px;
}

/* Built like the buttons next to it: a heavy inner border, a lit top edge and
   a solid lip along the bottom. No blur anywhere — the whole UI is drawn as
   if it were stamped out of two-pixel outlines, and a soft shadow on one
   piece is the piece that looks wrong. */
.meter {
  position: relative;
  display: flex;
  gap: 3px;
  /* A touch more at the ends than between, so the run sits inside the case
     rather than pressing against it — but only a touch. At 9px the blocks
     read as floating in the middle of something bigger than they are. */
  padding: 5px 6px;
  /* A battery is a rounded thing. `--radius-sm` is 3px, which is the radius
     for a chip or a key — on a case this size it just reads as a rectangle
     someone forgot to finish. The cells inside get a matching curve, or the
     square corners inside a rounded case are the tell. */
  border-radius: 9px;
  background: linear-gradient(180deg, var(--parchment), var(--page));
  box-shadow:
    inset 0 0 0 3px var(--wood-deep),
    inset 0 2px 0 rgba(255, 255, 255, .5),
    0 var(--lift) 0 var(--wood-deep);
}

/* The terminal on the end, so it reads as a battery and not a progress bar. */
.meter::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 50%;
  translate: 0 -50%;
  width: 7px;
  height: 42%;
  border-radius: 0 4px 4px 0;
  background: var(--wood);
  box-shadow: inset 0 0 0 2px var(--wood-deep), 0 var(--lift) 0 var(--wood-deep);
}

.meter__cell {
  width: 13px;
  height: 38px;
  /* Square in the middle, rounded only where the run meets the case. Ten
     separately rounded blocks read as ten objects; one rounded run reads as
     a charge level, which is what it is. */
  border-radius: 0;
  /* An empty slot, not an absence. The meter starts full, so what you notice
     is blocks LEAVING, and a slot you can see is what makes that a departure
     rather than a bar getting shorter. */
  background: color-mix(in srgb, var(--wood-deep) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--wood-deep) 22%, transparent);
  transition: background 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}

/* Above 70%, 30-70%, at or below 30%. Every lit block takes the colour of the
   whole, because the battery has one condition, not ten. Each is a little
   pressed key in its own right: lit along the top, banded dark at the foot. */
.meter__cell:first-child { border-radius: 4px 0 0 4px; }
.meter__cell:last-child  { border-radius: 0 4px 4px 0; }

/* Flat. The case is the thing with depth; the charge inside it is just fill,
   and giving every block its own lit edge made ten little buttons sitting in
   a tray. A hairline is enough to keep them separate. */
.meter__cell[data-on="true"] {
  box-shadow: inset 0 0 0 1px rgba(58, 36, 21, .26);
}

.meter[data-level="high"] .meter__cell[data-on="true"] { background: var(--charge); }
.meter[data-level="mid"]  .meter__cell[data-on="true"] { background: var(--charge-low); }
.meter[data-level="low"]  .meter__cell[data-on="true"] { background: var(--charge-out); }

.meter[data-empty="true"] {
  box-shadow:
    inset 0 0 0 3px var(--charge-out),
    inset 0 2px 0 rgba(255, 255, 255, .35),
    0 var(--lift) 0 var(--berry-deep);
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: .45; }
}

/* The last block worth having, flashing. */
.meter[data-level="low"] .meter__cell[data-last="true"] {
  animation: pulse 900ms var(--ease-out) infinite;
}

.meter__note {
  margin: 0;
  font-family: var(--font-pixel);
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.meter[data-empty="true"] + .meter__note { color: var(--charge-out); }