@layer app {
/* ============================================================
   Train rows
   ============================================================ */
.trains {
  flex: 1;
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
}

.train-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 12px;
  position: relative;
  border-bottom: 1px solid var(--cell-empty-brd);
  cursor: pointer;
  transition: background-color 0.15s;
  flex: 1;
  justify-content: center;
}

.train-group:last-child {
  border-bottom: none;
}

.train-group:has(.train-row.active) {
  background: color-mix(in srgb, var(--orange) 6%, transparent);
}

.train-group:has(.train-row:not(.opponent-row).result-win) {
  background: color-mix(in srgb, var(--stop-won-bg) 50%, transparent);
}

.train-group:has(.train-row:not(.opponent-row).result-lose) {
  background: color-mix(in srgb, var(--stop-lost-bg) 50%, transparent);
}

.train-group:has(.train-row:not(.opponent-row).result-tied) {
  background: color-mix(in srgb, var(--stop-tied-bg) 50%, transparent);
}

/* Watermark label — sits behind train cells like a station sign */
.train-group-label {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-flap);
  font-style: italic;
  font-size: calc(var(--board-cell-size, 44px) * 2);
  color: var(--cell-empty-brd);
  opacity: 0.25;
  pointer-events: none;
  z-index: 0;
  user-select: none;
  line-height: 1;
  padding-right: 21px;
}

.train-group:has(.train-row.active) .train-group-label {
  color: var(--orange);
  opacity: 0.15;
}

.train-group:has(.train-row:not(.opponent-row).result-win) .train-group-label {
  color: var(--stop-won-text);
  opacity: 0.2;
}

.train-group:has(.train-row:not(.opponent-row).result-lose) .train-group-label {
  color: var(--stop-lost-text);
  opacity: 0.2;
}

.train-group:has(.train-row:not(.opponent-row).result-tied) .train-group-label {
  color: var(--stop-tied-text);
  opacity: 0.2;
}

/* Word status — hidden by default. When active, positioned at top-right
   of the train-group (which has position:relative). */
.train-group-status {
  position: absolute;
  top: 0;
  right: 28px;
  z-index: 3;
  display: none;
}

.word-suggest-link {
  display: none;
}

.train-group:has(.train-row.active) .train-group-status {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-family: var(--font-flap);
  color: var(--orange);
}

.train-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 0;
  cursor: pointer;
  user-select: none;
  position: relative;
}

.train-row.active .train-row-label {
  color: var(--orange);
}

.train-row-label {
  display: none;
}

.train-row-player {
  font-size: 10px;
  font-family: var(--font-body);
  color: var(--label-col);
}

.train-row-score {
  font-size: 13px;
  font-family: var(--font-flap);
  font-weight: 900;
  color: var(--page-sub);
}

.train-row.active .train-row-score {
  color: var(--orange);
}

.train-row-score-badge {
  font-size: 14px;
  font-family: var(--font-flap);
  font-weight: 900;
  color: var(--page-sub);
  text-align: left;
  min-width: 20px;
  padding: 0 0 0 4px;
  align-self: center;
  z-index: 1;
}

.train-row.active .train-row-score-badge {
  color: var(--orange);
}

.train-row.active .train-slots .cell {
  box-shadow: 0 0 0 1.5px var(--orange);
}

.train-row.opponent-row .train-slots .cell {
  opacity: 0.6;
}

.train-row.opponent-row .train-row-label {
  opacity: 0.7;
}

.train-slots {
  display: flex;
  gap: var(--cell-gap);
  position: relative;
  z-index: 1;
}

/* Board cells: square, sized by --board-cell-size, matching hand tile proportions.
   Container type enables cqh units for proportional font scaling. */
.trains .cell,
.trains .train-cell {
  width: var(--board-cell-size, var(--cell-size));
  height: var(--board-cell-size, var(--cell-size));
  flex-shrink: 0;
  container-type: size;
}

.trains .cell .cell-letter,
.trains .train-cell .cell-letter {
  font-size: 52cqh;
}

.trains .cell .cell-value,
.trains .train-cell .cell-value {
  font-size: 26cqh;
}

.trains .cell .cell-mod-badge,
.trains .train-cell .cell-mod-badge {
  font-size: 22cqh;
}

.trains .cell .cell-penalty,
.trains .train-cell .cell-penalty {
  font-size: 22cqh;
}

.trains .cell .cell-shadow {
  height: 15cqh;
}

/* Play actions below train */
.play-actions {
  padding: 6px 12px 8px;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
}

.play-actions .btn {
  height: var(--cell-size);
  line-height: var(--cell-size);
  padding: 0 14px;
  font-size: 13px;
}

/* Waiting pill */
.waiting-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ann-bg);
  border: 1px solid var(--ann-brd);
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 12px;
  font-family: var(--font-body);
  color: var(--page-sub);
}

.waiting-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--orange);
  animation: blink-dot 1.2s ease-in-out infinite;
}

@keyframes blink-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.2; }
}

/* Waiting (already played) */
.waiting-played {
  padding: 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.waiting-played-word {
  font-size: 15px;
  font-weight: 700;
  color: var(--page-text);
  letter-spacing: 1px;
}

.waiting-played-score {
  font-size: 13px;
  font-family: var(--font-body);
  color: var(--page-sub);
}

}