/* Color swatch-grid picker (color-picker.js). Uses px-based sizing so it renders
   the same on the standalone auth pages and inside the in-game dialog system
   (which is container-query based). */

.color-swatch-grid {
  display: grid;
  /* Column count is set inline by color-picker.js — one column per palette
     level (4/6/8 for the 64/216/512 palettes) so the r,g,b cube reads as smooth
     blocks. This 8-col fallback only applies if the inline style is missing. */
  grid-template-columns: repeat(8, 1fr);
  gap: 3px;
  max-height: 300px;
  overflow-y: auto;
  padding: 4px;
  background-color: #0006;
  border-radius: 6px;
}

.color-swatch {
  aspect-ratio: 1 / 1;
  width: 100%;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 4px;
  cursor: pointer;
  position: relative;
  transition: transform 0.08s ease, border-color 0.08s ease;
}

/* Selectable swatches lift + outline on hover. Taken swatches are excluded so
   they don't read as pickable. */
.color-swatch:hover:not(:disabled):not(.color-swatch-taken) {
  transform: scale(1.15);
  border-color: #fff;
  z-index: 1;
}

.color-swatch-selected,
.color-swatch-selected:hover {
  border-color: #fff;
  box-shadow: 0 0 0 2px #000, 0 0 0 4px #fff;
  z-index: 2;
}

/* Taken colors: dimmed, with the owner's initial. Not selectable, but clickable
   to reveal the owner (help cursor); brightens slightly on hover to signal it. */
.color-swatch-taken {
  opacity: 0.35;
  cursor: help;
}

.color-swatch-taken:hover {
  opacity: 0.6;
}

/* Profile (name) window color section. */
#name-color-section {
  margin: 2cqh 7% 0;
}

.name-dialog-color-label {
  font-family: "Outfit", sans-serif;
  color: #fff;
  font-size: 3cqh;
  margin-bottom: 1cqh;
  text-align: center;
}

/* Owner tooltip shown when a taken swatch is clicked (appended to body). */
.color-owner-tooltip {
  position: fixed;
  z-index: 10002;
  background-color: #0a0c1e;
  color: #fff;
  border: 1px solid #ffffff88;
  border-radius: 6px;
  padding: 5px 10px;
  font-family: "Outfit", sans-serif;
  font-size: 16px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 2px 8px #0008;
}

.color-swatch-initial {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 0 2px #000, 0 0 2px #000;
  pointer-events: none;
}

/* Garden label-view controls: lower-right. Search sits above the toggle
   (first in DOM), the flower-icon toggle at the bottom. */
.garden-label-controls {
  position: absolute;
  right: 2%;
  bottom: 3%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1cqh;
  z-index: 10;
}

/* Flower-icon toggle button, styled to match the home button. */
.garden-label-btn {
  width: 7cqh;
  height: 7cqh;
  padding: 0;
  background: none;
  border: none;
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.garden-label-btn svg {
  height: 6cqh;
  fill: #fff;
}

.garden-label-btn:hover {
  filter: brightness(1.3);
}

/* Labels on: tint the flower + soft glow so the active state reads. */
.garden-label-btn.active svg {
  fill: #6db8ff;
  filter: drop-shadow(0 0 3px #6db8ff);
}

.garden-label-search {
  font-family: "Outfit", sans-serif;
  font-size: 2.4cqh;
  color: #fff;
  background-color: #0a0c1ecc;
  border: 1px solid #ffffff66;
  border-radius: 1cqh;
  padding: 1cqh 1.5cqh;
  width: 32cqw;
  max-width: 220px;
}

.garden-color-status {
  min-height: 3cqh;
  margin: 1cqh 7%;
  font-size: 2.6cqh;
  color: #ffd27f;
  text-align: center;
}

/* Read-out of the currently selected color. */
.color-picker-selected-readout {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

.color-picker-selected-swatch {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  border: 1px solid #fff;
}