/* WordroW PoP */

.pop-body {
  --pop-cyan: hsl(184, 100%, 50%);
  --pop-pink: hsl(326, 100%, 58%);
  --pop-lime: hsl(92, 100%, 48%);
  --pop-yellow: hsl(48, 100%, 58%);
  --pop-violet: hsl(266, 100%, 66%);
  background-image:
    radial-gradient(circle at 10% 8%, hsla(326, 100%, 58%, 0.28) 0 6em, transparent 6.1em),
    radial-gradient(circle at 88% 24%, hsla(184, 100%, 50%, 0.26) 0 7em, transparent 7.1em),
    radial-gradient(circle at 50% 92%, hsla(92, 100%, 48%, 0.2) 0 8em, transparent 8.1em),
    linear-gradient(135deg, hsl(188, 100%, 93%) 0%, hsl(310, 100%, 94%) 48%, hsl(50, 100%, 84%) 100%);
  background-attachment: fixed;
  overflow-x: hidden;
}

.pop-main {
  display: flex;
  flex-direction: column;
  gap: 0.65em;
}

.pop-title {
  text-align: center;
}

.pop-title h1 {
  background: linear-gradient(90deg, var(--pop-lime), var(--pop-cyan), var(--pop-pink), var(--pop-yellow));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 1.8em;
  line-height: 1;
  text-transform: uppercase;
}

.pop-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55em;
}

.pop-stats div,
.pop-instructions,
.pop-working,
.pop-share-panel {
  background:
    linear-gradient(135deg, hsla(0, 0%, 100%, 0.9), hsla(184, 100%, 92%, 0.8)),
    var(--color-surface);
  border: 1px solid hsla(218, 30%, 15%, 0.12);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 30px hsla(266, 100%, 42%, 0.18);
}

.pop-stats div {
  display: flex;
  flex-direction: column;
  gap: 0.15em;
  padding: 0.55em 0.7em;
  text-align: center;
}

.pop-stats span {
  color: var(--color-text-muted);
  font-size: 0.78em;
  text-transform: uppercase;
}

.pop-stats strong {
  color: var(--pop-violet);
  font-size: 1.12em;
}

.pop-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55em;
  justify-content: center;
}

.pop-actions .btn {
  padding: 0.7em 1.1em;
}

.pop-actions .btn-play {
  background: linear-gradient(135deg, var(--pop-pink), var(--pop-yellow));
  border: 0;
  color: hsl(218, 30%, 10%);
  box-shadow: 0 10px 24px hsla(326, 100%, 42%, 0.32);
}

.pop-instructions {
  color: var(--color-text-muted);
  min-height: 2.5em;
  padding: 0.65em 0.8em;
  text-align: center;
}

.pop-board {
  display: flex;
  flex-direction: column;
  gap: 0.42em;
}

.pop-row {
  display: block;
}

.pop-row-tiles,
.pop-scramble-row {
  display: grid;
  gap: 0.75em;
  grid-template-columns: repeat(5, 3em);
  justify-content: center;
}

.pop-tile {
  all: unset;
  align-items: center;
  aspect-ratio: 1;
  border-radius: var(--radius);
  box-shadow: 0 7px 16px hsla(218, 65%, 42%, 0.14);
  box-sizing: border-box;
  cursor: pointer;
  display: flex;
  font-size: 1.5em;
  font-weight: bold;
  justify-content: center;
  line-height: 1;
  min-width: 0;
  width: 2em;
  text-transform: uppercase;
}

.pop-tile.scrambled {
  background: linear-gradient(135deg, hsl(205, 100%, 84%), hsl(225, 100%, 72%));
  border: 1px solid hsla(225, 100%, 34%, 0.42);
  color: hsl(218, 30%, 10%);
}

.pop-tile.answer {
  background: linear-gradient(135deg, hsl(205, 100%, 84%), hsl(225, 100%, 72%));
  border: 2px solid hsla(225, 100%, 34%, 0.42);
  color: hsl(218, 30%, 10%);
}

.pop-tile.answer.good {
  background: linear-gradient(135deg, hsl(119, 100%, 64%), hsl(150, 100%, 48%));
  border-color: hsl(140, 100%, 28%);
}

.pop-tile.answer.bad {
  background: linear-gradient(135deg, hsl(0, 100%, 66%), hsl(326, 100%, 62%));
  border-color: hsl(0, 100%, 38%);
  color: white;
}

.pop-tile.choice {
  background: linear-gradient(135deg, hsl(0, 0%, 96%), hsl(220, 12%, 78%));
  border: 1px solid hsl(220, 10%, 46%);
  color: hsl(218, 30%, 10%);
}

.pop-tile.solved {
  background: linear-gradient(135deg, hsl(92, 100%, 76%), hsl(128, 100%, 58%), hsl(154, 100%, 43%));
  border: 1px solid hsla(145, 100%, 24%, 0.56);
  color: hsl(218, 30%, 10%);
}

.pop-tile.idle {
  background: linear-gradient(135deg, hsl(0, 0%, 96%), hsl(220, 12%, 78%));
  border: 1px dashed hsl(220, 10%, 46%);
  box-shadow: 0 7px 16px hsla(218, 25%, 30%, 0.12);
  color: transparent;
  cursor: default;
}

.pop-row.preview .pop-tile.scrambled {
  color: transparent;
  filter: blur(0.32em) saturate(1.35);
  text-shadow: 0 0 0.8em hsla(0, 0%, 100%, 0.95);
}

.pop-working {
  display: flex;
  flex-direction: column;
  gap: 0.45em;
  padding: 0.65em;
}

.pop-share-panel {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: 0.45em;
  padding: 0.65em;
  text-align: center;
}

.pop-share-status {
  color: var(--color-text-muted);
  font-size: 0.9em;
  text-align: center;
}

.pop-working[hidden],
.pop-share-panel[hidden] {
  display: none;
}

.pop-row.just-solved {
  animation: pop-row 0.45s ease-out;
}

.pop-complete-dialog nav {
  display: flex;
  justify-content: center;
}

#pop-complete-delta {
  color: var(--pop-violet);
  font-weight: 800;
}

@keyframes pop-row {
  0% { transform: scale(1); }
  42% { transform: scale(1.055); }
  100% { transform: scale(1); }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pop-body {
    background-image:
      radial-gradient(circle at 10% 8%, hsla(326, 100%, 58%, 0.18) 0 6em, transparent 6.1em),
      radial-gradient(circle at 88% 24%, hsla(184, 100%, 50%, 0.16) 0 7em, transparent 7.1em),
      radial-gradient(circle at 50% 92%, hsla(92, 100%, 48%, 0.13) 0 8em, transparent 8.1em),
      linear-gradient(135deg, hsl(265, 48%, 10%) 0%, hsl(225, 40%, 11%) 48%, hsl(280, 36%, 14%) 100%);
  }

  :root:not([data-theme="light"]) .pop-stats div,
  :root:not([data-theme="light"]) .pop-instructions,
  :root:not([data-theme="light"]) .pop-working,
  :root:not([data-theme="light"]) .pop-share-panel {
    background:
      linear-gradient(135deg, hsla(265, 38%, 24%, 0.88), hsla(220, 38%, 16%, 0.86)),
      var(--color-surface);
    border-color: hsla(0, 0%, 100%, 0.12);
    box-shadow: 0 12px 30px hsla(265, 80%, 4%, 0.44);
  }

  :root:not([data-theme="light"]) .pop-stats strong {
    color: var(--pop-cyan);
  }

  :root:not([data-theme="light"]) .pop-actions .btn-play,
  :root:not([data-theme="light"]) #pop-share-btn,
  :root:not([data-theme="light"]) #pop-complete-share {
    color: hsl(220, 30%, 96%);
  }

  :root:not([data-theme="light"]) .pop-actions .btn-play:hover,
  :root:not([data-theme="light"]) #pop-share-btn:hover,
  :root:not([data-theme="light"]) #pop-complete-share:hover {
    color: hsl(220, 30%, 96%);
  }

  :root:not([data-theme="light"]) .pop-actions .btn-secondary,
  :root:not([data-theme="light"]) #pop-complete-challenge {
    color: hsl(220, 30%, 96%);
  }

  :root:not([data-theme="light"]) .pop-actions .btn-secondary:hover,
  :root:not([data-theme="light"]) #pop-complete-challenge:hover {
    color: hsl(220, 30%, 96%);
  }

  :root:not([data-theme="light"]) .pop-tile.answer {
    background: linear-gradient(135deg, hsl(210, 72%, 34%), hsl(228, 70%, 28%));
    border-color: hsl(206, 100%, 58%);
    color: hsl(210, 100%, 94%);
  }

  :root:not([data-theme="light"]) .pop-tile.scrambled {
    background: linear-gradient(135deg, hsl(210, 72%, 34%), hsl(228, 70%, 28%));
    border-color: hsl(206, 100%, 58%);
    color: hsl(210, 100%, 94%);
  }

  :root:not([data-theme="light"]) .pop-tile.choice {
    background: linear-gradient(135deg, hsl(220, 12%, 34%), hsl(220, 10%, 22%));
    border-color: hsl(220, 10%, 48%);
    color: hsl(0, 0%, 96%);
  }

  :root:not([data-theme="light"]) .pop-tile.idle {
    background: linear-gradient(135deg, hsl(220, 12%, 34%), hsl(220, 10%, 22%));
    border-color: hsl(220, 10%, 48%);
  }
}

:root[data-theme="dark"] .pop-body {
  background-image:
    radial-gradient(circle at 10% 8%, hsla(326, 100%, 58%, 0.18) 0 6em, transparent 6.1em),
    radial-gradient(circle at 88% 24%, hsla(184, 100%, 50%, 0.16) 0 7em, transparent 7.1em),
    radial-gradient(circle at 50% 92%, hsla(92, 100%, 48%, 0.13) 0 8em, transparent 8.1em),
    linear-gradient(135deg, hsl(265, 48%, 10%) 0%, hsl(225, 40%, 11%) 48%, hsl(280, 36%, 14%) 100%);
}

:root[data-theme="dark"] .pop-stats div,
:root[data-theme="dark"] .pop-instructions,
:root[data-theme="dark"] .pop-working,
:root[data-theme="dark"] .pop-share-panel {
  background:
    linear-gradient(135deg, hsla(265, 38%, 24%, 0.88), hsla(220, 38%, 16%, 0.86)),
    var(--color-surface);
  border-color: hsla(0, 0%, 100%, 0.12);
  box-shadow: 0 12px 30px hsla(265, 80%, 4%, 0.44);
}

:root[data-theme="dark"] .pop-stats strong {
  color: var(--pop-cyan);
}

:root[data-theme="dark"] .pop-actions .btn-play,
:root[data-theme="dark"] #pop-share-btn,
:root[data-theme="dark"] #pop-complete-share {
  color: hsl(220, 30%, 96%);
}

:root[data-theme="dark"] .pop-actions .btn-play:hover,
:root[data-theme="dark"] #pop-share-btn:hover,
:root[data-theme="dark"] #pop-complete-share:hover {
  color: hsl(220, 30%, 96%);
}

:root[data-theme="dark"] .pop-actions .btn-secondary,
:root[data-theme="dark"] #pop-complete-challenge {
  color: hsl(220, 30%, 96%);
}

:root[data-theme="dark"] .pop-actions .btn-secondary:hover,
:root[data-theme="dark"] #pop-complete-challenge:hover {
  color: hsl(220, 30%, 96%);
}

:root[data-theme="dark"] .pop-tile.answer {
  background: linear-gradient(135deg, hsl(210, 72%, 34%), hsl(228, 70%, 28%));
  border-color: hsl(206, 100%, 58%);
  color: hsl(210, 100%, 94%);
}

:root[data-theme="dark"] .pop-tile.scrambled {
  background: linear-gradient(135deg, hsl(210, 72%, 34%), hsl(228, 70%, 28%));
  border-color: hsl(206, 100%, 58%);
  color: hsl(210, 100%, 94%);
}

:root[data-theme="dark"] .pop-tile.choice {
  background: linear-gradient(135deg, hsl(220, 12%, 34%), hsl(220, 10%, 22%));
  border-color: hsl(220, 10%, 48%);
  color: hsl(0, 0%, 96%);
}

:root[data-theme="dark"] .pop-tile.idle {
  background: linear-gradient(135deg, hsl(220, 12%, 34%), hsl(220, 10%, 22%));
  border-color: hsl(220, 10%, 48%);
}