/* Shared Unplayed / Started / Played chip. Used by Home and Games. */

.puzzle-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
  font-size: 0.78rem;
  font-weight: 650;
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: var(--ink);
}

.puzzle-status-icon {
  display: inline-flex;
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
}

.puzzle-status-svg {
  display: block;
  width: 16px;
  height: 16px;
}

.puzzle-status-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.puzzle-status.is-unplayed {
  color: var(--muted);
  font-weight: 550;
}

.puzzle-status.is-started {
  color: var(--cta, #C88708);
}

.puzzle-status.is-played {
  color: var(--matcha, #2F6B45);
}

.puzzle-status.is-played .puzzle-status-svg {
  color: var(--matcha, #2F6B45);
}

html[data-ds-theme="dark"] .puzzle-status.is-played .puzzle-status-svg path[stroke] {
  stroke: #241A14;
}

.puzzle-padlock {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 58%;
  height: 58%;
  color: var(--ink);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.puzzle-padlock-svg {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.92;
  filter: drop-shadow(0 0 1px var(--paper, #FFF6E4));
}

.home-row.is-locked,
.home-mini.is-locked,
.lib-item.is-locked {
  opacity: 0.78;
}

.puzzle-played-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 70%;
  height: 70%;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--matcha, #2F6B45);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.puzzle-played-mark-svg {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.95;
  filter: drop-shadow(0 0 1px #fff) drop-shadow(0 1px 2px color-mix(in srgb, #241A14 28%, transparent));
}

html[data-ds-theme="dark"] .puzzle-played-mark,
html.is-play[data-ds-theme="dark"] .puzzle-played-mark {
  background: none;
  box-shadow: none;
  color: color-mix(in srgb, var(--matcha, #8A9E6E) 78%, #d5e0c4);
}

html[data-ds-theme="dark"] .puzzle-played-mark-svg,
html.is-play[data-ds-theme="dark"] .puzzle-played-mark-svg {
  filter: drop-shadow(0 0 1px #1a1612) drop-shadow(0 1px 2px color-mix(in srgb, #000 40%, transparent));
}

html[data-ds-theme="dark"] .puzzle-played-mark-svg path[stroke],
html.is-play[data-ds-theme="dark"] .puzzle-played-mark-svg path[stroke] {
  stroke: #241A14;
}