/*
  Player home: result tabs/cards, welcome/onboarding, game-flow, schedule, state cards.
  Colors and theme tokens live in pwa_theme.css -- change them there, not here.
*/

.round-result-tabs {
  display: grid;
  gap: var(--space-4);
}

.round-result-tabs__sticky {
  background: color-mix(in srgb, var(--color-background) 94%, transparent);
  margin-inline: calc(var(--space-2) * -1);
  padding: var(--space-2) var(--space-2) calc(var(--space-2) + 0.25rem);
  position: sticky;
  top: 0;
  z-index: 4;
}

.round-result-tabs__tablist {
  align-items: end;
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.15rem;
  overflow: visible;
  padding: var(--space-1) calc(var(--space-1) + 0.9rem) 0 var(--space-1);
}

.round-result-tabs__tab {
  --round-result-tab-row: 0;
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border-strong);
  border-bottom-color: var(--color-primary);
  border-radius: var(--radius-small) var(--radius-small) 0 0;
  box-shadow: var(--shadow-subtle);
  color: var(--color-text);
  flex: 0 0 auto;
  font: inherit;
  font-weight: 800;
  margin: 0 0 -1px -0.15rem;
  min-height: 2.75rem;
  padding: 0.55rem 0.8rem;
  position: relative;
  text-decoration: none;
  transform: translate(
    calc(var(--round-result-tab-row) * 0.45rem),
    calc(var(--round-result-tab-row) * -0.36rem)
  );
  width: auto;
  z-index: calc(1 + var(--round-result-tab-row));
}

.round-result-tabs__tablist--single-row .round-result-tabs__tab {
  transform: none;
}

.round-result-tabs__tab:active {
  transform: translate(
    calc(var(--round-result-tab-row) * 0.45rem),
    calc((var(--round-result-tab-row) * -0.36rem) + 1px)
  );
}

.round-result-tabs__tablist--single-row .round-result-tabs__tab:active {
  transform: translateY(1px);
}

.result-navigation-shell {
  display: grid;
  gap: 0;
  padding: var(--space-1) var(--space-2);
  top: env(safe-area-inset-top, 0);
}

.result-navigation-shell > .round-result-tabs__tablist {
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: 0;
}

.result-navigation-shell .round-result-tabs__tab {
  margin-inline-start: 0;
  transform: none;
}

.result-navigation-shell .round-result-tabs__tab:active {
  transform: translateY(1px);
}

.round-result-tabs__tab--wrapped-row {
  box-shadow: 0 -1px 0 color-mix(in srgb, var(--color-background) 70%, transparent), var(--shadow-subtle);
}

.round-result-tabs__tab:hover,
.round-result-tabs__tab:focus-visible,
.round-result-tabs__tab[aria-selected="true"] {
  background: var(--color-primary-soft);
  border-color: var(--color-primary);
  color: var(--color-primary-strong);
}

.round-result-tabs__tab[aria-selected="true"] {
  box-shadow: 0 -3px 0 var(--color-primary), var(--shadow-subtle);
}

.round-result-tabs__panel {
  scroll-margin-top: calc(var(--round-result-tabs-sticky-offset, 7rem) + var(--space-4));
}

.round-result-tabs__panel:focus {
  outline: none;
}

.round-result-tabs__panel[hidden] {
  display: none;
}

.round-result-tabs__heading h4,
.round-result-tabs__heading p {
  margin-top: 0;
}

.round-result-tabs__prompts {
  display: grid;
  gap: var(--space-1);
}

.round-result-tabs__prompts p {
  margin-block: 0;
}

.player-published-results,
.player-result-teaser,
.results-hub-section,
.results-rounds-section,
.results-selected-detail,
.result-detail-page {
  display: grid;
  gap: var(--space-2);
}

.player-result-teaser,
.results-latest-card {
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-subtle);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  padding: var(--space-4);
}

.player-result-teaser h3,
.player-result-teaser p,
.results-latest-card h3,
.results-latest-card p {
  margin-block: 0;
}

.player-result-teaser--action {
  border-color: var(--color-border-strong);
  color: inherit;
  text-decoration: none;
  transition:
    box-shadow 160ms ease,
    transform 160ms ease;
}

.player-result-teaser--action:hover,
.player-result-teaser--action:focus-visible {
  box-shadow: var(--shadow-surface);
  transform: translateY(-1px);
}

.player-result-teaser--action:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
}

.player-result-teaser__action {
  color: var(--color-primary-strong);
  font-weight: 800;
}

.results-latest-card--final {
  align-items: start;
}

.result-round-browser {
  display: grid;
  gap: var(--space-2);
}

.result-round-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  color: inherit;
  display: grid;
  gap: var(--space-1);
  padding: var(--space-3);
  text-decoration: none;
}

.result-round-card:hover,
.result-round-card:focus-visible,
.result-round-card[aria-current="page"] {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-subtle);
}

.result-round-card--pending {
  background: var(--color-surface-muted);
  color: var(--color-text-muted);
}

.result-round-card__number {
  font-weight: 850;
}

.result-round-card__prompt {
  color: var(--color-text);
}

.result-round-card__prompts {
  display: grid;
  gap: var(--space-1);
}

.prompt-text-row {
  align-items: start;
  display: grid;
  gap: var(--space-2);
  grid-template-columns: 1.15rem minmax(0, 1fr);
  line-height: 1.25;
}

.prompt-text-row__icon {
  color: var(--color-primary);
  display: inline-flex;
  height: 1.15rem;
  margin-top: 0.08rem;
  width: 1.15rem;
}

.prompt-text-row__svg {
  display: block;
  height: 100%;
  width: 100%;
}

.prompt-text-row__text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.prompt-text-row__body {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.round-result-tabs__prompt-row,
.result-round-card__prompt-row {
  color: var(--color-text);
  font-size: 0.95rem;
  font-weight: 800;
}

.round-result-tabs__prompt-meta {
  font-size: var(--font-size-small);
  font-weight: 650;
}

.result-card__prompt-heading {
  font-size: 0.95rem;
  margin-block: 0 0.75rem;
}

.result-round-card__prompts .result-round-card__prompt-row + .result-round-card__prompt-row {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-1);
}

.result-round-card__meta {
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
}

.result-detail-page__heading {
  align-items: start;
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
}

.result-detail-page__heading h3,
.result-detail-page__heading p {
  margin-block: 0;
}

.button-row,
.sticky-action-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.welcome-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}

main > .welcome-grid {
  background: transparent;
  border: 0;
  padding: 0;
}

.welcome-panel,
.install-card,
.notification-onboarding-card {
  align-content: start;
  display: grid;
  gap: var(--space-3);
}

.welcome-panel h3,
.install-card h3,
.notification-onboarding-card h3 {
  border-top: 0;
  margin: 0;
  padding: 0;
}

.welcome-guide-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
}

.welcome-guide-list dt {
  align-items: center;
  display: flex;
  gap: var(--space-2);
  font-weight: 850;
}

.welcome-guide-list__icon {
  align-items: center;
  background: var(--color-primary-soft);
  border-radius: var(--radius-pill);
  color: var(--color-primary);
  display: inline-flex;
  flex: 0 0 auto;
  height: 1.9rem;
  justify-content: center;
  width: 1.9rem;
}

.welcome-guide-list__icon svg {
  display: block;
  fill: none;
  height: 1.15rem;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
  width: 1.15rem;
}

.welcome-guide-list dd {
  color: var(--color-text-muted);
  margin: calc(var(--space-2) * -1) 0 var(--space-2);
}

.welcome-flow-card,
.welcome-actions-card {
  grid-column: 1 / -1;
}

.welcome-actions-card {
  justify-items: start;
}

.game-flow {
  margin-block: var(--space-3) 0;
  overflow-x: auto;
  padding-block-end: var(--space-2);
  scrollbar-width: thin;
}

.game-flow__track {
  display: grid;
  gap: var(--space-3);
  grid-auto-columns: minmax(12rem, 16rem);
  grid-auto-flow: column;
  list-style: none;
  margin: 0;
  padding: 0 var(--space-1) var(--space-1);
  scroll-snap-type: x proximity;
}

.game-flow--compact .game-flow__track {
  grid-auto-columns: minmax(10.75rem, 13rem);
}

.game-flow__step {
  align-content: start;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  display: grid;
  gap: var(--space-2);
  grid-template-columns: auto minmax(0, 1fr);
  min-height: 8.5rem;
  padding: var(--space-3);
  scroll-snap-align: start;
}

.game-flow--compact .game-flow__step {
  min-height: 7.25rem;
}

.game-flow__index {
  align-items: center;
  background: var(--color-primary-soft);
  border: 1px solid rgba(31, 92, 120, 0.24);
  border-radius: 999px;
  color: var(--color-primary-strong);
  display: inline-flex;
  font-size: 0.82rem;
  font-weight: 850;
  height: 1.8rem;
  justify-content: center;
  line-height: 1;
  width: 1.8rem;
}

.game-flow__step h4 {
  font-size: 1rem;
  line-height: 1.2;
  margin: 0;
}

.game-flow__step p {
  color: var(--color-text-muted);
  font-size: 0.93rem;
  line-height: 1.35;
  margin: var(--space-1) 0 0;
}

.install-card[data-install-state="installed"] {
  border-left: 5px solid var(--color-success);
}

.install-card[data-install-state="available"] {
  border-left: 5px solid var(--color-primary);
}

.install-card[data-install-state="ios"],
.install-card[data-install-state="manual"] {
  border-left: 5px solid var(--color-warning);
}

.install-card[hidden] {
  display: none;
}

.notification-onboarding-card[hidden] {
  display: none;
}

.welcome-guidance-note {
  display: grid;
  gap: var(--space-2);
}

.welcome-guidance-note p {
  margin: 0;
}

.sticky-action-row {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  bottom: 0;
  box-shadow: 0 -8px 18px rgba(22, 36, 32, 0.08);
  margin-inline: calc(var(--space-4) * -1);
  padding: var(--space-3) var(--space-4) 0;
  position: sticky;
}

.server-save-state,
.deadline-callout {
  background: var(--color-success-soft);
  border-left: 4px solid var(--color-success);
  padding: var(--space-3);
}

.player-schedule {
  display: grid;
  gap: var(--space-3);
}

.next-round-callout {
  background: var(--color-primary-soft);
  border-left: 4px solid var(--color-primary);
  padding: var(--space-3);
}

.player-schedule-dialog {
  display: none;
  padding: var(--space-4);
}

.player-schedule-dialog[open] {
  display: grid;
  gap: var(--space-3);
}

.player-schedule-dialog > header {
  align-items: center;
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
}

.player-schedule-list {
  display: grid;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  max-height: 62dvh;
  overflow-y: auto;
  padding: 0;
}

.player-schedule-row {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  padding: var(--space-3);
}

.player-schedule-row--closed > p {
  opacity: 0.58;
}

.player-schedule-row--current,
.player-schedule-row--next {
  background: var(--color-primary-soft);
  border-left: 4px solid var(--color-primary);
}

.player-schedule-row__heading {
  align-items: center;
  display: flex;
  gap: var(--space-2);
  justify-content: space-between;
}

.player-cockpit {
  display: grid;
  gap: var(--space-3);
}

.player-state-card,
.player-primary-action,
.player-disclosure,
.player-result-detail {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-large);
  box-shadow: var(--shadow-subtle);
  padding: var(--space-3);
}

.player-state-card {
  border-left: 5px solid var(--color-border-strong);
}

.player-state-card h3,
.player-primary-action h3,
.player-disclosure summary {
  margin-block: 0 var(--space-2);
}

.player-state-card p {
  margin-block: var(--space-1);
}

.player-state-card .deadline-callout {
  margin-top: var(--space-2);
  padding: var(--space-2);
}

.player-state-card--action-needed {
  background: var(--color-primary-soft);
  border-left-color: var(--color-primary);
}

.player-state-card--ok {
  background: var(--color-success-soft);
  border-left-color: var(--color-success);
}

.player-state-card--waiting {
  background: var(--color-surface-muted);
}