.sets-shell {
  --game-accent: var(--g-sets);
  --st-0: #d0465d;
  --st-1: #b88010;
  --st-2: #3468c8;
  --st-card: #ffffff;
  --st-card-line: #dcdcd8;
  --st-selected: #121212;
  --st-guide: #2f9e6e;
}
:root[data-theme='dark'] .sets-shell {
  --st-0: #f17e91;
  --st-1: #efc261;
  --st-2: #84b4ff;
  --st-card: #1e1e1e;
  --st-card-line: #333333;
  --st-selected: #f2f2f2;
  --st-guide: #4cc38a;
}
.sets-shell .shell-stage {
  padding: var(--space-2) var(--space-4) 0;
}
.sets-shell .shell-board-area {
  width: 100%;
}
.sets-shell .st-board-wrap {
  display: grid;
  width: min(
    460px,
    calc(100vw - 32px),
    calc((100dvh - 270px - (var(--rows, 4) - 1) * 8px) / var(--rows, 4) * 4.65 + 16px)
  );
  gap: var(--space-3);
  margin: 0 auto;
}
.sets-shell .st-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.sets-shell .st-card {
  position: relative;
  display: grid;
  aspect-ratio: 1.55;
  place-items: center;
  padding: 0;
  border: 1.5px solid var(--st-card-line);
  border-radius: 12px;
  background: var(--st-card);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.06);
  cursor: pointer;
  transition:
    transform 140ms ease-out,
    border-color 140ms ease-out,
    box-shadow 140ms ease-out;
}
.sets-shell .st-card:active {
  transform: scale(0.97);
}
.sets-shell .st-card.selected {
  border-color: var(--st-selected);
  box-shadow: 0 0 0 2px var(--st-selected);
  transform: translateY(-3px);
}
.sets-shell .st-card.guide {
  border-color: var(--st-guide);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--st-guide) 35%, transparent);
}
.sets-shell .st-card.found-flash {
  animation: st-found 700ms ease-out;
}
@keyframes st-found {
  30% {
    border-color: var(--st-guide);
    box-shadow: 0 0 0 4px var(--st-guide);
    transform: scale(1.04);
  }
}
.sets-shell .st-card.shake {
  animation: st-shake 320ms ease-out;
}
@keyframes st-shake {
  25% {
    transform: translateX(-4px);
  }
  50% {
    transform: translateX(4px);
  }
  75% {
    transform: translateX(-2px);
  }
}
.sets-shell .st-board.dealing .st-card {
  animation: st-deal 320ms ease-out both;
  animation-delay: calc(var(--i) * 25ms);
}
@keyframes st-deal {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.96);
  }
}
/* Symbols are sized from the card's width with an explicit aspect ratio. Safari cannot resolve a
   percentage height inside the button and would then fall back to the SVG default size. */
.sets-shell .st-symbols {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 7%;
}
.sets-shell .st-symbols svg {
  display: block;
  flex: none;
  width: 20%;
  height: auto;
  aspect-ratio: 60 / 100;
  overflow: visible;
}
.sets-shell .st-color-0 {
  color: var(--st-0);
}
.sets-shell .st-color-1 {
  color: var(--st-1);
}
.sets-shell .st-color-2 {
  color: var(--st-2);
}
.sets-shell .st-used {
  position: absolute;
  top: 4px;
  right: 5px;
  display: grid;
  min-width: 16px;
  height: 16px;
  place-items: center;
  border-radius: 8px;
  background: var(--mark-bg);
  color: var(--mark-ink);
  font-size: 10px;
  font-weight: 700;
}
/* Tray of found SETs: three mini cards per set, scrolling sideways. */
.sets-shell .st-tray {
  display: flex;
  min-height: 44px;
  align-items: center;
  gap: var(--space-3);
}
.sets-shell .st-tray-count {
  flex: none;
  color: var(--text-muted);
  font-size: 13px;
}
.sets-shell .st-tray-count strong {
  color: var(--text);
  font-size: 16px;
}
.sets-shell .st-found-list {
  display: flex;
  min-width: 0;
  gap: var(--space-2);
  overflow-x: auto;
  scrollbar-width: none;
}
.sets-shell .st-found-empty {
  color: var(--text-muted);
  font-size: 12px;
  white-space: nowrap;
}
.sets-shell .st-found {
  display: flex;
  flex: none;
  gap: 2px;
  padding: 3px;
  border: 0;
  border-radius: 8px;
  background: var(--surface-2);
  cursor: pointer;
}
.sets-shell .st-found.answer {
  outline: 1.5px dashed var(--text-muted);
  outline-offset: -1.5px;
  background: transparent;
}
.sets-shell .st-mini {
  display: grid;
  width: 30px;
  height: 20px;
  place-items: center;
  border-radius: 4px;
  background: var(--st-card);
}
.sets-shell .st-mini svg {
  width: 24%;
}
.sets-shell .st-status {
  margin: 0;
  color: var(--text-muted);
  font-size: 13px;
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .sets-shell .st-card,
  .sets-shell .st-board.dealing .st-card {
    animation: none;
    transition: none;
  }
}