/*
 * Quick Match artwork layer.
 * Visual presentation is intentionally kept separate from matchmaking logic.
 */
.np-quick-match {
  --np-quick-atlas: url("/theme-assets/quick-match/classic-atlas-v1.png");
  --np-quick-sprite-size: 330% 930%;
  --np-quick-text: #f3dfb5;
  --np-quick-muted: #c9aa78;
  --np-quick-accent: #e5ad55;
  --np-quick-danger: #e0a18f;
  background:
    radial-gradient(circle at 50% 45%, rgba(92, 53, 21, .22), transparent 46%),
    rgba(3, 2, 1, .9);
  backdrop-filter: blur(12px) brightness(.62);
}

html[data-home-theme="mrak"] .np-quick-match {
  --np-quick-atlas: url("/theme-assets/quick-match/mrak-atlas-v1.png");
  --np-quick-text: #f0ded4;
  --np-quick-muted: #bba39a;
  --np-quick-accent: #e0644f;
  --np-quick-danger: #ff9b87;
  background:
    radial-gradient(circle at 50% 45%, rgba(136, 23, 13, .22), transparent 48%),
    rgba(2, 1, 1, .92);
}

html[data-home-theme="worlds"] .np-quick-match {
  --np-quick-atlas: url("/theme-assets/quick-match/worlds-atlas-v1.png");
  --np-quick-text: #dcf8f4;
  --np-quick-muted: #99c8c8;
  --np-quick-accent: #58e4e5;
  --np-quick-danger: #ff9d87;
  background:
    radial-gradient(circle at 50% 45%, rgba(14, 135, 151, .22), transparent 48%),
    rgba(1, 5, 7, .92);
}

html[data-home-theme="kids"] .np-quick-match {
  --np-quick-atlas: url("/theme-assets/quick-match/kids-atlas-v1.png");
  --np-quick-text: #f4e3ff;
  --np-quick-muted: #c7acd7;
  --np-quick-accent: #efb85e;
  --np-quick-danger: #ffc0b8;
  background:
    radial-gradient(circle at 50% 45%, rgba(99, 54, 157, .25), transparent 48%),
    rgba(3, 2, 9, .91);
}

.np-quick-dialog {
  box-sizing: border-box;
  width: min(820px, 96vw);
  min-height: min(500px, calc(100dvh - 24px));
  max-height: calc(100dvh - 20px);
  overflow: auto;
  border: 0;
  padding: clamp(48px, 5vw, 66px) clamp(52px, 7vw, 88px) clamp(42px, 4.5vw, 58px);
  color: var(--np-quick-text);
  background-color: #080503;
  background-image: var(--np-quick-atlas);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 176%;
  box-shadow:
    0 38px 120px rgba(0, 0, 0, .9),
    0 0 52px color-mix(in srgb, var(--np-quick-accent) 16%, transparent);
  isolation: isolate;
  scrollbar-width: thin;
  scrollbar-color: var(--np-quick-accent) rgba(0, 0, 0, .45);
}

.np-quick-dialog::before {
  display: none;
}

.np-quick-dialog::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 7% 10% 9%;
  background: radial-gradient(ellipse, rgba(0, 0, 0, .08), rgba(0, 0, 0, .42) 100%);
  pointer-events: none;
}

.np-quick-close {
  top: 27px;
  right: 31px;
  width: 40px;
  height: 40px;
  border-color: color-mix(in srgb, var(--np-quick-accent) 72%, #4a2b16);
  color: var(--np-quick-text);
  background: rgba(5, 3, 2, .74);
  box-shadow: inset 0 0 13px rgba(0, 0, 0, .75), 0 0 14px rgba(0, 0, 0, .55);
  transition: color .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}

.np-quick-close:hover {
  color: #fff;
  border-color: var(--np-quick-accent);
  box-shadow: inset 0 0 13px rgba(0, 0, 0, .75), 0 0 18px color-mix(in srgb, var(--np-quick-accent) 42%, transparent);
}

.np-quick-dialog header small {
  color: var(--np-quick-accent);
  font-size: clamp(.62rem, .8vw, .74rem);
  letter-spacing: .32em;
  text-shadow: 0 2px 7px #000;
}

.np-quick-dialog h2 {
  margin: .24rem 0 .12rem;
  color: var(--np-quick-text);
  font-size: clamp(2.65rem, 6vw, 4.7rem);
  line-height: .96;
  letter-spacing: .14em;
  text-shadow: 0 3px 3px #000, 0 0 20px color-mix(in srgb, var(--np-quick-accent) 20%, transparent);
}

.np-quick-dialog header p {
  margin: .55rem auto 1.05rem;
  color: var(--np-quick-muted);
  font-size: clamp(.72rem, 1.15vw, .88rem);
  text-shadow: 0 2px 4px #000;
}

.np-quick-modes {
  gap: 14px;
}

.np-quick-modes button,
.np-quick-dialog footer button,
.np-quick-status {
  border: 0;
  background-color: transparent;
  background-image: var(--np-quick-atlas);
  background-repeat: no-repeat;
  background-size: var(--np-quick-sprite-size);
}

.np-quick-modes button {
  box-sizing: border-box;
  min-height: 96px;
  aspect-ratio: 2.7 / 1;
  padding: 16px 34px;
  justify-content: center;
  align-items: center;
  color: var(--np-quick-muted);
  background-position: 2.5% 65.6%;
  filter: none;
  text-align: center;
  transform: none;
  transition: color .16s ease;
}

.np-quick-modes button.active {
  border: 0;
  background-color: transparent;
  background-image: var(--np-quick-atlas);
  background-repeat: no-repeat;
  background-size: var(--np-quick-sprite-size);
  box-shadow: none;
}

.np-quick-modes button[data-mode="normal"]:hover,
.np-quick-modes button[data-mode="normal"]:focus-visible {
  color: var(--np-quick-text);
  background-position: 50% 65.6%;
  filter: none;
}

.np-quick-modes button[data-mode="normal"].active {
  color: #fff3d0;
  background-position: 97.5% 65.6%;
}

.np-quick-modes button[data-mode="ranked"] {
  background-position: 2.5% 80.7%;
}

.np-quick-modes button[data-mode="ranked"]:hover,
.np-quick-modes button[data-mode="ranked"]:focus-visible {
  color: var(--np-quick-text);
  background-position: 50% 80.7%;
  filter: none;
}

.np-quick-modes button[data-mode="ranked"].active {
  color: #fff3d0;
  background-position: 97.5% 80.7%;
}

.np-quick-modes button:active {
  transform: none;
}

.np-quick-modes button:disabled {
  cursor: default;
  filter: none;
  opacity: 1;
}

.np-quick-modes b {
  color: inherit;
  font: 900 clamp(.82rem, 1.1vw, .98rem)/1.1 Literata, Georgia, serif;
  letter-spacing: .1em;
  text-shadow: 0 2px 3px #000;
  white-space: nowrap;
}

.np-quick-modes span {
  color: inherit;
  max-width: 100%;
  margin-top: .42rem;
  font: 700 clamp(.62rem, .82vw, .72rem)/1.3 Literata, Georgia, serif;
  text-shadow: 0 2px 3px #000;
  opacity: .9;
}

.np-quick-status {
  position: relative;
  box-sizing: border-box;
  min-height: 108px;
  margin: 12px 0 0;
  padding: 21px 118px 18px 30px;
  color: var(--np-quick-text);
  background-position: 97.5% 95.9%;
  text-align: left;
  filter: none;
}

.np-quick-spinner {
  position: absolute;
  right: 41px;
  top: 50%;
  width: 42px;
  height: 42px;
  margin: 0;
  border-color: color-mix(in srgb, var(--np-quick-accent) 30%, transparent);
  border-top-color: var(--np-quick-accent);
  box-shadow: 0 0 17px color-mix(in srgb, var(--np-quick-accent) 28%, transparent);
  transform: translateY(-50%);
  animation: np-quick-art-spin .9s linear infinite;
}

.np-quick-status strong {
  margin-top: 0;
  color: var(--np-quick-text);
  font: 900 clamp(.84rem, 1.1vw, 1rem)/1.15 Literata, Georgia, serif;
  text-shadow: 0 2px 3px #000;
}

.np-quick-status p {
  margin-top: .26rem;
  color: var(--np-quick-muted);
  font: 700 clamp(.61rem, .8vw, .7rem)/1.3 Literata, Georgia, serif;
}

.np-quick-status time {
  position: absolute;
  right: 29px;
  bottom: 9px;
  min-width: 65px;
  margin: 0;
  color: var(--np-quick-accent);
  font-size: .64rem;
  text-align: center;
  text-shadow: 0 2px 3px #000;
}

.np-quick-rank {
  justify-content: flex-start;
  margin-top: .35rem;
}

.np-quick-rank b {
  color: var(--np-quick-text);
  font-size: clamp(.62rem, .8vw, .72rem);
  line-height: 1.25;
}

.np-quick-rank img {
  width: 38px;
  height: 38px;
}

.np-quick-rank small {
  color: var(--np-quick-muted);
}

.np-quick-message {
  min-height: 1.1em;
  margin: .42rem 0;
  color: var(--np-quick-text);
  text-shadow: 0 2px 4px #000;
}

.np-quick-message.error {
  color: var(--np-quick-danger);
}

.np-quick-dialog footer {
  gap: 12px;
}

.np-quick-dialog footer button {
  box-sizing: border-box;
  min-width: min(290px, 100%);
  min-height: 64px;
  border: 0;
  padding: 14px 28px;
  color: var(--np-quick-text);
  background-position: 2.5% 95.9%;
  font: 900 clamp(.74rem, 1vw, .86rem)/1.1 Literata, Georgia, serif;
  letter-spacing: .07em;
  text-shadow: 0 2px 4px #000;
  filter: none;
  transform: none;
  transition: color .16s ease;
}

.np-quick-dialog footer button:hover,
.np-quick-dialog footer button:focus-visible {
  color: #fff;
  filter: none;
}

.np-quick-dialog footer button:active {
  transform: none;
}

.np-quick-dialog footer .np-quick-cancel,
.np-quick-dialog footer .np-quick-abandon {
  color: #ffe3dc;
  background-color: transparent;
  background-image: var(--np-quick-atlas);
  background-repeat: no-repeat;
  background-size: var(--np-quick-sprite-size);
  background-position: 50% 95.9%;
}

@keyframes np-quick-art-spin {
  from { transform: translateY(-50%) rotate(0deg); }
  to { transform: translateY(-50%) rotate(360deg); }
}

@media (max-width: 700px) {
  .np-quick-dialog {
    width: min(590px, 97vw);
    min-height: 0;
    padding: 48px 27px 35px;
    background-size: auto 100%;
    background-position: center;
  }

  .np-quick-close {
    top: 18px;
    right: 20px;
  }

  .np-quick-dialog h2 {
    font-size: clamp(2.3rem, 14vw, 3.8rem);
  }

  .np-quick-modes {
    grid-template-columns: 1fr;
    gap: 7px;
  }

  .np-quick-modes button {
    width: 100%;
    min-height: 82px;
    aspect-ratio: auto;
  }

  .np-quick-status {
    min-height: 118px;
    padding-left: 23px;
    padding-right: 95px;
  }

  .np-quick-spinner {
    right: 29px;
  }

  .np-quick-dialog footer button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .np-quick-spinner {
    animation-duration: 1.8s;
  }

  .np-quick-modes button,
  .np-quick-dialog footer button,
  .np-quick-close {
    transition: none;
  }
}