/*!
 * Minecraft Glyph Generator - nogard.dev
 * Copyright (c) 2026 Nogard. All rights reserved.
 *
 * Served to your browser so the tool can run. That is not a licence to copy, host,
 * rebrand, resell or redistribute this code, in whole or in part.
 * Licensing enquiries: https://nogard.dev/contact
 */
/* 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: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  max-width: 520px;
  margin: 24px auto 0;
}

.glyph-actions .converter-button,
.glyph-actions .converter-button-secondary {
  min-width: 0;
}

/* Wide screens: all four buttons fit in a single row */
@media (min-width: 720px) {
  .glyph-actions {
    grid-template-columns: repeat(4, 1fr);
    max-width: 720px;
  }
}

.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: #e6eaf0;
  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: #bec5cf;
}

/* Rings live on ::after (a positioned layer) so they sit ABOVE the placed glyph image. An inset
   box-shadow on the cell itself paints under child content, so a full-size glyph would hide it. */
.glyph-cell::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  transition: box-shadow 0.12s ease;
}

/* Mouse-over: a clear blue ring + tint (distinct from the orange selection ring) */
.glyph-cell:hover {
  background-image: linear-gradient(rgba(19, 118, 179, 0.14), rgba(19, 118, 179, 0.14));
  z-index: 1;
}
.glyph-cell:hover::after { box-shadow: inset 0 0 0 2px #1376b3; }

.glyph-cell.drag-over {
  background-image: linear-gradient(rgba(57, 132, 167, 0.22), rgba(57, 132, 167, 0.22));
  z-index: 2;
}
.glyph-cell.drag-over::after { box-shadow: inset 0 0 0 2px #3984a7; }

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

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

/* 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;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-appearance: none;
  appearance: none;
}

.glyph-modal-close svg {
  display: block;
  width: 15px;
  height: 15px;
}

.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;
}

/* Power-of-two toggle: a single checkbox row, centered to match the modal's other fields */
.glyph-pot-field {
  margin-top: 4px;
  text-align: center;
}
.glyph-check {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  cursor: pointer;
}
.glyph-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: #3984a7;
  cursor: pointer;
  flex: 0 0 auto;
}
.glyph-check .glyph-field-label {
  display: inline;
  margin: 0;
  cursor: pointer;
}

.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;
}

/* Second row within a section (e.g. Java: font name/namespace, then height/ascent/pack_format) */
.glyph-advanced-row {
  margin-top: 20px;
}

/* ---- Import modal drop zone ---- */
.glyph-modal.glyph-modal-import {
  max-width: 480px;
}
.glyph-drop-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 38px 24px;
  border: 2px dashed #cdd5df;
  border-radius: 16px;
  background: #f8fafc;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.glyph-drop-zone:hover,
.glyph-drop-zone:focus-visible {
  border-color: #3984a7;
  background: #f2f7fa;
  outline: none;
}
.glyph-drop-zone.is-dragover {
  border-color: #3984a7;
  background: #eaf3f8;
}
.glyph-drop-icon {
  width: 34px;
  height: 34px;
  color: #9aa3af;
}
.glyph-drop-zone:hover .glyph-drop-icon,
.glyph-drop-zone:focus-visible .glyph-drop-icon,
.glyph-drop-zone.is-dragover .glyph-drop-icon {
  color: #3984a7;
}
.glyph-drop-text {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #374151;
}
.glyph-drop-sub {
  font-size: 12px;
  color: #9ca3af;
  max-width: 320px;
  line-height: 1.5;
}
.glyph-import-status {
  text-align: center;
}
/* Collapse the status when empty (the common case) so the modal isn't padded out below the drop zone;
   it reappears (with the body's flex gap above it) only when an import message is shown. */
.glyph-import-status:empty {
  display: none;
}

/* Import "Unicode size" radio group (below the drop zone in the Import modal) */
.glyph-import-opts {
  text-align: center;
}
.glyph-import-opts-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  margin-top: 4px;
}
.glyph-radio {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  color: #374151;
  cursor: pointer;
}
.glyph-radio input[type="radio"] {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: #3984a7;
  cursor: pointer;
}
.glyph-import-opts .glyph-hint {
  margin-top: 10px;
}

/* 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: #e6eaf0;
  background-image:
    linear-gradient(45deg, #bec5cf 25%, transparent 25%, transparent 75%, #bec5cf 75%),
    linear-gradient(45deg, #bec5cf 25%, transparent 25%, transparent 75%, #bec5cf 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) {
  /* Compact modals on phones: tighten padding/gaps and keep the field grids multi-column (only the
     page + alignment row stacks) so the settings/cell modals don't become one long scroll. */
  .glyph-settings-top {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .glyph-modal-head { padding: 12px 16px; }
  .glyph-modal-body { padding: 16px; gap: 14px; }
  .glyph-input { padding: 9px 11px; }
  .glyph-field-label { margin-bottom: 5px; font-size: 13px; }
  /* the "Unicode size" heading needs more room above the (often stacked) radios than a field label */
  .glyph-import-opts .glyph-field-label { margin-bottom: 14px; }
  .glyph-grid2 { gap: 14px 10px; }
  .glyph-grid3 { gap: 14px 8px; }
  .glyph-advanced { padding-top: 15px; }
  .glyph-advanced-title { margin-bottom: 10px; }
  .glyph-advanced-row { margin-top: 12px; }
  .glyph-settings-align .glyph-align-grid { width: 132px; }
  /* Cell modal stays a 2x2 of quadrants (not stacked); shrink the preview + alignment picker to fit */
  .glyph-cell-grid { gap: 14px 12px; }
  .glyph-cell-preview { width: 116px; height: 116px; }
  .glyph-cell-grid .glyph-align-grid { width: 116px; }
}

@media (max-width: 460px) {
  .glyph-actions {
    grid-template-columns: 1fr;
  }
  /* Import size options: below the width where all three fit on one line, stack them vertically
     (centered group, left-aligned so the radios line up) rather than a ragged 2 + 1 wrap. */
  .glyph-import-opts-row {
    flex-direction: column;
    align-items: flex-start;
    width: fit-content;
    margin: 0 auto;
    gap: 10px;
  }
}

@media (max-width: 360px) {
  /* Very small phones: fall back to a single column for the cell-modal quadrants and the 2-up text fields */
  .glyph-cell-grid,
  .glyph-grid2 {
    grid-template-columns: 1fr;
  }
  .glyph-cell-grid { justify-items: center; text-align: center; }
  .glyph-cell-info { align-items: center; }
  .glyph-cell-metrics { width: 100%; max-width: 240px; }
}
/* ===== SUPPORT / COMMUNITY MODAL (after every export or copy) =====
   Same component as the tag generator's, on this tool's own glyph-modal shell. */
.support-modal { max-width: 440px; }
.support-modal-body { padding: 20px 24px 16px; text-align: center; }
.support-modal-lead { margin: 0 0 18px; color: #4b5563; font-size: 15px; line-height: 1.55; }
.support-modal-actions { display: flex; flex-direction: column; gap: 10px; }
.support-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 20px; border-radius: 9999px; font-weight: 600; font-size: 15px;
  color: #fff; text-decoration: none; cursor: pointer;
  transition: transform 0.12s ease, filter 0.15s ease;
}
.support-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.support-btn:hover { filter: brightness(1.06); }
.support-btn:active { transform: scale(0.98); }
.support-btn-donate { background: linear-gradient(135deg, #0d7ba7, #00a8cc); }
.support-btn-discord { background: linear-gradient(135deg, #5865f2, #7984f5); }
.support-modal-dismiss {
  margin-top: 6px; background: none; border: none; color: #9ca3af;
  font-size: 14px; cursor: pointer; padding: 6px; font-family: inherit;
}
.support-modal-dismiss:hover { color: #6b7280; text-decoration: underline; }

/* This tool's dialog chrome is its own (20px radius, 20px heading, roomier head). The support modal
   is the SAME component on all three tools, so pin its shell to the shared look instead of letting
   the local chrome restyle it. Two-class selectors where the local rule is also two-class. */
.glyph-modal.support-modal { max-width: 440px; border-radius: 18px; }
.support-modal .glyph-modal-head { padding: 12px 20px; border-bottom: 1px solid #eee; border-radius: 18px 18px 0 0; }
.support-modal .glyph-modal-head h3 { font-size: 17px; color: #333; }
.support-modal .glyph-modal-close { width: 32px; height: 32px; }