/* ---------- Quartet ---------- */

:root {
  --q1: #d9a92f;
  --q2: #55b972;
  --q3: #7aa2ff;
  --q4: #a97ae0;
}

.stage { justify-content: center; gap: 14px; padding: 10px var(--pad); }

.q-board {
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: var(--q-gap, 7px);
}

.q-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--q-gap, 7px);
}

/* ---------- tiles ---------- */

.q-tile {
  height: var(--tile-h, 78px);
  display: grid;
  place-items: center;
  padding: 2px 3px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.1;
  text-align: center;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
  hyphens: auto;
  transition: transform .1s var(--ease), background .12s, color .12s;
}
.q-tile:active { transform: scale(.95); }

/* Longer entries step down so nothing gets clipped on a narrow phone. */
.q-tile--m { font-size: 11px; }
.q-tile--s { font-size: 9.5px; }

.q-tile.is-sel {
  background: var(--text);
  color: var(--bg);
  transform: scale(.96);
}

.q-tile.is-wrong { animation: q-shake .45s; }
.q-tile.is-going { animation: q-pop .3s var(--ease) forwards; }

@keyframes q-shake {
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}
@keyframes q-pop {
  to { transform: scale(.7); opacity: 0; }
}

/* ---------- solved rows ---------- */

.q-solved {
  height: var(--tile-h, 78px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px 8px;
  border-radius: var(--r-sm);
  text-align: center;
  color: #14100a;
  animation: q-in .3s var(--ease);
}
.q-solved b {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.q-solved span {
  font-size: 12px;
  font-weight: 600;
  opacity: .82;
  line-height: 1.2;
}
.q-solved.g0 { background: var(--q1); }
.q-solved.g1 { background: var(--q2); }
.q-solved.g2 { background: var(--q3); }
.q-solved.g3 { background: var(--q4); color: #180d26; }

@keyframes q-in { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- lives ---------- */

.q-lives {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  color: var(--muted);
}
.q-lives__dots { display: flex; gap: 7px; }
.q-lives__dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--text-2);
  transition: background .2s, transform .2s;
}
.q-lives__dot.is-spent { background: var(--surface-3); transform: scale(.72); }

/* ---------- controls ---------- */

.q-ctl {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding-top: 4px;
}
.q-ctl .btn { flex: 1 1 0; min-width: 0; padding: 0 8px; font-size: 14px; }
.q-ctl .btn[disabled] { opacity: .4; }