.turn-race { margin: 0 0 1rem; }
#turn-race .turn-status { margin-bottom: .3rem; }
#turn-race-results { margin-top: .8rem; }
#turn-personal-history { margin: 1rem 0; }
#turn-personal-history > summary { padding: .5rem 0; cursor: pointer; color: var(--muted); font-size: .875rem; }
.initial-state { margin: 0 0 1rem; }
.initial-state > summary { padding: .5rem 0; font-weight: 650; cursor: pointer; }
.initial-state-body > p { margin: .25rem 0 .6rem; }
.initial-state-controls { margin-bottom: .5rem; }
.initial-state .guess-list { margin-bottom: .8rem; }
.create-trail-from-game { margin: .5rem 0 1rem; }
.turn-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .4rem 1rem; }
.turn-heading h2 { margin: 0; font-size: 1.12rem; }
.turn-timer { color: var(--accent); font-size: .9rem; font-weight: 700; }
.turn-status { margin: .4rem 0 .9rem; color: var(--muted); font-size: .9rem; min-height: 3em; }
.turn-reveal h3, .turn-history h3 { margin: .8rem 0 .4rem; color: var(--muted); font-size: .8rem; font-weight: 600; }
.turn-results { list-style: none; padding: 0; margin: 0; display: grid; gap: .3rem; }
.turn-result { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto; align-items: center; gap: .4rem .65rem; padding: .6rem .7rem; border-radius: 6px; background: var(--surface); overflow: hidden; font-size: .9rem; }
.turn-result::before { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--turn-heat); z-index: -1; background: color-mix(in srgb, var(--player) 12%, transparent); border-bottom: 2px solid color-mix(in srgb, var(--player) 55%, transparent); }
.turn-player { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem; min-width: 0; }
.turn-player strong, .turn-word { overflow-wrap: anywhere; }
.turn-player small { color: var(--muted); font-size: .75rem; }
.turn-result[data-self=true] .turn-player strong { color: var(--accent); }
.turn-temperature { font-weight: 700; white-space: nowrap; }
.turn-change { min-width: 6.5ch; text-align: right; font-size: .8rem; white-space: nowrap; }
.turn-result[data-direction=warmer] .turn-change { color: var(--success); }
.turn-result[data-direction=colder] .turn-change { color: var(--error); }
.turn-change-note { white-space: normal; color: var(--muted); max-width: 8rem; }
.turn-history { margin-top: .8rem; font-size: .875rem; }
.turn-history summary { cursor: pointer; padding: .35rem 0; color: var(--muted); }
.turn-history-rounds { display: grid; gap: .6rem; }
.turn-race[data-phase=reveal] .is-new-reveal .turn-result { animation: turn-reveal-in .35s ease-out both; }
@keyframes turn-reveal-in { from { opacity: .35; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (max-width: 480px) {
  .turn-result { grid-template-columns: minmax(0, 1fr) auto; gap: .25rem .5rem; }
  .turn-player { grid-column: 1; grid-row: 1; }
  .turn-word { grid-column: 1; grid-row: 2; }
  .turn-temperature { grid-column: 2; grid-row: 1; text-align: right; }
  .turn-change { grid-column: 2; grid-row: 2; }
  .turn-change:empty { display: none; min-width: 0; }
  .turn-result[data-status=unavailable] .turn-word,
  .turn-result[data-status=missed] .turn-word,
  .turn-result[data-status=finished] .turn-word { grid-column: 1 / -1; }
  .turn-change-note { grid-column: 1 / -1; grid-row: 3; min-width: 0; max-width: none; text-align: left; }
}
@media (prefers-reduced-motion: reduce) { .turn-race[data-phase=reveal] .is-new-reveal .turn-result { animation: none; } }
