/* ===========================================================================
   Locked cosmetics - how an unearned item looks in Settings.
   ---------------------------------------------------------------------------
   Paired with js/unlock-ui.js, which adds .uk-locked and swaps the visible word
   for a price. This file does the half that has to be CSS: killing the preview.

   THE PREVIEWS ARE HIDDEN, NOT RESTYLED. A pawn or wall swatch gets its whole
   look from a class in the piece registry (.pp-heirloom, .pw-marble), so any
   attempt to tone one down still draws the item - a greyscale marble wall is
   still recognisably a marble wall. `visibility: hidden` on the swatch and a
   padlock drawn in its place is the only version that actually keeps the
   secret, and it holds no matter what gets added to piece-themes.css later.

   Themes are the one case that can be recoloured instead of hidden: .theme-
   preview paints from --a/--b/--e, which unlock-ui.js strips from the inline
   style, so the neutral values below take over and the slab reads as an empty
   socket rather than a missing element.

   This file is loaded on its own rather than folded into styles.css so the
   feature can be dropped in or pulled out in one line.
   =========================================================================== */

:root {
  --uk-slab: #6f6c66;          /* the neutral a locked item washes to */
  --uk-slab-edge: #58554f;
  --uk-ink: #9a958c;
}

/* ---- the control as a whole ---------------------------------------------- */
.uk-locked {
  cursor: not-allowed;
  color: var(--uk-ink);
  opacity: .85;                /* not lower: it still has to read as a slot */
}
/* No hover affordance - the stock rules lift and tint on hover, which promises
   a click that is not coming. */
.uk-locked:hover {
  background: transparent;
  transform: none;
}
.theme-swatch.uk-locked:hover { background: transparent; }
.seg-btn.uk-locked:hover { background: transparent; color: var(--uk-ink); }

/* ---- the swatch ---------------------------------------------------------- */
/* Themes: an empty socket in the neutral, no longer the board it stands for. */
.theme-swatch.uk-locked .theme-preview {
  --a: var(--uk-slab);
  --b: var(--uk-slab);
  --e: var(--uk-slab-edge);
  background: repeating-linear-gradient(
    -45deg, rgba(255,255,255,.045) 0 5px, transparent 5px 10px), var(--uk-slab);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.28);
}

/* Pawns and walls: gone. See the note at the top of the file for why these are
   hidden rather than toned down.

   `visibility`, NOT `display: none`, and not a display change on the button
   either. A hidden box still occupies its space, so a locked button is the
   exact size and internal layout of an unlocked one - which is what stops the
   segmented row from re-flowing, and its neighbours from changing height, the
   moment a rank-up swaps one back. The empty slot left behind is the point:
   there is visibly something here, and it is visibly not yours yet. */
.seg-btn.uk-locked .pp,
.seg-btn.uk-locked .pw { visibility: hidden; }

/* ---- the price ----------------------------------------------------------- */
/* What replaces the name. The rank it costs is in the title, never here - the
   number is the motivation, the item stays the surprise. */
.uk-price {
  display: inline-flex; align-items: center; gap: 4px;
  font-variant-numeric: tabular-nums;
  font-weight: 650;
  letter-spacing: .01em;
  color: var(--uk-ink);
  white-space: nowrap;
}
.uk-lock-ico { flex: none; opacity: .9; }
.uk-price-unit { font-weight: 500; opacity: .72; font-size: .92em; }

/* In the theme grid the price stands where the theme's name was, so it takes
   that slot's type size rather than the button's. */
.theme-swatch.uk-locked .theme-name { color: var(--uk-ink); }

/* ---- a locked settings row (the board-effect switches) ------------------- */
.settings-row.uk-locked-row { cursor: not-allowed; }
.settings-row.uk-locked-row .toggle {
  opacity: .4;
  pointer-events: none;        /* the capture handler refuses it too; this is
                                  so it never even looks pressable */
}
.settings-row.uk-locked-row .settings-hint-text { color: var(--uk-ink); opacity: .8; }

/* ---- refusal ------------------------------------------------------------- */
/* The answer to clicking a locked item. Short, no colour change, no message
   that has to be dismissed - the padlock already said why. */
@keyframes uk-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-3px); }
  40% { transform: translateX(3px); }
  60% { transform: translateX(-2px); }
  80% { transform: translateX(2px); }
}
.uk-shake { animation: uk-shake .28s ease; }

@media (prefers-reduced-motion: reduce) {
  .uk-shake { animation: none; }
}