/* Minecraft Glyph Generator - tool specific styling.
   Minimal page: grid + Settings button + export buttons. Global options live in a Settings
   modal; clicking a filled cell opens a per-cell modal. */

/* ---- Actions row: Export / Settings / Clear all ---- */
.glyph-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  max-width: 720px;
  margin: 24px auto 0;
}

.glyph-actions .converter-button,
.glyph-actions .converter-button-secondary {
  flex: 1 1 200px;
  min-width: 0;
}

.glyph-actions .converter-button span,
.glyph-actions .converter-button-secondary span {
  white-space: nowrap;
}

/* ---- 16x16 grid ----
   Keeps a minimum width so cells never shrink below a tappable size; on narrow screens the
   wrapper scrolls horizontally. No inner lines: cells separate by their alternating background. */
.glyph-grid-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.glyph-grid {
  display: grid;
  grid-template-columns: repeat(16, 1fr);
  gap: 0;
  width: 100%;
  min-width: 800px;           /* 16 x ~50px: cells stay comfortably tappable */
  aspect-ratio: 1 / 1;        /* reserve the square before JS injects the 256 cells (avoids CLS) */
  margin: 0;
  border: 2px solid #1a1a1a;   /* black, square outer frame */
  overflow: hidden;
  background: #1a1a1a;
  --glyph-jc: center;
  --glyph-ai: center;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

.glyph-cell {
  position: relative;
  aspect-ratio: 1 / 1;
  border: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: var(--glyph-jc);
  align-items: var(--glyph-ai);
  background: #ffffff;
  cursor: pointer;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.12s ease, box-shadow 0.12s ease;
}

/* Checkerboard: the alternating background is what separates cells (neighbours alternate parity) */
.glyph-cell.glyph-cell--alt {
  background: #e2e8ef;
}

/* Mouse-over: a clear blue ring + tint (distinct from the orange selection ring) */
.glyph-cell:hover {
  box-shadow: inset 0 0 0 2px #1376b3;
  background: #e3f0fa;
  z-index: 1;
}

.glyph-cell.drag-over {
  box-shadow: inset 0 0 0 2px #3984a7;
  background: #d7ebf5;
}

.glyph-cell:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px #3984a7;
  z-index: 2;
}

/* Selected / focused cell: a bold, high-contrast orange ring that stands out against the
   white / silver checkerboard. */
.glyph-cell.is-selected {
  box-shadow: inset 0 0 0 3px #f97316;
  z-index: 3;
}

/* The placed image: native resolution, never rescaled by smoothing.
   Width/height set inline by JS as a percentage of the cell = natural / cellSize.
   The higher-specificity selector overrides the global .main-content article section img rule
   (which rounds corners 24px and adds a top margin). Glyphs are pixel art: square, no margin. */
.glyph-grid .glyph-cell img {
  display: block;
  flex-shrink: 0;
  margin: 0;
  border-radius: 0;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
  pointer-events: none;
}

/* Alignment: h-* and v-* classes on the grid drive the flex anchors via CSS vars */
.glyph-grid.h-left   { --glyph-jc: flex-start; }
.glyph-grid.h-center { --glyph-jc: center; }
.glyph-grid.h-right  { --glyph-jc: flex-end; }
.glyph-grid.v-top    { --glyph-ai: flex-start; }
.glyph-grid.v-middle { --glyph-ai: center; }
.glyph-grid.v-bottom { --glyph-ai: flex-end; }

/* ---- Caption under the grid ---- */
.glyph-summary {
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  color: #4b5563;
  font-weight: 600;
  margin: 16px 0 0;
}

/* Only at narrow widths does the 2-line placeholder / 1-line count swap change height and shove
   the actions row + FAQ + footer ~21px (real CLS on first fill / clear). Reserve two lines there
   (42px == 2 x line-height). Wider viewports never wrap, so they keep their natural 1-line height
   (no dead space above the buttons). */
@media (max-width: 560px) {
  .glyph-summary { min-height: 42px; }
}

.glyph-summary .glyph-summary-dim {
  color: #9ca3af;
  font-weight: 500;
}

.glyph-grid-hint {
  text-align: center;
  font-size: 13px;
  color: #6b7280;
  margin: 6px 0 0;
}

.glyph-scroll-note {
  display: none;
  text-align: center;
  font-size: 12px;
  color: #6b7280;
  margin: 8px 0 0;
}

@media (max-width: 820px) {
  .glyph-scroll-note {
    display: block;
  }
}

/* ---- Export modal tiles ---- */
/* Two-class selector so it beats the later `.glyph-modal { max-width: 560px }` regardless of order */
.glyph-modal.glyph-modal-narrow {
  max-width: 480px;
}

.glyph-export-section-title {
  display: block;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 14px;
}

.glyph-export-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.glyph-export-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 18px 12px;
  border: 2px solid #d1d5db;
  border-radius: 14px;
  background: #fff;
  color: #2c3e50;
  font-family: inherit;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.glyph-export-tile:hover {
  border-color: #3984a7;
  background: #f0f8ff;
}

.glyph-export-tile:focus-visible {
  outline: 2px solid #3984a7;
  outline-offset: 2px;
}

.glyph-export-tile svg {
  width: 30px;
  height: 30px;
  color: #3984a7;
}

.glyph-export-tile-title {
  font-size: 15px;
  font-weight: 600;
}

.glyph-export-tile-sub {
  font-size: 12px;
  color: #6b7280;
  font-family: Consolas, 'Roboto Mono', 'SF Mono', Monaco, 'Cascadia Code', 'Liberation Mono', 'Courier New', monospace;
}

.converter-button:disabled,
.converter-button-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.converter-button:disabled:hover {
  background-color: #3984a7;
  border-color: #d1d5db;
}

.converter-button-secondary:disabled:hover {
  background-color: #85898f;
  border-color: #a5a9ae;
}

/* ---- Status + cross-link ---- */
.glyph-status {
  min-height: 20px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  margin-top: 12px;
  color: #16a34a;
}

.glyph-status.is-error {
  color: #dc2626;
}

.stealer-cross-link {
  text-align: center;
  margin-top: 24px;
  font-size: 14px;
  color: #6b7280;
}

.stealer-cross-link a {
  color: #3984a7;
  text-decoration: none;
  font-weight: 500;
}

.stealer-cross-link a:hover {
  text-decoration: underline;
}

/* ---- Modals ---- */
.glyph-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(17, 24, 39, 0.55);
  overflow-y: auto;
}

.glyph-modal-overlay[hidden] {
  display: none;
}

.glyph-modal {
  background: #fff;
  border-radius: 20px;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px); /* dynamic viewport: avoids overflow under mobile browser chrome */
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  margin: auto;
}

/* The cell modal is a compact 2x2, so it can be narrower */
.glyph-modal-cell {
  max-width: 460px;
}

/* Settings top is a snug two-column block, so it does not need to be wide */
.glyph-modal-settings {
  max-width: 540px;
}

.glyph-modal-head {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: #fff;
  border-bottom: 1px solid #eef0f2;
  border-radius: 20px 20px 0 0;
}

.glyph-modal-head h3 {
  margin: 0;
  font-size: 20px;
  color: #2c3e50;
}

.glyph-modal-close {
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #f3f4f6;
  color: #6b7280;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-appearance: none;
  appearance: none;
}

.glyph-modal-close:hover {
  background: #e5e7eb;
  color: #2c3e50;
}

.glyph-modal-body {
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ---- Form fields (used inside the modals) ---- */
/* Fixed-column grids so inputs line up in a tidy grid instead of auto-fit reflow.
   Columns are top-aligned and the gap matches the button-row gap, so every column
   and the buttons beneath it share the same edges (like the pixel-tag config modal). */
.glyph-grid2,
.glyph-grid3 {
  display: grid;
  gap: 20px 16px;
  align-items: start;
}

.glyph-grid2 { grid-template-columns: 1fr 1fr; }
.glyph-grid3 { grid-template-columns: repeat(3, 1fr); }

.glyph-grid2 > *,
.glyph-grid3 > * { min-width: 0; }

.glyph-field {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.glyph-field-label {
  display: block;
  text-align: center;
  margin-bottom: 8px;
  font-weight: 600;
  color: #374151;
  font-size: 14px;
}

.glyph-input {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 2px solid #d1d5db;
  border-radius: 12px;
  background: #fff;
  color: #2c3e50;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  transition: border-color 0.2s ease;
}

.glyph-input:focus {
  outline: none;
  border-color: #3984a7;
}

/* Drag-to-scrub number fields (Photoshop / Blockbench style): press and drag to adjust */
.glyph-input.scrubbable {
  cursor: ew-resize;
}

.glyph-input.scrubbable:focus {
  cursor: text;
}

body.scrubbing-value,
body.scrubbing-value * {
  cursor: ew-resize !important;
  user-select: none !important;
}

#pageByteInput {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-family: Consolas, 'Roboto Mono', 'SF Mono', Monaco, 'Cascadia Code', 'Liberation Mono', 'Courier New', monospace;
}

.glyph-hint {
  display: block;
  text-align: center;
  font-size: 12px;
  color: #6b7280;
  margin-top: 8px;
}

.glyph-hint.glyph-hint-warn {
  color: #b45309;
  font-weight: 500;
}

.glyph-advanced {
  margin-top: 4px;
  padding-top: 22px;
  border-top: 1px solid #e5e7eb;
}

.glyph-advanced-title {
  display: block;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: #9ca3af;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 18px;
}

/* Default alignment (settings): centered picker, set off with a divider above */
/* Settings modal top: two columns, text fields stacked on the left, alignment picker on the right */
.glyph-settings-top {
  display: grid;
  grid-template-columns: minmax(0, 240px) auto;
  justify-content: center;
  gap: 44px;
  align-items: center;
}

.glyph-settings-fields {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.glyph-settings-align {
  min-width: 0;
}

.glyph-settings-align .glyph-align-grid {
  width: 156px;
}

/* ---- Alignment picker (3x3), used in both modals ---- */
.glyph-align-field {
  align-items: center;
}

.glyph-align-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  width: 108px;
  margin: 0 auto;
}

.glyph-align-cell {
  aspect-ratio: 1 / 1;
  border: 2px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  position: relative;
  padding: 0;
  transition: border-color 0.15s ease, background-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}

.glyph-align-cell::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 7px;
  height: 7px;
  border-radius: 2px;
  background: #b8c0c8;
  transition: background-color 0.15s ease;
}

.glyph-align-cell:hover {
  border-color: #9ca3af;
}

.glyph-align-cell.is-active {
  border-color: #3984a7;
  background: #eaf3f8;
}

.glyph-align-cell.is-active::after {
  background: #3984a7;
}

/* An inherited (not per-cell) anchor is shown fainter than a custom one */
.glyph-align-cell.is-active.is-inherited {
  border-color: #a9c6d6;
  background: #f2f7fa;
}

.glyph-align-cell.is-active.is-inherited::after {
  background: #a9c6d6;
}

.glyph-align-cell:focus-visible {
  outline: 2px solid #3984a7;
  outline-offset: 2px;
}

/* ---- Cell modal specifics ---- */
/* 2x2 grid of label+control quadrants: Image | Alignment on top, Code point | Java below.
   Equal columns, each quadrant centered, so the row-1 and row-2 labels line up across. */
.glyph-cell-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px 24px;
  align-items: start;
}

.glyph-cell-grid > .glyph-field {
  align-items: center;
  text-align: center;
}

.glyph-cell-preview {
  position: relative;
  width: 140px;
  height: 140px;
  border: 2px solid #d1d5db;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  background-image:
    linear-gradient(45deg, #e6eaef 25%, transparent 25%, transparent 75%, #e6eaef 75%),
    linear-gradient(45deg, #e6eaef 25%, transparent 25%, transparent 75%, #e6eaef 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
}

/* Hover / focus reveals a "Replace" overlay so click-to-replace is discoverable */
.glyph-cell-preview::after {
  content: "Replace";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(44, 62, 80, 0.72);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  opacity: 0;
  transition: opacity 0.15s ease;
  pointer-events: none;
}

.glyph-cell-preview:hover::after,
.glyph-cell-preview:focus-visible::after { opacity: 1; }

.glyph-cell-preview:focus-visible {
  outline: 2px solid #3984a7;
  outline-offset: 2px;
}

.glyph-cell-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(44, 62, 80, 0.85);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.glyph-cell-remove svg { width: 13px; height: 13px; }

.glyph-cell-remove:hover { background: #d64545; }

.glyph-cell-preview img {
  display: block;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

.glyph-cell-preview.is-empty {
  color: #9ca3af;
  font-size: 13px;
  font-weight: 600;
  background-image: none;
  background: #f4f6f8;
}

.glyph-cell-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.glyph-cp-caption {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* The code point itself is the copy control: click to copy the character */
.glyph-cp-copy {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  padding: 7px 12px;
  border: 2px solid #d1d5db;
  border-radius: 12px;
  background: #f8fafc;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.glyph-cp-copy:hover {
  border-color: #3984a7;
  background: #eaf3f8;
}

.glyph-cp-copy:focus-visible {
  outline: 2px solid #3984a7;
  outline-offset: 2px;
}

#cellCodePoint {
  font-family: Consolas, 'Roboto Mono', 'SF Mono', Monaco, 'Cascadia Code', 'Liberation Mono', 'Courier New', monospace;
  font-size: 21px;
  font-weight: 700;
  color: #2c3e50;
  background: none;
  border: none;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}

.glyph-cp-copy .copy-icon {
  width: 16px;
  height: 16px;
  color: #6b7280;
  transition: color 0.15s ease;
}

.glyph-cp-copy:hover .copy-icon {
  color: #3984a7;
}

/* On successful copy the copy icon is swapped for a green checkmark */
.glyph-cp-copy .check-icon {
  display: none;
  width: 16px;
  height: 16px;
  color: #2f9e57;
}

.glyph-cp-copy.is-copied {
  border-color: #57c07f;
  background: #edf9f1;
}

.glyph-cp-copy.is-copied .copy-icon {
  display: none;
}

.glyph-cp-copy.is-copied .check-icon {
  display: block;
}

.glyph-cp-sub {
  font-size: 13px;
  color: #6b7280;
}

/* Alignment picker fills the left column so it lines up under the preview */
.glyph-cell-grid .glyph-align-grid { width: 140px; }

/* Cell position under the preview, mirroring the "Use global" link under the picker */
.glyph-image-field .glyph-cp-sub { margin-top: 10px; }

/* Code point pill + metrics centered in their quadrants, sized to their content */
.glyph-cell-grid .glyph-cp-copy { align-self: center; }
.glyph-cell-grid .glyph-cell-metrics { width: 100%; max-width: 200px; }

.glyph-reset-link {
  align-self: center;
  margin-top: 8px;
  background: none;
  border: none;
  padding: 2px 4px;
  color: #3984a7;
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  text-decoration: underline;
}

.glyph-reset-link:hover {
  color: #2d6a89;
}

/* Already on global: still visible (stable layout) but reads as the current state, not an action */
.glyph-reset-link.is-muted {
  color: #9ca3af;
  text-decoration: none;
  cursor: default;
}

.glyph-cell-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  align-items: start;
}

/* ---- Responsive ---- */
@media (max-width: 560px) {
  /* Stack the multi-column field grids so inputs never get cramped on phones */
  .glyph-grid2,
  .glyph-grid3,
  .glyph-settings-top {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 460px) {
  .glyph-actions .converter-button,
  .glyph-actions .converter-button-secondary {
    flex-basis: 100%;
  }
  /* Cell modal: stack preview / info / alignment / metrics into one centered column */
  .glyph-cell-grid {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .glyph-cell-info { align-items: center; }
  .glyph-cell-metrics { width: 100%; max-width: 240px; }
}