/* When a swatch is focused (hovered or pinned), every other cell in the
   palette fades out so the picked colour is unmistakable. Works for both
   the Game blob grid and the flat swatch cards. */
.palette-display.pal-focused .pal-cell,
.palette-display.pal-focused .swatch {
  transition: opacity 0.12s ease, filter 0.12s ease;
}
.palette-display.pal-focused .pal-cell:not(.is-focused),
.palette-display.pal-focused .swatch:not(.is-focused) {
  opacity: 0.55;
  filter: grayscale(0.3) drop-shadow(0 1px 1px rgba(43, 30, 15, 0.12));
}
.palette-display.pal-focused .pal-cell.is-focused {
  z-index: 5;
  filter: brightness(1.05) drop-shadow(0 3px 5px rgba(43, 30, 15, 0.45));
}
.palette-display.pal-focused .swatch.is-focused {
  background: var(--sun);
  box-shadow: 2.5px 2.5px 0 var(--ink);
}

/* Palette House grid rendering ("Game" palette in its native shape).
   In-game each swatch is an organic paint-blob sitting on a cream "plate".
   We draw both as SVG paths — border-radius can't produce the bumpy edges
   of the real palette. */
.palette-display { display: flex; flex-wrap: wrap; gap: 0.4rem; }

/* Two side-by-side grids using explicit widths (not flex ratios) because
   Chrome and Safari disagreed when aspect-ratio'd cells lived inside
   flex:1 0 children — Chrome kept the intrinsic min width, so the side
   column overflowed onto the main grid. calc() widths sidestep that. */
.pal-game {
  display: flex; gap: 10px; align-items: stretch; flex-wrap: nowrap;
  width: 100%;
}
.pal-main {
  display: grid; grid-template-columns: repeat(11, minmax(0, 1fr));
  gap: 6px;
  width: calc((100% - 10px - 2px - 10px) * 11 / 12);
  flex: 0 0 auto; min-width: 0;
}
.pal-side {
  display: grid; grid-template-rows: repeat(7, 1fr);
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  width: calc((100% - 10px - 2px - 10px) / 12);
  flex: 0 0 auto; min-width: 0;
  padding-left: 10px;
  border-left: 2px dashed var(--ink);
  box-sizing: content-box;
}
.pal-cell {
  position: relative; aspect-ratio: 1; width: 100%;
  background: transparent; border: none; padding: 0;
  cursor: pointer;
  filter: drop-shadow(0 1px 1px rgba(43, 30, 15, 0.12));
  /* Suppress iOS Safari's long-press callout (copy / share / "save image")
     so our own long-press menu is the only thing that fires. Also disables
     text selection during the hold. */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
.pal-cell .pal-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.pal-cell .pal-plate {
  fill: #FFF6DC;
  stroke: rgba(43, 30, 15, 0.28);
  stroke-width: 2;
}
.pal-cell .pal-blob { fill: var(--chip); }
/* Hover uses filter only — no transforms — so neighbours never shift and
   the response feels instant. z-index lift keeps the shadow on top. */
.pal-cell:hover {
  z-index: 2;
  filter: brightness(1.08) drop-shadow(0 2px 3px rgba(43, 30, 15, 0.35));
}

/* Selected/used in design: outline the paint blob itself in dark ink and
   drop a checkmark in the corner. No fill change, no scale. */
.pal-cell.used {
  z-index: 3;
  filter: drop-shadow(0 2px 3px rgba(43, 30, 15, 0.32));
}
.pal-cell.used .pal-plate { stroke: var(--ink); stroke-width: 2.5; }
.pal-cell.used .pal-blob { stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }

/* R·C label overlay — visible only on used cells in Game mode. Sits
   centered on the blob so users can read it without opening a tooltip. */
.pal-rc {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem; font-weight: 600;
  color: var(--ink);
  text-shadow:
    0 0 2px #FFF6DC, 0 0 2px #FFF6DC,
    1px 0 0 #FFF6DC, -1px 0 0 #FFF6DC,
    0 1px 0 #FFF6DC, 0 -1px 0 #FFF6DC;
  pointer-events: none;
  z-index: 3;
  letter-spacing: -0.02em;
}
.pal-cell.used .pal-rc { display: flex; }

/* Sequential 1-based number badge for used cells when Numbers toggle is
   on. Top-left corner so it doesn't fight with the used-checkmark badge
   in the bottom-right. Only renders when the palette container has the
   `show-numbers` class, otherwise it stays out of the way. */
.pal-num {
  position: absolute;
  top: -4%; left: -4%;
  min-width: 44%; height: 44%;
  padding: 0 4px;
  background: var(--sun);
  border: 1.8px solid var(--ink);
  border-radius: 100px;
  display: none;
  align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem; font-weight: 700;
  color: var(--ink);
  pointer-events: none;
  box-shadow: 1px 1px 0 rgba(43, 30, 15, 0.45);
  z-index: 4;
  line-height: 1;
}
.palette-display.show-numbers .pal-cell.used .pal-num { display: flex; }

.pal-check {
  position: absolute;
  right: -6%; bottom: -6%;
  width: 44%; height: 44%;
  background: #2B1E0F;
  border: 2.5px solid #FFF6DC;
  border-radius: 50%;
  display: none;
  align-items: center; justify-content: center;
  pointer-events: none;
  box-shadow: 1px 1px 0 rgba(43, 30, 15, 0.45);
  z-index: 4;
}
.pal-check svg { width: 62%; height: 62%; display: block; }
.pal-cell.used .pal-check { display: flex; }

.pal-legend {
  font-family: 'Fredoka', sans-serif; font-size: 0.72rem; color: var(--ink-muted);
  display: flex; gap: 0.5rem; align-items: center; margin-top: 0.7rem;
  flex-basis: 100%;
}
/* Miniature of the .pal-cell used-state — same BLOB_PATH SVG + inked
   outline + check badge as a real cell, just scaled down. Rebuilt from
   SVG because outline/border don't clip to clip-path cleanly across
   browsers, which produced the earlier "broken rectangle" look. */
.pal-legend-chip {
  position: relative;
  width: 24px; height: 24px;
  flex-shrink: 0;
}
.pal-legend-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.pal-legend-plate {
  fill: #FFF6DC;
  stroke: var(--ink);
  stroke-width: 3.5;
}
.pal-legend-blob {
  fill: var(--teal);
  stroke: var(--ink);
  stroke-width: 3.5;
  stroke-linejoin: round;
}
.pal-legend-check {
  position: absolute;
  right: -8%; bottom: -8%;
  width: 50%; height: 50%;
  background: #2B1E0F;
  border: 1.8px solid #FFF6DC;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 1px 1px 0 rgba(43, 30, 15, 0.45);
}
.pal-legend-check svg { width: 65%; height: 65%; display: block; }

/* Flat swatch cards for the non-Game palettes. Styled as miniature
   "apartment windows" — rounded frame, colour block as the lit interior
   (with a top-edge gloss highlight), hex label reads as the name plate. */
.swatch {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  cursor: pointer; padding: 0.4rem 0.4rem 0.35rem;
  background: var(--paper); border: 1.5px solid var(--ink);
  border-radius: 14px; box-shadow: 1.5px 1.5px 0 var(--ink);
  transition: transform 0.22s var(--ease-back), box-shadow 0.22s var(--ease-back);
  min-width: 112px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
.swatch:hover { transform: translate(-2px, -2px) rotate(-1deg); box-shadow: 3px 3px 0 var(--ink); }
.swatch-head {
  display: flex; align-items: center; gap: 4px; width: 100%; justify-content: center;
}
.swatch-num {
  font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; font-weight: 700;
  color: var(--ink); background: var(--sun);
  border: 1.2px solid var(--ink); border-radius: 100px;
  min-width: 16px; height: 16px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
}
.swatch-box {
  width: 32px; height: 32px;
  border: 1.5px solid var(--ink); border-radius: 8px;
  /* Top-edge gloss + bottom-edge shade — makes each swatch read as a lit
     apartment window rather than a flat chip. Inset shadows don't affect
     the computed colour, just the perceived lighting. */
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.28),
    inset 0 -2px 0 rgba(43, 30, 15, 0.14);
}
.swatch-hex { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; font-weight: 600; color: var(--ink); }
.swatch-hsb { font-family: 'JetBrains Mono', monospace; font-size: 0.54rem; color: var(--ink-muted); line-height: 1; }
/* Mini 2-D picker preview — mirrors the in-game advanced picker UI
   (saturation/brightness square + hue strip) so users can aim by sight. */
.swatch-picker {
  width: 100px; height: 72px;
  border: 1.5px solid var(--ink); border-radius: 4px;
  display: block; background: var(--paper);
  overflow: visible;
}