/* Count and Match: game-specific styles (shared look is in ../shared/base.css) */

:root {
  --dot: 22px; /* connector dot size */
}

/* ---------- Cards (used on the board and in the start demo) ---------- */

.mcard {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 4px solid transparent;
  border-radius: 22px;
  background: var(--card);
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.1);
  transition: transform 0.12s, border-color 0.12s;
}

/* Connector dot on the inner edge of each card */
.mcard::after {
  content: "";
  position: absolute;
  top: 50%;
  width: var(--dot);
  height: var(--dot);
  margin-top: calc(var(--dot) / -2);
  border-radius: 50%;
  background: var(--card);
  border: 4px solid var(--ghost);
  box-sizing: border-box;
}

.word-card::after {
  right: calc(var(--dot) / -2 - 4px);
}

.set-card::after {
  left: calc(var(--dot) / -2 - 4px);
}

.word-card {
  font-size: clamp(36px, 6.5vmin, 60px);
  line-height: 1;
}

.mcard.selected {
  border-color: var(--accent);
  transform: scale(1.05);
}

.mcard.selected::after {
  background: var(--accent);
  border-color: var(--accent);
}

.mcard.target {
  border-color: var(--hint);
}

.mcard.matched {
  border-color: var(--c);
  cursor: default;
}

.mcard.matched::after {
  background: var(--c);
  border-color: var(--c);
}

.word-card.matched {
  color: var(--c);
}

.mcard.hint {
  animation: card-glow 1s ease-in-out infinite;
}

.mcard.nudge {
  animation: pop 0.5s ease-out;
}

/* Objects to count, in rows of five */
.set {
  --size: clamp(28px, 5.4vmin, 46px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-width: calc(var(--size) * 5);
  font-size: calc(var(--size) * 0.82);
  line-height: 1;
}

.set > span {
  width: var(--size);
  height: var(--size);
  display: grid;
  place-items: center;
}

.set > span.hop {
  animation: hop 0.35s ease-out backwards;
}

/* ---------- Board ---------- */

.screen#screen-game {
  justify-content: center;
}

.board {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  column-gap: clamp(90px, 20vw, 280px);
  width: min(100%, 1000px);
  height: 100%;
  max-height: 760px;
  touch-action: none; /* we handle drags ourselves */
}

.col {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  gap: clamp(8px, 1.6vmin, 16px);
  min-height: 0;
}

.col .mcard {
  flex: 1 1 0;
  min-height: 72px;
  max-height: 130px;
  padding: 6px 10px;
}

.lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.lines line {
  stroke-width: 9;
  stroke-linecap: round;
}

.lines .drag-line {
  stroke: var(--accent);
  stroke-dasharray: 2 18;
}

.lines .wrong-line {
  stroke: #b9b3c9;
  animation: fade-out 0.7s ease-in forwards;
}

.lines .match-line {
  animation: draw 0.35s ease-out;
}

/* ---------- Start screen demo ---------- */

.demo {
  display: flex;
  align-items: center;
}

.demo-card {
  width: clamp(140px, 22vmin, 200px);
  height: clamp(90px, 14vmin, 120px);
}

.demo-line {
  position: relative;
  width: clamp(100px, 20vmin, 200px);
  height: 9px;
  margin: 0 4px;
  border-radius: 9px;
  background: var(--accent);
  transform-origin: left center;
  animation: demo-draw 2.4s ease-in-out infinite;
}

.demo-finger {
  position: absolute;
  right: -24px;
  top: 4px;
  font-size: 48px;
}

/* ---------- Animations ---------- */

@keyframes card-glow {
  0%, 100% { box-shadow: 0 6px 0 rgba(0, 0, 0, 0.1), 0 0 0 0 var(--hint); }
  50% { box-shadow: 0 6px 0 rgba(0, 0, 0, 0.1), 0 0 0 10px var(--hint); }
}

@keyframes hop {
  0% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-14px) scale(1.25); }
  100% { transform: translateY(0) scale(1); }
}

@keyframes fade-out {
  to { opacity: 0; }
}

@keyframes draw {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes demo-draw {
  0% { transform: scaleX(0); }
  50%, 85% { transform: scaleX(1); }
  100% { transform: scaleX(1); opacity: 0; }
}