.wr-game {
  --game-accent: var(--violet, #b39cff);
  --game-error: #ff919e;
  color: var(--text, #f0edf8);
  width: min(100%, 960px);
  margin-inline: auto;
}

.wr-game--blast {
  --game-accent: var(--peach, #ffad85);
}

.wr-game-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-block-end: 22px;
}

.wr-game-top h1 {
  margin: 0 0 4px;
  font-size: clamp(28px, 6vw, 42px);
  line-height: 1.08;
  letter-spacing: -.04em;
}

.wr-game-top p,
.wr-game-header p {
  margin: 0;
  color: var(--muted, #b4a9c7);
}

.wr-game-title {
  display: flex;
  align-items: center;
  gap: 13px;
  min-width: 0;
}

.wr-game-title p {
  overflow-wrap: anywhere;
}

.wr-game-mode-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  inline-size: 52px;
  block-size: 52px;
  border: 1px solid color-mix(in srgb, var(--game-accent) 26%, var(--line));
  border-radius: 16px;
  color: var(--game-accent);
  background: color-mix(in srgb, var(--game-accent) 16%, var(--panel));
}

.wr-game-back,
.wr-game-audio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  padding: 4px 0;
  background: none;
  color: var(--game-accent);
  font: inherit;
  cursor: pointer;
}

.wr-game-back:hover,
.wr-game-audio:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.wr-game-panel {
  padding: clamp(15px, 4vw, 32px);
  border: 1px solid var(--line, #39314b);
  border-radius: 22px;
  background: var(--panel, #211b30);
}

.wr-game [tabindex="-1"]:focus {
  outline: none;
}

.wr-game button:focus-visible {
  outline: 2px solid var(--game-accent);
  outline-offset: 3px;
}

.wr-game-unavailable,
.wr-game-result {
  display: grid;
  justify-items: center;
  gap: 17px;
  padding: 22px 0 14px;
  text-align: center;
}

.wr-game-unavailable h2,
.wr-game-result h2,
.wr-game-header h2 {
  margin: 0;
  font-size: clamp(19px, 4vw, 27px);
  letter-spacing: -.025em;
}

.wr-game-unavailable p {
  max-width: 42ch;
  margin: 0 0 10px;
  color: var(--muted, #b4a9c7);
  line-height: 1.5;
}

.wr-game-result-icon {
  display: grid;
  place-items: center;
  inline-size: clamp(58px, 16vw, 86px);
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--game-accent) 35%, transparent);
  border-radius: 29%;
  color: var(--game-accent);
  background: radial-gradient(circle at 40% 28%, color-mix(in srgb, var(--game-accent) 24%, var(--panel)), var(--panel));
}

.wr-game-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 20px;
  flex-wrap: wrap;
  margin: 0 0 18px;
}

.wr-game-header p {
  margin-top: 5px;
  font-size: 14px;
}

.wr-game-clock {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  align-self: start;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--game-accent) 28%, transparent);
  background: color-mix(in srgb, var(--game-accent) 10%, transparent);
  color: var(--game-accent);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.wr-game-sr {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}

.wr-match-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(6px, 2vw, 13px);
}

.wr-match-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  color: var(--muted);
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.wr-match-progress progress {
  flex: 1;
  width: 0;
  height: 7px;
  appearance: none;
  overflow: hidden;
  border: 0;
  border-radius: 10px;
  background: var(--card);
  accent-color: var(--success-ink);
}

.wr-match-progress progress::-webkit-progress-bar {
  background: color-mix(in srgb, var(--muted) 20%, var(--panel));
}

.wr-match-progress progress::-webkit-progress-value {
  border-radius: inherit;
  background: var(--success-ink);
}

.wr-match-progress progress::-moz-progress-bar {
  border-radius: inherit;
  background: var(--success-ink);
}

.wr-match-column {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span var(--pair-rows);
  align-content: start;
  gap: clamp(6px, 2vw, 13px);
}

.wr-match-column h3 {
  margin: 0 0 2px;
  color: var(--muted, #b4a9c7);
  font-size: 13px;
  font-weight: 600;
}

.wr-match-cell,
.wr-asteroid {
  min-block-size: 52px;
  padding: 9px clamp(8px, 2vw, 16px);
  border: 1px solid var(--line, #39314b);
  border-radius: 13px;
  background: var(--card, #292238);
  color: inherit;
  font: inherit;
  line-height: 1.3;
  text-align: start;
  cursor: pointer;
  overflow-wrap: anywhere;
  transition: border-color 180ms, background 180ms;
}

.wr-match-cell:not(:disabled):hover,
.wr-asteroid:not([aria-disabled="true"]):hover {
  border-color: var(--game-accent);
}

.wr-match-cell[aria-pressed="true"] {
  border-color: var(--game-accent);
  background: color-mix(in srgb, var(--game-accent) 24%, var(--panel, #211b30));
}

.wr-match-cell {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

.wr-match-cell svg {
  flex: 0 0 auto;
}

.wr-match-cell.is-matched,
.wr-asteroid.is-correct {
  border-color: var(--success-line);
  background: var(--success-bg);
  color: var(--success-ink);
  cursor: default;
}

.wr-match-cell.is-wrong,
.wr-asteroid.is-wrong {
  border-color: var(--game-error);
  background: color-mix(in srgb, var(--game-error) 14%, var(--panel, #211b30));
}

.wr-game-status {
  min-height: 1.5em;
  margin: 12px 0 0;
  color: var(--muted, #b4a9c7);
  line-height: 1.5;
  font-size: 14px;
}

.wr-game-status span {
  display: block;
  margin-top: 4px;
  font-style: italic;
}

.wr-blast-progress {
  display: block;
  inline-size: 100%;
  block-size: 5px;
  margin-block-end: 13px;
  accent-color: var(--game-accent);
}

.wr-space {
  position: relative;
  isolation: isolate;
  border: 1px solid var(--line, #39314b);
  border-radius: 18px;
  padding: clamp(13px, 4vw, 26px);
  background: radial-gradient(ellipse at 50% 4%, #372657 0%, #171623 72%);
  color: #f2effb;
}

.wr-space::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  border-radius: inherit;
  background-image: radial-gradient(circle at center, #c9b3ff 0 .7px, transparent 1px),
                    radial-gradient(circle at center, #a994e5 0 1px, transparent 1.3px);
  background-position: 12px 6px, 36px 19px;
  background-size: 55px 65px, 77px 89px;
  opacity: .35;
  content: "";
}

.wr-game-countdown {
  display: grid;
  grid-template-columns: minmax(95px, 190px) minmax(0, 300px);
  justify-content: center;
  align-items: center;
  gap: clamp(9px, 3vw, 32px);
  min-block-size: 234px;
  text-align: center;
}

.wr-game-pilot {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 0 21px #d5baff5c);
}

.wr-pilot-body {
  animation: wr-pilot-hover .9s ease-in-out infinite alternate;
}

.wr-pilot-flame {
  transform-box: fill-box;
  transform-origin: top center;
  animation: wr-engine .38s ease-in-out infinite alternate;
}

.wr-countdown-copy h2 {
  margin: 0;
  font-size: clamp(.8rem, 2.7vw, 1.04rem);
  letter-spacing: 0;
  color: #ecdfff;
}

.wr-countdown-number {
  line-height: 1.05;
  color: #fff2c0;
  font-size: clamp(3.4rem, 13vw, 5rem);
  font-weight: 850;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 34px #ffd2817a;
  animation: wr-countdown-beat 1s ease-out infinite;
}

.wr-countdown-copy p {
  font-size: clamp(.77rem, 2.6vw, .94rem);
  line-height: 1.5;
  color: #d3c7e8;
}

.wr-blast-word {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-block-size: 78px;
  padding-bottom: 14px;
  text-align: center;
}

.wr-blast-word strong {
  align-self: center;
  font-size: clamp(22px, 6vw, 48px);
  overflow-wrap: anywhere;
}

.wr-game-audio {
  color: #dbcfff;
  font-size: 13px;
}

.wr-blast-targets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(8px, 2vw, 18px);
}

.wr-asteroid {
  display: flex;
  align-items: center;
  gap: clamp(5px, 1.5vw, 11px);
  min-block-size: 66px;
  border-radius: 18px 24px 18px 22px;
  border-color: #67548c;
  background: #322749;
  box-shadow: inset 2px 3px 0 #ffffff10, inset -3px -4px 0 #100c2470;
}

.wr-asteroid::after {
  inline-size: 9px;
  block-size: 7px;
  flex: 0 0 auto;
  margin-inline-start: auto;
  border: 1px solid #c9aaff50;
  border-radius: 50%;
  background: #ba98ff24;
  transform: rotate(-37deg);
  content: "";
}

.wr-asteroid.is-correct {
  border-color: #66a979;
  color: #b0f0bd;
  background: #254134;
}

.wr-asteroid:not([aria-disabled="true"]) {
  animation: wr-orbit 2.8s ease-in-out infinite alternate;
}

.wr-asteroid:nth-child(2n) {
  animation-delay: -.8s;
  animation-direction: alternate-reverse;
}

.wr-asteroid:hover,
.wr-asteroid:focus-visible {
  animation-play-state: paused;
}

.wr-asteroid.is-hit {
  animation: wr-impact .4s ease;
}

.wr-asteroid.is-wrong {
  background: #4e2d40;
}

.wr-asteroid-key {
  flex: 0 0 auto;
  color: #c7b1fa;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

@keyframes wr-impact {
  30% { scale: 1.06; box-shadow: 0 0 30px 9px #d2ff7f72; }
}

@keyframes wr-orbit {
  to { translate: 0 -4px; }
}

@keyframes wr-pilot-hover {
  to { translate: 0 -5px; }
}

@keyframes wr-engine {
  to { scale: .9 1.11; }
}

@keyframes wr-countdown-beat {
  from { scale: .85; }
  32%, to { scale: 1; }
}

.wr-game-results,
.wr-game-result-actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}

.wr-game-results {
  margin-bottom: 5px;
  width: min(100%, 550px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.wr-game-results div {
  min-inline-size: 0;
  padding: 10px 12px;
  border: 1px solid var(--line, #39314b);
  border-radius: 11px;
}

.wr-game-results dt {
  margin-bottom: 5px;
  color: var(--muted, #b4a9c7);
  font-size: 12px;
}

.wr-game-results dd {
  margin: 0;
  font-size: clamp(16px, 4vw, 22px);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.wr-game-results .wr-game-xp {
  background: color-mix(in srgb, var(--game-accent) 12%, var(--panel));
  border-color: color-mix(in srgb, var(--game-accent) 27%, var(--line));
}

.wr-game-xp dd {
  color: var(--game-accent);
}

.wr-game-perfect h2, .wr-game-perfect .wr-game-results dd {
  color: var(--success-ink);
}

.wr-game-perfect .wr-game-results div,
.wr-game-perfect .wr-game-results .wr-game-xp {
  background: var(--success-bg);
  border-color: var(--success-line);
}

.wr-game-perfect .wr-game-result-icon {
  border-color: var(--success-line);
  background: var(--success-bg);
  color: var(--success-ink);
}

@media (max-width: 550px) {
  .wr-game-countdown {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    align-content: center;
    gap: 2px;
    min-block-size: 212px;
  }

  .wr-game-pilot { width: clamp(90px, 26vw, 110px); }
  .wr-countdown-copy { width: min(100%, 34ch); }
  .wr-countdown-number { font-size: clamp(3.2rem, 13vw, 4.4rem); }
}

@media (max-width: 420px) {
  .wr-match-cell,
  .wr-asteroid { font-size: 14px; }
  .wr-asteroid::after { display: none; }
  .wr-game-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .wr-match-cell,
  .wr-asteroid { transition: none; }
  .wr-asteroid:not([aria-disabled="true"]),
  .wr-asteroid.is-hit,
  .wr-pilot-body,
  .wr-pilot-flame,
  .wr-countdown-number { animation: none; }
}