/*
  Live round hero and the published result deck/list.
  Save-status and the answer reactions now live in
  pwa_reactions_and_save_status.css, which must load directly after this file.
  Colors and theme tokens live in pwa_theme.css -- change them there, not here.
*/

.player-round-hero {
  background: linear-gradient(145deg, var(--color-primary-strong), var(--color-primary));
  border: 0;
  color: var(--color-text-inverse);
  padding: var(--space-4);
}

.player-round-hero h3,
.player-round-hero .muted,
.player-round-hero .deadline-callout {
  color: inherit;
}

.player-round-hero .status-pill {
  background: var(--color-highlight);
  color: #2d2108;
}

.player-round-hero__submission-status {
  align-items: center;
  display: flex;
  font-size: 0.9rem;
  font-weight: 800;
  gap: var(--space-2);
  margin-bottom: 0 !important;
}

.player-round-hero__submission-status::before {
  align-items: center;
  background: rgba(255, 255, 255, 0.2);
  border-radius: var(--radius-pill);
  content: "✓";
  display: inline-flex;
  flex: 0 0 auto;
  height: 1.15rem;
  justify-content: center;
  width: 1.15rem;
}

.round-moderation-description {
  background: var(--teal-100, #edf7f4);
  border-left: 4px solid var(--teal-700, #23645e);
  border-radius: var(--radius-small);
  color: var(--teal-950, #103230);
  line-height: 1.45;
  margin-block: var(--space-3);
  padding: var(--space-2) var(--space-3);
}

.round-moderation-description__label {
  color: var(--teal-800, #1f5f59);
  display: block;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.055em;
  margin-bottom: 0.1rem;
  text-transform: uppercase;
}

.player-round-meta {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: space-between;
  margin-bottom: var(--space-2);
}

.player-prompt {
  font-size: clamp(1.2rem, 5.5vw, 1.65rem);
  font-weight: 850;
  line-height: 1.25;
  margin-block: var(--space-2) var(--space-3);
  overflow-wrap: anywhere;
}

.player-round-hero .deadline-callout {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--color-highlight);
}

.server-state-card {
  align-items: flex-start;
  border-radius: var(--radius-medium);
  display: flex;
  gap: var(--space-2);
  margin-block: var(--space-3);
  padding: var(--space-3);
}

/* Scoring-mode indicator palette: change colors here, not in templates or Python. */
.scoring-mode-indicator--standard {
  --scoring-mode-accent: #365a8c;
  --scoring-mode-surface: #edf3fb;
  --scoring-mode-text: #233a5b;
}

.scoring-mode-indicator--unique_bonus {
  --scoring-mode-accent: #80610b;
  --scoring-mode-surface: #fff7d6;
  --scoring-mode-text: #554000;
}

.scoring-mode-indicator--light_thresholded_scoring {
  --scoring-mode-accent: #9a4f17;
  --scoring-mode-surface: #fff1df;
  --scoring-mode-text: #64330f;
}

.scoring-mode-indicator--full_thresholded_scoring {
  --scoring-mode-accent: #775487;
  --scoring-mode-surface: #f8effa;
  --scoring-mode-text: #50345c;
}

.scoring-mode-indicator--tiered_scoring {
  --scoring-mode-accent: #5d6475;
  --scoring-mode-surface: #eef0f4;
  --scoring-mode-text: #353b49;
}

.scoring-mode-indicator--ecological_niche {
  --scoring-mode-accent: #2f6b55;
  --scoring-mode-surface: #edf7f2;
  --scoring-mode-text: #204b3c;
}

.scoring-mode-indicator {
  margin-block: var(--space-3);
}

.scoring-mode-indicator > summary {
  background: var(--scoring-mode-surface);
  border: 1px solid var(--scoring-mode-accent);
  border-left-width: 5px;
  border-radius: var(--radius-small);
  box-sizing: border-box;
  color: var(--scoring-mode-text);
  cursor: pointer;
  font-weight: 800;
  min-block-size: 2.75rem;
  padding: var(--space-3);
}

.scoring-mode-indicator > summary:hover {
  box-shadow: inset 0 0 0 1px var(--scoring-mode-accent);
}

.scoring-mode-indicator > summary:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 2px;
}

.scoring-mode-indicator[open] > summary {
  margin-bottom: var(--space-3);
}

.scoring-mode-indicator__content {
  align-items: center;
  display: inline-flex;
  gap: var(--space-2);
  max-inline-size: calc(100% - var(--space-2));
  vertical-align: middle;
}

.scoring-mode-indicator__label {
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.player-disclosures,
.player-secondary-actions {
  display: grid;
  gap: var(--space-3);
}

.player-secondary-actions {
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
}

.swipe-section {
  display: grid;
  gap: var(--space-3);
}

.swipe-section__tabs {
  display: flex;
  gap: var(--space-2);
  overflow-x: auto;
  padding-block: var(--space-1);
}

.swipe-section__tabs a {
  flex: 0 0 auto;
}

.swipe-track {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  padding-block: var(--space-1) var(--space-3);
  scroll-padding-inline: var(--space-3);
  scroll-snap-type: x mandatory;
}

.swipe-card {
  flex: 0 0 min(92vw, 42rem);
  scroll-snap-align: center;
}

.result-deck {
  --result-deck-active-index: 0;
  --result-deck-inline-padding: clamp(0.75rem, 4vw, 1rem);
  --result-deck-offset: 0px;
  display: grid;
  gap: var(--space-3);
}

.result-deck[data-result-deck-canonical] {
  scroll-margin-top: var(--round-result-tabs-sticky-offset, 7rem);
}

.result-deck__tabs {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  overflow-x: visible;
  padding-block: 0;
  padding-inline: 0;
  width: 100%;
}

.result-deck__tabs a {
  align-items: center;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--color-text);
  display: flex;
  font-size: clamp(0.625rem, 3.2vw, 0.875rem);
  font-weight: 800;
  justify-content: center;
  min-height: var(--tap-target-min);
  min-width: 0;
  padding: var(--space-1) 0;
  text-decoration: none;
  white-space: nowrap;
}

.result-deck__tabs a:hover,
.result-deck__tabs a:focus,
.result-deck__tabs a[aria-current="true"],
.result-deck__tabs a[aria-current="page"] {
  background: transparent;
  border-color: var(--color-primary);
  color: var(--color-primary-strong);
}

.result-deck__indicator {
  font-weight: 800;
  margin: 0;
  text-align: center;
}

.result-deck__stage {
  display: block;
  position: relative;
}

.result-deck__overlay {
  align-items: center;
  display: flex;
  inset: 0;
  justify-content: space-between;
  pointer-events: none;
  position: absolute;
  z-index: 2;
}

.result-deck__arrow {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 999px;
  box-shadow: none;
  color: var(--color-primary-strong);
  display: inline-flex;
  font-size: 1.6rem;
  font-weight: 900;
  height: 3rem;
  justify-content: center;
  line-height: 1;
  min-width: 3rem;
  padding: 0;
  pointer-events: auto;
  text-decoration: none;
  width: 3rem;
}

.result-deck__arrow[aria-disabled="true"],
.result-deck__arrow:disabled {
  cursor: not-allowed;
  opacity: 0.2;
  pointer-events: none;
}

.result-deck__viewport {
  overflow-x: auto;
  touch-action: pan-y pinch-zoom;
  width: 100%;
}

.result-deck__track {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  padding: var(--space-1) 0 var(--space-3);
  scroll-padding-inline: var(--space-3);
  scroll-snap-type: x mandatory;
}

.result-deck--paged .result-deck__stage {
  display: grid;
  grid-template-columns: minmax(0, min(42rem, 100%));
  justify-content: center;
  overflow: visible;
}

.result-deck--paged .result-deck__overlay {
  grid-column: 1;
  grid-row: 1;
}

.result-deck--paged .result-deck__arrow:hover,
.result-deck--paged .result-deck__arrow:focus-visible {
  color: var(--color-primary);
}

.result-deck--paged .result-deck__viewport {
  grid-column: 1;
  grid-row: 1;
  margin-inline: auto;
  overflow: hidden;
  width: 100%;
}

.result-deck--paged .result-deck__track {
  gap: 0;
  overflow: visible;
  scroll-snap-type: none;
  transform: translateX(var(--result-deck-offset));
  transition: transform 220ms ease-out;
}

.result-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-medium);
  box-shadow: var(--shadow-subtle);
  flex: 0 0 min(92vw, 42rem);
  padding: var(--space-4);
  scroll-snap-align: center;
}

.result-deck[data-result-deck-canonical] .result-card--server-selected {
  order: -1;
}

.result-deck--paged .result-card {
  box-sizing: border-box;
  flex: 0 0 100%;
  max-width: none;
  padding-inline: clamp(var(--space-4), 7vw, var(--space-6));
  width: 100%;
}

.result-deck--paged .result-card:not(.result-card--active) {
  visibility: hidden;
}

@media (max-width: 640px) {
  .result-deck--paged .result-deck__arrow {
    font-size: 1.4rem;
    height: 2.75rem;
    min-width: 2.75rem;
    width: 2.75rem;
  }
}

.result-card h4,
.result-card h5 {
  margin-top: 0;
}

.result-card--summary {
  background: var(--color-primary-soft);
  border-left: 5px solid var(--color-primary);
}

.result-score-hero {
  align-items: end;
  display: flex;
  gap: var(--space-2);
  margin-block: var(--space-3);
}

.result-score-hero strong {
  font-size: 2.75rem;
  line-height: 0.9;
}

.result-facts {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
}

.result-facts p,
.result-answer-list p,
.result-list__row {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  margin: 0;
  padding: var(--space-3);
}

.result-facts p,
.result-answer-list p {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.result-facts span,
.result-answer-list span,
.result-list__row small {
  color: var(--color-text-muted);
}

.result-answer-list,
.result-card__group,
.result-list,
.result-details-list {
  display: grid;
  gap: var(--space-3);
}

.result-answer-list {
  margin-block-start: var(--space-5);
}

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

.result-list__row--answer-group {
  align-items: baseline;
  display: grid;
  gap: var(--space-2);
  grid-template-columns: minmax(0, 1fr) auto;
}

.result-list__row--answer-group > strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.result-list__row--answer-group > span {
  color: var(--color-text-muted);
  font-weight: 700;
  white-space: nowrap;
}

.result-list__row header {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: space-between;
}

.result-list--players .result-list__row {
  gap: 0.35rem;
  padding-block: var(--space-2);
}

.result-list__answer-line {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  min-width: 0;
  overflow-wrap: anywhere;
}

.result-list__answer-prompt {
  color: var(--color-text-muted);
  flex: 0 0 auto;
}

.result-list__answer-items {
  align-items: baseline;
  display: flex;
  flex: 1 1 12rem;
  flex-wrap: wrap;
  gap: 0.25rem;
  min-width: 0;
}

.result-list__answer-separator {
  color: var(--color-text-muted);
}

.result-list__row--standing {
  align-items: baseline;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  justify-content: space-between;
}

.result-list__row--standing strong {
  min-width: min(100%, 10rem);
  overflow-wrap: anywhere;
}

.result-list__standing-meta {
  align-items: baseline;
  display: flex;
  flex: 0 1 auto;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-start;
  text-align: left;
}

.result-list__row--current {
  border-color: var(--color-primary);
  box-shadow: inset 4px 0 0 var(--color-primary);
}

.result-details-list details {
  background: var(--color-surface-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-small);
  padding: var(--space-3);
}

.result-details-list summary {
  cursor: pointer;
  font-weight: 850;
}

.result-details-list small {
  display: block;
  margin-top: var(--space-1);
}

.share-card-actions {
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
}