/* ========================================
   SET STATES — Announced, Awaiting Data, Pre-Release
   ======================================== */

/* Screen-reader only utility */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ========================================
   STATE BADGES (shared across browse tiles & expansion page)
   ======================================== */

.set-state-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  font-family: var(--font-paragraph);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-md);
  line-height: 1.4;
  white-space: nowrap;
}

.set-state-badge--announced {
  background: rgba(139, 108, 193, 0.15);
  color: #8B6CC1;
  border: 1px solid rgba(139, 108, 193, 0.3);
}

.set-state-badge--awaiting {
  background: rgba(212, 168, 75, 0.15);
  color: #D4A84B;
  border: 1px solid rgba(212, 168, 75, 0.3);
}

.set-state-badge--pre-release {
  background: rgba(23, 184, 144, 0.15);
  color: #17B890;
  border: 1px solid rgba(23, 184, 144, 0.3);
}

.set-state-badge--released {
  background: rgba(16, 185, 129, 0.15);
  color: var(--colour-success);
  border: 1px solid rgba(16, 185, 129, 0.3);
}

[data-theme="dark"] .set-state-badge--announced {
  background: rgba(139, 108, 193, 0.2);
  color: #B79FE0;
}

[data-theme="dark"] .set-state-badge--awaiting {
  background: rgba(212, 168, 75, 0.2);
  color: #E8C86B;
}

[data-theme="dark"] .set-state-badge--pre-release {
  background: rgba(23, 184, 144, 0.2);
  color: #4DE8C0;
}

[data-theme="dark"] .set-state-badge--released {
  background: rgba(16, 185, 129, 0.2);
  color: #5EEAB8;
}


/* ========================================
   BROWSE TILE STATE OVERRIDES
   ======================================== */

/* Badge positioning on browse tiles */
.expansion .set-state-badge {
  position: absolute;
  top: var(--space-8);
  right: var(--space-8);
  z-index: 5;
}

/* Announced tiles: desaturated, reduced opacity */
.expansion[data-state="announced"] > picture:first-child img {
  filter: blur(1.75px) grayscale(0.35);
  opacity: 0.8;
  transition: filter 0.25s ease;
}

.expansion[data-state="announced"]:hover > picture:first-child img {
  filter: blur(1.75px) grayscale(0);
}

/* Awaiting-data tiles: slightly desaturated */
.expansion[data-state="awaiting_data"] > picture:first-child img {
  filter: blur(1.75px) saturate(0.85);
  opacity: 0.8;
  transition: filter 0.2s ease;
}

.expansion[data-state="awaiting_data"]:hover > picture:first-child img {
  filter: blur(1.75px) saturate(1);
}

/* Non-trackable tiles: center a single state badge in the body slot
   (keeps the 180px middle row the trackable tiles use for progress bars) */
.exp-body--state {
  display: flex !important;
  align-items: center;
  justify-content: center;
  grid-template-rows: none !important;
}

/* Solid badge variant — opaque fill for legibility over tile artwork.
   Overrides the translucent default so hover-brightened images can't
   wash out the badge. */
.set-state-badge--solid {
  border: none;
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
  padding: 0.35rem 0.75rem;
  font-weight: var(--font-weight-lg);
}

.set-state-badge--solid.set-state-badge--announced,
[data-theme="dark"] .set-state-badge--solid.set-state-badge--announced {
  background: #6B4FA0;
  color: #fff;
}

.set-state-badge--solid.set-state-badge--awaiting,
[data-theme="dark"] .set-state-badge--solid.set-state-badge--awaiting {
  background: #8A6A1F;
  color: #fff;
}

.set-state-badge--solid.set-state-badge--pre-release,
[data-theme="dark"] .set-state-badge--solid.set-state-badge--pre-release {
  background: #0E8E6E;
  color: #fff;
}


/* ========================================
   ANNOUNCED PAGE
   ======================================== */

.set-page {
  max-width: 720px;
  margin: 0 auto;
  padding: var(--space-32) var(--space-16);
}

.set-announcement,
.set-awaiting {
  text-align: center;
}

.set-announcement__header,
.set-awaiting__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16);
}

.set-announcement__banner,
.set-awaiting__banner {
  width: 100%;
  max-width: 600px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: var(--space-8);
}

.set-announcement__banner-img,
.set-awaiting__banner-img {
  width: 100%;
  height: auto;
  display: block;
  filter: grayscale(0.3) brightness(0.85);
}

.set-announcement__logo,
.set-awaiting__logo {
  display: block;
}

.set-announcement__logo img,
.set-awaiting__logo img {
  max-width: 280px;
  height: auto;
}

.set-announcement__title,
.set-awaiting__title {
  font-family: var(--font-header);
  font-size: var(--text-md);
  font-weight: var(--font-weight-lg);
  color: var(--colour-text);
  margin: 0;
}

.set-announcement__release {
  font-family: var(--font-paragraph);
  font-size: var(--text-sm);
  color: var(--colour-text-muted);
  margin: 0;
}


/* ========================================
   COUNTDOWN TIMER
   ======================================== */

.countdown {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin: var(--space-16) 0;
}

.countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 64px;
  padding: 0.75rem 1rem;
  background: var(--colour-paper);
  border-radius: var(--radius-xs);
  box-shadow:
    0 2px 1px -1px var(--shadow-key-umbra),
    0 1px 1px 0 var(--shadow-key-penumbra),
    0 1px 3px 0 var(--shadow-key-ambient);
}

.countdown__value {
  font-family: var(--font-header);
  font-size: var(--text-md);
  font-weight: var(--font-weight-lg);
  color: var(--colour-accent);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}

.countdown__label {
  font-family: var(--font-paragraph);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--colour-text-muted);
}


/* ========================================
   NOTIFY-ME BUTTON
   ======================================== */

.btn--notify {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: 0.6rem 1.2rem;
  border: 2px solid var(--colour-primary);
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--colour-primary);
  font-family: var(--font-paragraph);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-md);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  min-height: 44px; /* WCAG 2.5.8 touch target */
}

.btn--notify:hover {
  background: var(--colour-primary);
  color: #fff;
}

.btn--notify:focus-visible {
  outline: 3px solid var(--colour-primary);
  outline-offset: 2px;
}

.btn--notify.is-subscribed {
  background: var(--colour-success);
  border-color: var(--colour-success);
  color: #fff;
}

.btn--notify.is-subscribed:hover {
  background: #0ea572;
  border-color: #0ea572;
}

.btn--notify:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}


/* ========================================
   ANNOUNCED/AWAITING BODY
   ======================================== */

.set-announcement__body,
.set-awaiting__body {
  margin-top: var(--space-32);
  font-family: var(--font-paragraph);
  font-size: var(--text-sm);
  color: var(--colour-text);
  line-height: 1.6;
}

.set-announcement__body p,
.set-awaiting__body p {
  margin: 0 0 var(--space-16);
}

.btn--ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: 0.5rem 1rem;
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--colour-text);
  font-family: var(--font-paragraph);
  font-size: var(--text-sm);
  text-decoration: none;
  transition: border-color 0.15s ease, background 0.15s ease;
  min-height: 44px;
}

.btn--ghost:hover {
  border-color: var(--colour-primary);
  background: rgba(16, 76, 145, 0.05);
}

.btn--ghost:focus-visible {
  outline: 3px solid var(--colour-primary);
  outline-offset: 2px;
}


/* ========================================
   AWAITING DATA — message card
   ======================================== */

.set-awaiting__message {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  padding: var(--space-16);
  background: var(--colour-paper);
  border-radius: var(--radius-xs);
  text-align: left;
  margin-bottom: var(--space-16);
  box-shadow:
    0 2px 1px -1px var(--shadow-key-umbra),
    0 1px 1px 0 var(--shadow-key-penumbra),
    0 1px 3px 0 var(--shadow-key-ambient);
}

.set-awaiting__message > svg {
  flex-shrink: 0;
  color: var(--colour-accent);
  margin-top: 2px;
}

.set-awaiting__message p {
  margin: 0;
}

.set-awaiting__meta {
  font-size: var(--text-xs);
  color: var(--colour-text-muted);
}

.set-awaiting__meta a {
  color: var(--colour-secondary);
  text-decoration: underline;
}


/* ========================================
   PRE-RELEASE BADGE ON EXPANSION PAGE
   ======================================== */

.exp-rd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8);
}

.exp-rd .set-state-badge {
  position: static;
}


/* ========================================
   RESPONSIVE
   ======================================== */

@media (max-width: 480px) {
  .countdown {
    gap: 0.5rem;
  }

  .countdown__unit {
    min-width: 52px;
    padding: 0.5rem 0.6rem;
  }

  .countdown__value {
    font-size: 1.5rem;
  }

  .set-announcement__logo img,
  .set-awaiting__logo img {
    max-width: 200px;
  }
}