/* Mech avatar customizer: same terminal palette as bt10x.css. */

#avatar-app {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 8px 16px;
  gap: 10px;
}

#avatar-head {
  width: 100%;
  max-width: 760px;
  text-align: center;
}

/* Language buttons, then the landing page link rightmost. */
#head-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

/* Sized like the language buttons, and as tall: #lang stretches those to
   its tallest (Hangul) line. */
#home-link {
  align-self: stretch;
  display: flex;
  align-items: center;
  padding: 3px 8px;
  font-size: 11px;
}

#avatar-head h1 {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.2em;
  color: var(--c-green);
}

.hint {
  margin: 4px 0 0;
  font-size: 12px;
}

#stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.part {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.part-label {
  color: var(--c-dim);
  font-size: 12px;
  text-align: center;
  white-space: pre-wrap;
}

.part.active .part-label {
  color: var(--c-green);
  font-weight: bold;
}

.carousel {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  overflow-x: auto;
  padding: 2px 4px 6px;
}

.avatar {
  font-family: var(--board-ff);
  font-size: var(--board-fs);
  line-height: var(--board-lh);
  background: transparent;
  border: none;
  color: var(--c-text);
  padding: 0 2px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  /* No true bold face covers the box-drawing/symbol glyphs: synthetic
     emboldening widens them past their advance and breaks the pre box. */
  font-synthesis: none;
}

.avatar .art {
  white-space: pre;
}

.avatar .cap {
  font-size: 11px;
  line-height: 1.35;
  color: var(--c-dim);
}

.avatar.side {
  opacity: 0.55;
}

.avatar.side.near {
  opacity: 0.75;
}

.avatar.side.far {
  opacity: 0.35;
}

.avatar:hover,
.avatar:focus-visible {
  opacity: 1;
  outline: 1px solid var(--c-yellow);
}

.avatar.selected {
  cursor: default;
}

.avatar.selected,
.avatar.selected .cap {
  color: var(--c-white);
}

.part.active .avatar.selected,
.part.active .avatar.selected .cap {
  color: var(--c-green);
}

.mid {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 4px;
  flex: none;
}

.step {
  font: inherit;
  color: var(--c-green);
  background: var(--c-button);
  border: 1px solid var(--c-line);
  border-radius: 4px;
  padding: 8px 10px;
  cursor: pointer;
  flex: none;
}

.step:hover,
.step:focus-visible {
  background-color: var(--cb-green);
  color: var(--c-white);
  border-color: var(--c-green);
  outline: none;
}

.step:focus-visible {
  border-color: var(--c-yellow);
  box-shadow: 0 0 0 2px var(--cb-yellow);
}

#out-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* Slot map: the final avatar with one labelled box per override slot
   (layout in avatar.slotmap.ts). Everything sits on one character grid, so
   connectors, boxes and the avatar stay aligned. 0.6em is the font's advance:
   the map shrinks to fit 36 columns on narrow screens. */
#slotmap {
  display: grid;
  grid-template-columns: repeat(var(--map-cols, 36), 1ch);
  grid-template-rows: repeat(var(--map-rows, 8), var(--board-lh));
  font-family: var(--board-ff);
  font-size: min(calc(var(--board-fs) * 2), calc((100vw - 32px) / var(--map-cols, 36) / 0.6));
  line-height: var(--board-lh);
  color: var(--c-dim);
  white-space: pre;
  font-synthesis: none;
}

#slotmap .map-line {
  pointer-events: none;
}

#slotmap .map-cell {
  color: var(--c-white);
  pointer-events: none;
}

#slotmap .map-cell.lit {
  color: var(--c-bg);
  background: var(--c-yellow);
}

#slotmap .map-box {
  font: inherit;
  line-height: inherit;
  white-space: pre;
  text-align: left;
  color: var(--c-dim);
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

#slotmap .map-box.overridden {
  color: var(--c-yellow);
}

#slotmap .map-box:hover,
#slotmap .map-box:focus-visible {
  color: var(--c-green);
  background: var(--cb-green);
  outline: none;
}

#slotmap .map-box.editing {
  color: var(--c-bg);
  background: var(--c-yellow);
}

/* Frame over each box's glyph cell; clicks pass through to the box. */
#slotmap .map-glyph {
  pointer-events: none;
  box-shadow: inset 0 0 0 1px #2c3c2c;
}

#slotmap .map-glyph.editing {
  box-shadow: inset 0 0 0 1px #6b6b2a;
}

/* Glyph picker: floats above the slot map (placed by avatar.picker.ts).
   Size knobs: --gp-width is the panel width (capped at the screen width),
   --gp-glyph is the grid glyph size, 0.9 of the slot map's glyphs. */
.glyph-picker {
  --gp-width: 100ch;
  --gp-glyph: calc(0.9 * min(calc(var(--board-fs) * 2), calc((100vw - 32px) / 36 / 0.6)));
  position: fixed;
  inset: auto;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  width: min(var(--gp-width), calc(100vw - 16px));
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 12px;
  color: var(--c-white);
  background: var(--c-panel);
  border: 1px solid var(--c-green);
  border-radius: 4px;
  font-family: var(--board-ff);
  font-synthesis: none;
  overflow: hidden;
}

.glyph-picker:not([open]) {
  display: none;
}

.glyph-picker::backdrop {
  background: transparent;
}

.gp-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  color: var(--c-green);
  font-weight: bold;
  letter-spacing: 0.15em;
}

.gp-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  color: var(--c-dim);
  font-size: 12px;
}

.gp-controls label {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}

.gp-controls select {
  min-width: 0;
  flex: 1 1 auto;
}

.gp-controls select,
.gp-controls input {
  font: inherit;
  font-size: 13px;
  color: var(--c-white);
  background: var(--c-button);
  border: 1px solid var(--c-line);
  border-radius: 4px;
  padding: 3px 6px;
}

.gp-controls input {
  width: 16ch;
}

.gp-grid {
  display: grid;
  font-size: var(--gp-glyph);
  /* Fixed-width cells packed tight; leftover width goes to the sides. */
  grid-template-columns: repeat(auto-fill, 1.1em);
  justify-content: center;
  /* Rows keep their own height when the grid is taller than its glyphs. */
  align-content: start;
  gap: 1px;
  overflow-y: auto;
  min-height: 0;
  /* Content-sized basis that shrinks to the panel's max-height: Safari sizes
     a 0% basis to nothing here, leaving less than one row on a phone. */
  flex: 1 1 auto;
  padding: 2px;
}

/* Touch screens: keep at least three rows of glyphs whatever the panel does
   (not on a landscape phone, where three rows would push out the buttons). */
@media (pointer: coarse) and (min-height: 500px) {
  .gp-grid:not(.gp-recent-grid) {
    min-height: calc(3 * 33px + 4px);
  }
}

.gp-cell {
  font: inherit;
  line-height: var(--board-lh);
  padding: 0.1em 0;
  min-height: 32px;
  color: var(--c-white);
  background: #141914;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
}

.gp-cell:hover {
  border-color: var(--c-green);
}

.gp-cell:focus {
  outline: none;
  border-color: var(--c-yellow);
  box-shadow: 0 0 0 1px var(--cb-yellow);
}

.gp-cell.current {
  color: var(--c-yellow);
}

.gp-cell.chosen {
  color: var(--c-bg);
  background: var(--c-yellow);
}

.gp-apply:disabled {
  opacity: 0.4;
  cursor: default;
}

.gp-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.gp-status {
  color: var(--c-dim);
  font-size: 12px;
  font-weight: normal;
  letter-spacing: normal;
}

/* The glyph in a box one avatar cell in size, so its fill of the cell shows. */
.gp-glyph {
  display: inline-block;
  width: 1ch;
  height: var(--board-lh);
  line-height: var(--board-lh);
  vertical-align: middle;
  box-shadow: inset 0 0 0 1px #2c3c2c;
}

.gp-cell.chosen .gp-glyph {
  box-shadow: inset 0 0 0 1px #6b6b2a;
}

.gp-recent {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-top: 1px solid var(--c-line);
  padding-top: 4px;
}

.gp-recent[hidden] {
  display: none;
}

.gp-recent-label {
  color: var(--c-dim);
  font-size: 12px;
}

.gp-recent-grid {
  flex: none;
  overflow: hidden;
}

/* A hold pins, so it must not open the iOS callout. */
.gp-recent-grid .gp-cell {
  -webkit-touch-callout: none;
}

/* On touch a hold would also start a text selection; a mouse keeps drag-select for bulk copy. */
@media (pointer: coarse) {
  .gp-recent-grid .gp-cell {
    user-select: none;
    -webkit-user-select: none;
  }
}

.gp-cell.pinned {
  position: relative;
  border-color: #3a4a3a;
}

.gp-cell.pinned::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--c-yellow);
}

.gp-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* Phones: one row each for the controls and the buttons, so the glyph grid
   keeps the height. */
@media (max-width: 480px) {
  .gp-controls {
    flex-wrap: nowrap;
  }
  .gp-controls label:first-child {
    flex: 1 1 0;
  }
  .gp-controls select {
    width: 100%;
  }
  .gp-controls input {
    width: 9ch;
  }
  .glyph-picker .gp-buttons {
    flex-wrap: nowrap;
    gap: 4px;
  }
  .glyph-picker .gp-buttons .link-button {
    padding: 5px 8px;
    white-space: nowrap;
  }
}

#parts {
  text-align: center;
  color: var(--c-dim);
  font-size: 12px;
  white-space: pre-wrap;
}

#actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* One row per group: the creator's own actions, then the gallery links. */
.action-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}

/* HTML snippet panel: same look as the glyph picker, centred. */
#snippet-panel {
  width: min(80ch, calc(100vw - 16px));
  padding: 8px 12px;
  color: var(--c-white);
  background: var(--c-panel);
  border: 1px solid var(--c-green);
  border-radius: 4px;
}

#snippet-panel[open] {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#snippet-panel::backdrop {
  background: rgb(0 0 0 / 0.5);
}

#snippet-panel .hint {
  margin: 0;
}

#snippet-code {
  width: 100%;
  min-height: 10em;
  resize: vertical;
  padding: 6px;
  color: var(--c-white);
  background: #000;
  border: 1px solid var(--c-dim);
  font: 12px / 1.3 var(--board-ff, monospace);
  white-space: pre-wrap;
  word-break: break-all;
}