html.np-quick-open { overflow: hidden; }

.game-home .main-menu .menu-button[data-np-quick-play],
.game-home .main-menu .menu-button[data-np-tables] { min-height: clamp(58px, 6vh, 78px); }
.game-home .np-quick-menu-copy { display: flex !important; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05; }
.game-home .np-quick-menu-copy strong { font: inherit; letter-spacing: inherit; }
.game-home .np-quick-menu-copy small { display: block; margin-top: .27rem; color: #cbb484; font: 700 clamp(.46rem, .55vw, .62rem)/1.2 Literata, Georgia, serif; letter-spacing: .08em; text-transform: none; opacity: .82; }
.game-home .theme-menu-copy small { display: block !important; }

.np-quick-match {
  --qm-panel: #21140d;
  --qm-panel-deep: #100906;
  --qm-panel-soft: #352116;
  --qm-border: #a8783d;
  --qm-border-soft: rgba(216, 171, 98, .22);
  --qm-text: #f1ddba;
  --qm-muted: #bea982;
  --qm-accent: #d4a256;
  --qm-button: #1a0f09;
  --qm-button-hover: #2c1a10;
  --qm-button-active: #4a2b16;
  --qm-danger: #d98271;
  --qm-danger-bg: #3a1813;
  --qm-glow: rgba(184, 115, 42, .2);
  position: fixed;
  z-index: 11050;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: radial-gradient(circle at 50% 45%, var(--qm-glow), transparent 45%), rgba(3, 2, 1, .88);
  backdrop-filter: blur(9px) brightness(.7);
}

html[data-home-theme="mrak"] .np-quick-match {
  --qm-panel: #171213; --qm-panel-deep: #090708; --qm-panel-soft: #271719;
  --qm-border: #833e35; --qm-border-soft: rgba(206, 79, 57, .2);
  --qm-text: #eee0d9; --qm-muted: #bba7a0; --qm-accent: #d15b48;
  --qm-button: #171011; --qm-button-hover: #281416; --qm-button-active: #4b1d1c;
  --qm-danger: #f09583; --qm-danger-bg: #4a1c19; --qm-glow: rgba(174, 43, 28, .2);
}

html[data-home-theme="worlds"] .np-quick-match {
  --qm-panel: #0d2226; --qm-panel-deep: #061114; --qm-panel-soft: #12363c;
  --qm-border: #468d94; --qm-border-soft: rgba(94, 206, 214, .2);
  --qm-text: #dcf2ee; --qm-muted: #9dbfbd; --qm-accent: #68cbd0;
  --qm-button: #0a1b1e; --qm-button-hover: #102b30; --qm-button-active: #17434a;
  --qm-danger: #f0aaa0; --qm-danger-bg: #43201f; --qm-glow: rgba(37, 163, 178, .2);
}

html[data-home-theme="kids"] .np-quick-match {
  --qm-panel: #20172b; --qm-panel-deep: #0f0a17; --qm-panel-soft: #332345;
  --qm-border: #9c6bb0; --qm-border-soft: rgba(222, 172, 239, .2);
  --qm-text: #f0e4f5; --qm-muted: #c4aecf; --qm-accent: #dfad61;
  --qm-button: #181020; --qm-button-hover: #2b1b38; --qm-button-active: #4b2c5f;
  --qm-danger: #f2a3a3; --qm-danger-bg: #4c202c; --qm-glow: rgba(134, 76, 171, .22);
}

.np-quick-match[hidden] { display: none !important; }
.np-quick-dialog {
  position: relative;
  box-sizing: border-box;
  width: min(690px, 96vw);
  max-height: calc(100dvh - 24px);
  overflow: auto;
  border: 1px solid var(--qm-border);
  border-radius: 3px;
  padding: clamp(30px, 4vw, 48px);
  color: var(--qm-text);
  background: radial-gradient(circle at 50% 0, var(--qm-panel-soft), transparent 54%), linear-gradient(145deg, var(--qm-panel), var(--qm-panel-deep) 76%);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .72), 0 0 32px var(--qm-glow), inset 0 0 55px rgba(0, 0, 0, .24);
  text-align: center;
  font-family: Literata, Georgia, serif;
}
.np-quick-dialog::before { content: ""; position: absolute; inset: 10px; border: 1px solid var(--qm-border-soft); pointer-events: none; }

.np-quick-close { position: absolute; z-index: 2; top: 14px; right: 14px; width: 38px; height: 38px; border: 1px solid var(--qm-border); border-radius: 50%; color: var(--qm-text); background: var(--qm-panel-deep); font-size: 1.2rem; cursor: pointer; transition: border-color .15s ease, color .15s ease, background-color .15s ease; }
.np-quick-close:hover, .np-quick-close:focus-visible { border-color: var(--qm-accent); color: #fff; background: var(--qm-panel-soft); outline: none; }

.np-quick-dialog header small { color: var(--qm-accent); font-size: .68rem; font-weight: 900; letter-spacing: .24em; }
.np-quick-dialog h2 { margin: .35rem 0 .25rem; color: var(--qm-text); font-size: clamp(2.2rem, 7vw, 4.4rem); line-height: 1; letter-spacing: .12em; text-shadow: 0 2px 12px rgba(0, 0, 0, .45); }
.np-quick-dialog header p { max-width: 520px; margin: .6rem auto 1.35rem; color: var(--qm-muted); font-size: .86rem; line-height: 1.55; }

.np-quick-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.np-quick-modes button { display: flex; box-sizing: border-box; min-height: 88px; border: 1px solid var(--qm-border-soft); border-radius: 2px; padding: 15px 17px; flex-direction: column; align-items: flex-start; justify-content: center; color: var(--qm-muted); background: var(--qm-button); text-align: left; cursor: pointer; box-shadow: inset 0 0 18px rgba(0, 0, 0, .17); transform: none; transition: border-color .15s ease, color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.np-quick-modes button:hover, .np-quick-modes button:focus-visible { border-color: var(--qm-border); color: var(--qm-text); background: var(--qm-button-hover); outline: none; }
.np-quick-modes button.active { border-color: var(--qm-accent); color: var(--qm-text); background: var(--qm-button-active); box-shadow: inset 0 0 24px var(--qm-glow), 0 0 12px var(--qm-glow); }
.np-quick-modes button:active { transform: none; }
.np-quick-modes button:disabled { cursor: default; opacity: 1; }
.np-quick-modes b { color: inherit; font-size: .82rem; line-height: 1.2; letter-spacing: .08em; }
.np-quick-modes span { margin-top: .35rem; color: inherit; font-size: .7rem; line-height: 1.35; opacity: .84; }

.np-quick-status { position: relative; box-sizing: border-box; min-height: 116px; margin: 16px 0 0; border: 1px solid var(--qm-border-soft); border-radius: 2px; padding: 18px 84px 18px 22px; color: var(--qm-text); background: linear-gradient(110deg, var(--qm-button-hover), var(--qm-panel-deep)); box-shadow: inset 0 0 24px rgba(0, 0, 0, .2); text-align: left; }
.np-quick-status[hidden] { display: none; }
.np-quick-status strong, .np-quick-status p, .np-quick-status time { display: block; }
.np-quick-status strong { margin: 0; color: var(--qm-text); font-size: .95rem; line-height: 1.2; }
.np-quick-status p { margin: .25rem 0 0; color: var(--qm-muted); font-size: .7rem; line-height: 1.35; }
.np-quick-status time { position: absolute; right: 21px; bottom: 13px; margin: 0; color: var(--qm-accent); font-size: .75rem; font-weight: 900; letter-spacing: .1em; }
.np-quick-spinner { position: absolute; top: 25px; right: 27px; display: block; width: 32px; height: 32px; border: 3px solid var(--qm-border-soft); border-top-color: var(--qm-accent); border-radius: 50%; animation: np-quick-spin .9s linear infinite; }

.np-quick-rank { display: flex; justify-content: flex-start; align-items: center; gap: 8px; margin-top: .65rem; }
.np-quick-rank:empty { display: none; }
.np-quick-rank img { width: 40px; height: 40px; object-fit: contain; }
.np-quick-rank span { display: flex; flex-direction: column; text-align: left; }
.np-quick-rank small { color: var(--qm-muted); font-size: .58rem; }
.np-quick-rank b { color: var(--qm-text); font-size: .7rem; line-height: 1.25; }

.np-quick-message { min-height: 1.2em; margin: .75rem 0; color: var(--qm-text); font-size: .75rem; }
.np-quick-message.error { color: var(--qm-danger); }
.np-quick-dialog footer { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; }
.np-quick-dialog footer button { box-sizing: border-box; min-width: 210px; min-height: 48px; border: 1px solid var(--qm-border); border-radius: 2px; padding: 10px 18px; color: var(--qm-text); background: var(--qm-button-active); font: 900 .76rem/1.2 Literata, Georgia, serif; letter-spacing: .08em; cursor: pointer; transform: none; transition: border-color .15s ease, color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.np-quick-dialog footer button:hover, .np-quick-dialog footer button:focus-visible { border-color: var(--qm-accent); color: #fff; background: var(--qm-panel-soft); box-shadow: 0 0 14px var(--qm-glow); outline: none; }
.np-quick-dialog footer button:active { transform: none; }
.np-quick-dialog footer button[hidden] { display: none; }
.np-quick-dialog footer .np-quick-cancel { background: var(--qm-button); }
.np-quick-dialog footer .np-quick-abandon { border-color: var(--qm-danger); color: var(--qm-danger); background: var(--qm-danger-bg); }

@keyframes np-quick-spin { to { transform: rotate(360deg); } }

@media (max-width: 600px) {
  .np-quick-match { padding: 8px; }
  .np-quick-dialog { padding: 40px 16px 22px; }
  .np-quick-modes { grid-template-columns: 1fr; }
  .np-quick-dialog footer { flex-direction: column; }
  .np-quick-dialog footer button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .np-quick-spinner { animation-duration: 1.8s; }
  .np-quick-close, .np-quick-modes button, .np-quick-dialog footer button { transition: none; }
}