/* Typing Story Quest — narrative line-by-line typing game */

.tsq-setup { display: flex; flex-direction: column; gap: 18px; }
.tsq-setup h3 { margin: 0 0 8px; font-size: 1.05rem; }

.tsq-pick-row { display: flex; flex-wrap: wrap; gap: 10px; }

.tsq-pick {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 2px solid var(--color-border);
  background: var(--color-bg-alt);
  color: var(--color-text);
  cursor: pointer;
  font: inherit;
  min-width: 190px;
  text-align: left;
}
.tsq-pick strong { font-size: 1rem; }
.tsq-pick small { color: var(--color-text-soft); }
.tsq-pick[aria-pressed="true"] { border-color: var(--color-primary); background: rgba(79, 216, 224, 0.12); }

.tsq-start-btn { align-self: flex-start; margin-top: 4px; }

.tsq-rewards { font-size: 0.85rem; color: var(--color-text-soft); }
.tsq-rewards strong { color: var(--color-text); }

.tsq-play { display: flex; flex-direction: column; gap: 14px; align-items: center; }

.tsq-scene {
  width: 100%;
  height: 140px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(79, 216, 224, 0.14), rgba(255, 202, 40, 0.1));
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
}

.tsq-line {
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  font-size: 1.25rem;
  line-height: 1.6;
  text-align: center;
  width: 100%;
}
.tsq-ch { color: var(--color-text-soft); }
.tsq-ch--done { color: var(--color-success); }
.tsq-end { font-size: 1.6rem; font-weight: 800; color: var(--color-primary); }

.tsq-progress { color: var(--color-text-soft); font-size: 0.9rem; }

.tsq-actions { display: flex; flex-wrap: wrap; gap: 10px; }