/* Partida rápida — carrossel horizontal (Keen Slider) */
.quick-match {
  width: 100%;
  margin-bottom: 1rem;
  padding-top: 0.25rem;
  box-sizing: border-box;
  /* Alinha com .w-full.p-4 do lobby: o viewport do carrossel faz bleed horizontal */
  --quick-match-bleed: 1rem;
  /* Corte horizontal do trilho fica no .quick-match__rail (com padding para o glow). */
  overflow-x: visible;
}

.quick-match__disclosure {
  border: none;
  margin: 0;
  padding: 0;
  background: transparent;
}

.quick-match__disclosure[open] .quick-match__chevron {
  transform: rotate(0deg);
}

.quick-match__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.75rem;
  margin-bottom: 0.3rem;
  background: transparent;
}

.quick-match__summary::-webkit-details-marker {
  display: none;
}

.quick-match__summary:focus {
  outline: none;
}

.quick-match__summary:focus-visible {
  outline: 2px solid var(--cx-accent-cyan, #03f3eb);
  outline-offset: 2px;
  border-radius: 4px;
}

.quick-match__title {
  margin: 0;
  font-family: "Roboto", ui-sans-serif, system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  font-style: normal;
  line-height: 28px;
  letter-spacing: 0;
  color: #c4ffcb;
  leading-trim: none;
}

/* Mesmo padrão de “Mesas abertas”: ▼ expandido, ▶ recolhido (rotação) */
.quick-match__chevron {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid #c4ffcb;
  opacity: 0.95;
  transform: rotate(-90deg);
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.quick-match__viewport {
  /* Recupera o padding lateral do pai (p-4) para caberem ~5 cards: 3 inteiros + dois “peeks” nas pontas */
  width: calc(100% + 2 * var(--quick-match-bleed));
  margin-left: calc(-1 * var(--quick-match-bleed));
  margin-right: calc(-1 * var(--quick-match-bleed));
  box-sizing: border-box;
  overflow: visible;
}

/* Padding: respiro pro glow do card ativo; topo menor para aproximar do título “Partida rápida”. */
.quick-match__rail {
  overflow: hidden;
  padding: 16px 10px 22px;
  box-sizing: border-box;
  overscroll-behavior-x: contain;
}

/* Keen precisa de flex row; o bundle Tailwind não inclui keen-slider.css global. */
.quick-match__slider.keen-slider {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  overflow: visible;
  position: relative;
  width: 100%;
  touch-action: pan-x;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Largura vem do Keen (perView + spacing); card central ~1,25× ref. 104×97 (Figma). */
.quick-match__slider .keen-slider__slide {
  flex-shrink: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  overflow: visible;
  position: relative;
}

/*
 * Centraliza o card no slot; scale() encolhe o visual nos slides adjacentes / peek.
 */
.quick-match-slide__scale {
  width: 100%;
  min-width: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: scale(var(--quick-match-slide-scale, 1));
  transform-origin: center center;
  transition: transform 0.28s cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* scale(1) ainda força camada GPU no WebKit e costuma gerar halo escuro nas bordas arredondadas */
.quick-match-slide--active .quick-match-slide__scale {
  transform: none;
}

.quick-match-slide--active {
  --quick-match-slide-scale: 1;
  z-index: 2;
}

/* Imediatos ao centro — visual ~12% menor */
.quick-match-slide--adjacent .quick-match-slide__scale {
  --quick-match-slide-scale: 0.8;
}

/* Peeks nas pontas — visual ~23% menor */
.quick-match-slide--peek .quick-match-slide__scale {
  --quick-match-slide-scale: 0.7;
}

/* Card: largura máxima (~+5% vs 152×121), encolhe no slot do Keen se precisar */
.quick-match-card {
  --quick-match-card-w: 160px;
  --quick-match-card-h: 127px;
  --quick-match-card-border: 1px;
  /* Glow um pouco mais largo no card maior */
  --quick-match-card-shadow-active: 0 0 22px 1px #03f3eb;
  display: block;
  width: min(var(--quick-match-card-w), 100%);
  max-width: 100%;
  min-width: 0;
  aspect-ratio: 160 / 127;
  height: auto;
  min-height: 0;
  max-height: none;
  margin: 0;
  flex-shrink: 0;
  text-decoration: none;
  color: inherit;
  -webkit-tap-highlight-color: transparent;
  box-sizing: border-box;
  -webkit-border-radius: 16px;
  border-radius: 16px;
  /* overflow no <a> pode cortar box-shadow em alguns WebViews; recorte fica no __glow-wrap */
  overflow: visible;
}

.quick-match-card:focus {
  outline: none;
}

.quick-match-card:focus-visible .quick-match-card__glow-wrap {
  outline: 2px solid var(--cx-accent-cyan, #03f3eb);
  outline-offset: 3px;
  -webkit-border-radius: 16px;
  border-radius: 16px;
}

/* Glow ativo — spec Figma; mais alto que os laterais (base 160×127 → 160×145). */
.quick-match-slide--active .quick-match-card {
  position: relative;
  z-index: 1;
  -webkit-border-radius: 16px;
  border-radius: 16px;
  box-shadow: var(--quick-match-card-shadow-active);
  --quick-match-card-h: 145px;
  aspect-ratio: 160 / 145;
}

.quick-match-slide:not(.quick-match-slide--active) .quick-match-card {
  box-shadow: none;
}

.quick-match-card__glow-wrap {
  height: 100%;
  -webkit-border-radius: 16px;
  border-radius: 16px;
  overflow: hidden;
  /* Sem clip-path / translateZ aqui: no WebKit/WebView isso costuma gerar “vignette” escuro nas bordas internas. */
}

/*
 * Borda 1px + face num único bloco (background-clip) — evita o “anel” empilhado
 * que no WebView vira vignette escura nas bordas (Figma fica limpo).
 */
.quick-match-card__border {
  height: 100%;
  box-sizing: border-box;
  -webkit-border-radius: 16px;
  border-radius: 16px;
  padding: 0;
  overflow: hidden;
  background: transparent;
}

.quick-match-card__inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  padding: 4px 4px 0px;
  -webkit-border-radius: 16px;
  border-radius: 16px;
  border: var(--quick-match-card-border) solid transparent;
  box-sizing: border-box;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  font-family: var(
    --cx-font-sans,
    "Inter",
    ui-sans-serif,
    system-ui,
    sans-serif
  );
  background:
    linear-gradient(180deg, #d4e99b 0%, #69d6a6 42%, #9058ff 100%) padding-box,
    linear-gradient(180deg, #c9e473 0%, #03f3eb 51.44%, #8d4ae6 95.19%)
      border-box;
  background-clip: padding-box, border-box;
  -webkit-background-clip: padding-box, border-box;
}

/* Laterais / peek: sem anel de borda gradiente — só o preenchimento do card. */
.quick-match-slide:not(.quick-match-slide--active) .quick-match-card__inner {
  border-width: 0;
  background: linear-gradient(180deg, #d4e99b 0%, #69d6a6 42%, #9058ff 100%);
  background-clip: padding-box;
  -webkit-background-clip: padding-box;
}

.quick-match-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  flex-shrink: 0;
  min-width: 0;
}

/* Badges topo — Figma fundo #C9E473 */
.quick-match-card__stake {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
  flex: 1 1 0;
  min-width: 0;
  max-width: calc(50% - 3px);
  min-height: 18px;
  padding: 0 2px 0 0;
  border-radius: 9999px;
  background: #c9e473;
  box-sizing: border-box;
}

.quick-match-card__coin {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}

/* Texto montante — Inter Bold, #031207 */
.quick-match-card__stake-value {
  font-size: 12px;
  font-weight: 700;
  color: #031207;
  line-height: 16px;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-match-card__players {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  flex: 1 1 0;
  min-width: 0;
  max-width: calc(50% - 3px);
  min-height: 18px;
  padding: 0 0 0 2px;
  border-radius: 9999px;
  background: #c9e473;
  box-sizing: border-box;
}

/* Contagem — Inter Bold, #031207 */
.quick-match-card__players-count {
  font-size: 13px;
  font-weight: 700;
  color: #031207;
  line-height: 16px;
  min-width: 0;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quick-match-card__people {
  width: 22px;
  height: 22px;
  object-fit: contain;
  flex-shrink: 0;
  display: block;
}

/* “10 PONTOS” — #CEE398; mais perto do topo libera altura para a mão */
.quick-match-card__points {
  margin: -2px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 100%;
  min-width: 0;
  min-height: 11px;
  padding: 1px 6px;
  box-sizing: border-box;
  border-radius: 8px;
  font-size: 8px;
  font-weight: 500;
  letter-spacing: 0.03em;
  line-height: 10px;
  text-transform: uppercase;
  color: #031207;
  background: #cee398;
  text-align: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  transition:
    background 0.24s ease,
    color 0.24s ease,
    box-shadow 0.24s ease;
}

/* Slide principal: badge claro (spec). Demais: sombreado — __dim fica abaixo do z-index do badge. */
.quick-match-slide:not(.quick-match-slide--active) .quick-match-card__points {
  background: #a8b87a;
  color: rgba(3, 18, 7, 0.65);
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.22),
    inset 0 -1px 1px rgba(255, 255, 255, 0.12);
}

/* Área da mão: só o que sobra abaixo do badge; overflow corta SVG que “sobe” demais */
.quick-match-card__art {
  flex: 1 1 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 0;
  overflow: hidden;
  position: relative;
  padding: 0px;
}

/* Encaixa na área de arte; limites >100% dão um pouco mais de tamanho sem transform (flex-end ancora embaixo). */
.quick-match-card__hand {
  display: block;
  width: auto;
  max-width: 108%;
  height: auto;
  max-height: 110%;
  min-height: 0;
  object-fit: contain;
  object-position: bottom center;
  flex-shrink: 1;
  align-self: flex-end;
}

/* Overlay escuro nos slides não ativos (sem box-shadow nos cards laterais) */
.quick-match-card__dim {
  display: none;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(0, 0, 0, 0.52);
  pointer-events: none;
}

.quick-match-slide:not(.quick-match-slide--active) .quick-match-card__dim {
  display: block;
}

/*
 * Cantos arredondados: força final (ancestral .quick-match + !important).
 * Vence utilitários Tailwind/Daisy no <a> e bugs de WebView com transform no slider.
 */
.quick-match a.quick-match-card,
.quick-match .quick-match-slide--active .quick-match-card {
  border-radius: 16px !important;
  -webkit-border-radius: 16px !important;
}

.quick-match .quick-match-card__glow-wrap {
  border-radius: 16px !important;
  -webkit-border-radius: 16px !important;
  overflow: hidden !important;
}

.quick-match .quick-match-card__border {
  border-radius: 16px !important;
  -webkit-border-radius: 16px !important;
}

.quick-match .quick-match-card__inner {
  border-radius: 16px !important;
  -webkit-border-radius: 16px !important;
}

.quick-match .quick-match-card:focus-visible .quick-match-card__glow-wrap {
  border-radius: 16px !important;
  -webkit-border-radius: 16px !important;
}