/* =========================================================
   X1zada: arcade de rua com profundidade.
   Fundo com estampa de X1 + brilho de cor,
   superfícies com volume, botões com relevo, tabuleiro 3D.
   ========================================================= */
:root {
  --ink: #0e0c0b;
  --ink-2: #171412;
  --ink-3: #241f1b;
  --line: rgba(255, 240, 220, 0.1);
  --line-2: rgba(255, 240, 220, 0.18);
  --paper: #f6f0e6;
  --muted: #b3a99c;
  --dim: #7a7166;
  --lime: #f5c22b;
  --lime-hi: #ffe27a;
  --lime-deep: #8a5a00;
  /* dourado da marca */
  --gold: #f5c22b;
  --gold-hi: #ffe27a;
  --gold-mid: #d99a0b;
  --gold-deep: #7d5200;
  /* peças: vermelho do boné e ouro */
  --p1: #e3192f;
  --p1-deep: #8f0d1c;
  --p2: #f5c22b;
  --p2-deep: #9a6a00;
  --cobalt: #2342ff;
  --cobalt-deep: #142ac2;
  --cobalt-hole: #0a0e2c;
  --bad: #ff5d5d;
  --font: 'Barlow', 'Segoe UI', system-ui, sans-serif;
  --display: 'Anton', 'Impact', 'Arial Narrow', sans-serif;
  --tag: 'Sedgwick Ave Display', 'Anton', cursive; /* letra de pichação/tag para o nome dos jogos */
  --mono: 'JetBrains Mono', ui-monospace, Consolas, monospace;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
}

* {
  box-sizing: border-box;
}
html,
body {
  min-height: 100%;
}
body {
  margin: 0;
  font-family: var(--font);
  background: var(--ink);
  color: var(--paper);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overflow-x: hidden;
}
/* granulação de filme por cima de tudo */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1000;
  opacity: 0.07;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[hidden] {
  display: none !important;
}
button {
  font-family: inherit;
  color: inherit;
}
.mono {
  font-family: var(--mono);
}

/* =========================================================
   FUNDO
   ========================================================= */
.bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: var(--ink);
}
/* Estampa de X1 (monograma, como estampa de grife) em diagonal, andando bem devagar; dois X1 gigantes de contorno
   dourado nas laterais, respirando; por cima, os brilhos de cor e a vinheta. */
.bg-estampa {
  position: absolute;
  inset: -40%;
  background: url('/img/bg/x1-estampa.webp') 0 0 / 300px 300px repeat;
  opacity: 0.16;
  transform: rotate(-14deg);
  animation: estampa 90s linear infinite;
}
@keyframes estampa {
  to {
    background-position: 300px 600px;
  }
}
.bg-x1 {
  position: absolute;
  top: 50%;
  width: min(62vw, 900px);
  aspect-ratio: 900 / 700;
  background: url('/img/bg/x1-gigante.webp') center / contain no-repeat;
  opacity: 0.07;
  animation: x1Breathe 9s ease-in-out infinite;
}
.bg-x1.left {
  left: -22vw;
  transform: translateY(-50%) rotate(-12deg);
}
.bg-x1.right {
  right: -24vw;
  transform: translateY(-40%) rotate(10deg);
  animation-delay: -4.5s;
}
@keyframes x1Breathe {
  0%,
  100% {
    opacity: 0.05;
  }
  50% {
    opacity: 0.11;
  }
}
@media (max-aspect-ratio: 4/5) {
  .bg-x1.left {
    left: -50vw;
  }
  .bg-x1.right {
    right: -55vw;
  }
  .bg-estampa {
    background-size: 220px 220px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .bg-estampa,
  .bg-x1 {
    animation: none;
  }
}
/* brilhos de cor da marca: o fundo nunca fica chapado, mesmo sem a foto */
.bg-aurora i {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.22;
  mix-blend-mode: screen;
}
.bg-aurora i:nth-child(1) {
  width: 55vmax;
  height: 55vmax;
  left: -18vmax;
  top: -22vmax;
  background: var(--gold);
  opacity: 0.16;
  animation: drift1 26s ease-in-out infinite alternate;
}
.bg-aurora i:nth-child(2) {
  width: 50vmax;
  height: 50vmax;
  right: -20vmax;
  bottom: -24vmax;
  background: #b8320f;
  opacity: 0.16;
  animation: drift2 30s ease-in-out infinite alternate;
}
.bg-aurora i:nth-child(3) {
  width: 34vmax;
  height: 34vmax;
  right: 8vmax;
  top: -16vmax;
  background: var(--lime);
  opacity: 0.08;
  animation: drift1 34s ease-in-out infinite alternate-reverse;
}
@keyframes drift1 {
  to {
    transform: translate(8vmax, 6vmax) scale(1.12);
  }
}
@keyframes drift2 {
  to {
    transform: translate(-7vmax, -5vmax) scale(0.92);
  }
}
/* a montagem já tem o centro escuro: aqui escurecemos o MEIO (atrás do conteúdo) e deixamos as laterais respirarem */
.bg-vignette {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 40% 62% at 50% 50%, rgba(11, 9, 7, 0.7) 0%, rgba(11, 9, 7, 0.3) 60%, transparent 100%),
    linear-gradient(180deg, rgba(11, 9, 7, 0.6) 0%, transparent 18%, transparent 76%, rgba(11, 9, 7, 0.75) 100%);
}

/* =========================================================
   SUPERFÍCIES
   ========================================================= */
.surface {
  position: relative;
  background: linear-gradient(170deg, rgba(44, 38, 33, 0.86) 0%, rgba(22, 19, 17, 0.92) 100%);
  border: 1px solid var(--line);
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 230, 0.09),
    inset 0 -1px 0 rgba(0, 0, 0, 0.4),
    0 30px 60px -24px rgba(0, 0, 0, 0.8),
    0 2px 0 rgba(0, 0, 0, 0.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  backdrop-filter: blur(18px) saturate(1.25);
}
/* fio de luz no topo */
.surface::before {
  content: '';
  position: absolute;
  left: 12%;
  right: 12%;
  top: -1px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(245, 194, 43, 0.55), transparent);
}

/* ---------- marca ---------- */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.1em;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  text-decoration: none;
  color: var(--paper);
}
.wordmark .x1 {
  position: relative;
  z-index: 0;
  background: linear-gradient(180deg, var(--lime-hi), var(--lime) 55%, #d99a0b);
  color: var(--ink);
  padding: 0.07em 0.17em 0.03em;
  border-radius: 0.14em;
  transform: rotate(-4deg);
  display: inline-block;
  box-shadow:
    inset 0 0.03em 0 rgba(255, 255, 255, 0.7),
    0.03em 0.03em 0 #c48a00,
    0.06em 0.06em 0 #b07a00,
    0.09em 0.09em 0 #8a5a00,
    0.12em 0.12em 0 #6b4400,
    0.14em 0.16em 0.3em rgba(0, 0, 0, 0.6);
}
/* o "zeira" fica numa camada ACIMA do X1: a sombra do X1 passa por trás dele, nunca por cima */
.wordmark .zeira {
  position: relative;
  z-index: 1;
  font-style: italic;
  text-shadow:
    0.02em 0.02em 0 #cfc6b8,
    0.04em 0.04em 0 #a99f91,
    0.06em 0.06em 0 #8a8072,
    0.08em 0.08em 0 #6b6257,
    0.1em 0.12em 0.25em rgba(0, 0, 0, 0.6);
}
.wordmark.small {
  font-size: 26px;
}
.wordmark.big {
  font-size: clamp(64px, 12vw, 132px);
}

/* ---------- botões com relevo ---------- */
.btn {
  --sh: #000;
  position: relative;
  overflow: hidden;
  border: 0;
  cursor: pointer;
  font-weight: 800;
  font-size: 16px;
  letter-spacing: -0.01em;
  padding: 14px 22px;
  border-radius: 14px;
  color: var(--paper);
  background: linear-gradient(180deg, #3a332d, #26211d);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 -2px 0 rgba(0, 0, 0, 0.25),
    0 5px 0 var(--sh),
    0 10px 20px -8px rgba(0, 0, 0, 0.6);
  transform: translateY(0);
  transition:
    transform 0.12s var(--ease-out),
    box-shadow 0.12s var(--ease-out),
    filter 0.2s;
  user-select: none;
}
.btn > span {
  position: relative;
  z-index: 1;
}
/* brilho que passa por cima no hover */
.btn::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 40%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: skewX(-18deg);
  opacity: 0;
}
.btn:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
}
.btn:hover::before {
  animation: shine 0.7s var(--ease-out);
}
@keyframes shine {
  0% {
    left: -60%;
    opacity: 1;
  }
  100% {
    left: 130%;
    opacity: 1;
  }
}
.btn:active {
  transform: translateY(4px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 1px 0 var(--sh);
}
.btn:disabled {
  filter: grayscale(0.6) brightness(0.7);
  cursor: default;
  transform: none;
}
.btn:focus-visible,
.icon-btn:focus-visible,
.user-chip:focus-visible,
input:focus-visible {
  outline: 3px solid var(--lime);
  outline-offset: 3px;
}
.btn-lime {
  --sh: var(--lime-deep);
  color: var(--ink);
  background: linear-gradient(180deg, var(--lime-hi) 0%, var(--lime) 48%, #dfa112 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.65),
    inset 0 -3px 0 rgba(0, 0, 0, 0.12),
    0 5px 0 var(--sh),
    0 14px 28px -8px rgba(245, 194, 43, 0.5);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}
.btn-lime:active {
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.5),
    0 1px 0 var(--sh);
}
.btn-ghost {
  --sh: rgba(0, 0, 0, 0.6);
  background: linear-gradient(180deg, rgba(255, 245, 230, 0.07), rgba(255, 245, 230, 0.02));
  box-shadow:
    inset 0 0 0 1.5px var(--line-2),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 4px 0 var(--sh);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover {
  box-shadow:
    inset 0 0 0 1.5px rgba(245, 194, 43, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 5px 0 var(--sh);
}
.btn-block {
  width: 100%;
}
.btn-xl {
  font-size: clamp(19px, 2.6vw, 23px);
  padding: 19px 32px;
  border-radius: 18px;
}
.btn-xl.btn-lime {
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.65),
    inset 0 -3px 0 rgba(0, 0, 0, 0.12),
    0 7px 0 var(--sh),
    0 18px 34px -8px rgba(245, 194, 43, 0.55);
}
.btn-xl:active {
  transform: translateY(6px);
}
.btn-lg {
  font-size: 17px;
  padding: 16px 24px;
  border-radius: 16px;
}
.btn-sm {
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 10px;
}
.btn.loading span {
  opacity: 0;
}
.btn.loading::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 3px solid currentColor;
  border-right-color: transparent;
  animation: spin 0.7s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------- campos ---------- */
.field {
  display: block;
  margin-bottom: 14px;
}
.field > span:first-child {
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  margin-bottom: 7px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
input {
  width: 100%;
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  color: var(--paper);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.25));
  border: 1.5px solid var(--line-2);
  border-radius: 12px;
  padding: 13px 14px;
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.45);
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
input:focus {
  border-color: var(--lime);
  outline: none;
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.45),
    0 0 0 4px rgba(245, 194, 43, 0.14);
}
.pass-wrap {
  position: relative;
  display: block;
}
.pass-wrap input {
  padding-right: 70px;
}
.peek {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.07);
  border: 0;
  border-radius: 8px;
  padding: 6px 9px;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  cursor: pointer;
}
/* ---------- campos de senha: cadeado, olho (mostrar/ocultar), força e "as senhas batem" ---------- */
.field > label:first-child {
  display: block;
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  margin-bottom: 7px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pass-ico input {
  padding-left: 44px;
  padding-right: 52px;
}
.pass-lock {
  position: absolute;
  left: 14px;
  top: 50%;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.8;
  stroke-linecap: round;
  pointer-events: none;
}
.peek-eye {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  border-radius: 10px;
  color: var(--muted);
  cursor: pointer;
}
.peek-eye:hover,
.peek-eye:focus-visible {
  color: var(--paper);
  background: rgba(255, 255, 255, 0.06);
  outline: none;
}
.peek-eye svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.peek-eye .eye-shut,
.peek-eye[aria-pressed='true'] .eye-open {
  display: none;
}
.peek-eye[aria-pressed='true'] .eye-shut {
  display: inline;
}
.pass-wrap:has(.peek-eye) input {
  padding-right: 52px;
}
.pass-meter {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 9px;
  min-height: 18px;
}
.pm-bar {
  flex: 1;
  height: 6px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.pm-bar i {
  display: block;
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: var(--meter, var(--bad));
  transition:
    width 0.25s var(--ease-out),
    background 0.25s;
}
.pass-meter b {
  min-width: 52px;
  text-align: right;
  font-size: 13px;
  font-weight: 800;
  color: var(--meter, var(--muted));
}
.pass-meter[data-nivel='1'] {
  --meter: #ef4444;
}
.pass-meter[data-nivel='1'] .pm-bar i {
  width: 20%;
}
.pass-meter[data-nivel='2'] {
  --meter: #f97316;
}
.pass-meter[data-nivel='2'] .pm-bar i {
  width: 40%;
}
.pass-meter[data-nivel='3'] {
  --meter: #f5c22b;
}
.pass-meter[data-nivel='3'] .pm-bar i {
  width: 65%;
}
.pass-meter[data-nivel='4'] {
  --meter: #a3e635;
}
.pass-meter[data-nivel='4'] .pm-bar i {
  width: 85%;
}
.pass-meter[data-nivel='5'] {
  --meter: #3ddc84;
}
.pass-meter[data-nivel='5'] .pm-bar i {
  width: 100%;
}
.pass-match {
  display: block;
  margin-top: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.35;
}
.pass-match.ok {
  color: #3ddc84;
}
.pass-match.bad {
  color: var(--bad);
}
.form-error {
  color: var(--bad);
  font-weight: 700;
  font-size: 14px;
  min-height: 20px;
  margin: 4px 0 12px;
}
.shake {
  animation: shake 0.42s var(--ease-out);
}
@keyframes shake {
  15%,
  55% {
    transform: translateX(-9px);
  }
  35%,
  75% {
    transform: translateX(9px);
  }
  90% {
    transform: translateX(-3px);
  }
}

/* =========================================================
   LOGIN
   ========================================================= */
.login {
  min-height: 100svh;
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: 32px 16px;
}
/* poeira dourada subindo: brilho noturno, sem nada de jogo específico */
.login-dust {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.login-dust i {
  position: absolute;
  bottom: -10vh;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: radial-gradient(circle, var(--gold-hi) 0%, var(--gold) 35%, rgba(242, 193, 78, 0) 70%);
  opacity: 0;
  filter: blur(var(--b, 0));
  animation: dust var(--d) linear var(--delay) infinite;
}
@keyframes dust {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  12% {
    opacity: var(--o, 0.6);
  }
  80% {
    opacity: var(--o, 0.6);
  }
  100% {
    transform: translate(var(--dx), -115vh);
    opacity: 0;
  }
}
.login-inner {
  position: relative;
  z-index: 1;
  width: min(1060px, 100%);
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  align-items: center;
}
.login-hero {
  animation: rise 0.8s var(--ease-out) both;
}
.login-tag {
  font-size: clamp(24px, 3.2vw, 38px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin: 30px 0 28px;
  text-shadow: 0 4px 24px rgba(0, 0, 0, 0.6);
}
.login-tag em {
  font-style: normal;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 50%, var(--gold-mid));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 14px rgba(242, 193, 78, 0.35));
}
.login-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
  color: var(--muted);
  font-weight: 600;
  font-size: 16px;
}
.login-points li {
  display: flex;
  align-items: center;
  gap: 12px;
}
.pip {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex: none;
  box-shadow:
    inset 0 -3px 0 rgba(0, 0, 0, 0.25),
    0 0 14px currentColor;
}
.pip.gold {
  background: var(--gold);
  color: rgba(242, 193, 78, 0.55);
}
.pip.lime {
  background: var(--lime);
  color: rgba(245, 194, 43, 0.5);
}
.login-card {
  border-radius: 26px;
  padding: 32px 28px 22px;
  animation: rise 0.8s 0.1s var(--ease-out) both;
}
.login-card h2 {
  margin: 0 0 22px;
  font-size: 27px;
  letter-spacing: -0.03em;
}
.login-foot {
  text-align: center;
  color: var(--dim);
  font-size: 13px;
  margin: 16px 0 0;
  font-weight: 600;
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* =========================================================
   BARRA
   ========================================================= */
.bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px clamp(16px, 3vw, 28px);
  position: sticky;
  top: 0;
  z-index: 20;
  background: linear-gradient(180deg, rgba(14, 12, 11, 0.85), rgba(14, 12, 11, 0.55));
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
/* Safari do iOS 26: a página aparece por baixo da barra de status (hora, bateria), mas o topo fixo para logo abaixo
   dela; sem isto, o conteúdo passa nessa faixa ao rolar. O fundo continua para cima (fora da tela nos outros). */
.bar::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 160px;
  background: #0b0907;
  pointer-events: none;
}
.beta {
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  border: 1px solid var(--line-2);
  padding: 4px 10px;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: rgba(255, 255, 255, 0.03);
}
.bar-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}
.icon-btn {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, rgba(255, 245, 230, 0.09), rgba(255, 245, 230, 0.03));
  box-shadow:
    inset 0 0 0 1px var(--line),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: transform 0.1s;
}
.icon-btn:hover {
  box-shadow:
    inset 0 0 0 1px var(--line-2),
    inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.icon-btn:active {
  transform: scale(0.92);
}
.icon-btn svg {
  width: 20px;
  height: 20px;
}
.user-menu {
  position: relative;
}
.user-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  border: 0;
  border-radius: 99px;
  padding: 5px 15px 5px 5px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  background: linear-gradient(180deg, rgba(255, 245, 230, 0.09), rgba(255, 245, 230, 0.03));
  box-shadow:
    inset 0 0 0 1px var(--line),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--ink);
  font-weight: 800;
  font-size: 15px;
  background: linear-gradient(180deg, var(--lime-hi), var(--lime));
  box-shadow:
    inset 0 -3px 0 rgba(0, 0, 0, 0.15),
    0 0 0 2px rgba(0, 0, 0, 0.4);
}
.menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  border-radius: 14px;
  padding: 6px;
  min-width: 180px;
  animation: pop 0.18s var(--ease-out);
}
.menu button,
.menu a {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 10px 12px;
  border-radius: 9px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  color: var(--paper);
  text-decoration: none;
}
.menu button:hover,
.menu a:hover {
  background: rgba(255, 255, 255, 0.06);
}
@keyframes pop {
  from {
    opacity: 0;
    transform: translateY(-6px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* =========================================================
   INÍCIO / CATÁLOGO
   ========================================================= */
.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--gold);
  margin: 0 0 12px;
}
.hl {
  color: var(--ink);
  padding: 0 0.12em;
  border-radius: 0.1em;
  display: inline-block;
  transform: rotate(-3deg);
  background: linear-gradient(180deg, var(--lime-hi), var(--lime) 55%, #d99a0b);
  box-shadow:
    0.04em 0.04em 0 #b07a00,
    0.08em 0.08em 0 var(--gold-mid);
  text-shadow: none;
}
.home {
  width: min(1160px, 100%);
  margin: 0 auto;
  padding: clamp(28px, 6vh, 64px) clamp(16px, 4vw, 40px) 40px;
}
.home-hero {
  max-width: 640px;
  animation: rise 0.6s var(--ease-out) both;
}
/* título no estilo da logo: letra de pichação creme com contorno preto grosso + fio amarelo, e o X1 no bloco amarelo */
.home-title {
  --o: #0b0704;
  font-family: var(--tag);
  font-weight: 400;
  text-transform: none;
  font-size: clamp(56px, 9.4vw, 124px);
  line-height: 0.92;
  letter-spacing: 0.01em;
  margin: 0 0 26px;
  padding-left: 0.1em;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transform: rotate(-5deg);
  transform-origin: 0 100%;
  color: #fff4d8;
  filter: drop-shadow(0 0.06em 0.05em rgba(0, 0, 0, 0.6));
}
.home-title .ht-w {
  position: relative;
  display: inline-block;
  isolation: isolate;
  padding: 0 0.08em;
}
.home-title .ht-w::before,
.home-title .ht-w::after {
  content: attr(data-t);
  position: absolute;
  inset: 0;
  padding: inherit;
}
.home-title .ht-w::before {
  z-index: -2;
  color: var(--gold);
  -webkit-text-stroke: 0.24em var(--gold);
}
.home-title .ht-w::after {
  z-index: -1;
  color: var(--o);
  -webkit-text-stroke: 0.17em var(--o);
}
.home-title .ht-l2 {
  display: flex;
  align-items: center;
  gap: 0.16em;
  padding-left: 0.55em;
  margin-top: -0.04em;
}
.home-title .ht-x1 {
  position: relative;
  display: inline-block;
  isolation: isolate;
  font-family: var(--display);
  font-size: 0.78em;
  line-height: 1;
  letter-spacing: -0.01em;
  padding: 0.1em 0.2em 0.06em;
  color: var(--o);
  border-radius: 0.16em;
  border: 0.065em solid var(--o);
  transform: rotate(-3deg) skewX(-9deg);
  background: linear-gradient(180deg, #ffec80, #ffd31c 46%, #f2a400);
  box-shadow:
    0 0 0 0.03em var(--gold),
    inset 0 -0.08em 0 rgba(150, 85, 0, 0.45);
  animation: x1Bob 4s ease-in-out infinite;
}
/* brilho do bloco, como na logo (fica entre o fundo e a letra) */
.home-title .ht-x1::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0.05em 0.07em 50%;
  border-radius: 0.1em 0.1em 0.4em 0.4em;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.08));
}
@keyframes x1Bob {
  0%,
  100% {
    transform: rotate(-3deg) skewX(-9deg);
  }
  50% {
    transform: rotate(1deg) skewX(-9deg) translateY(-0.04em);
  }
}
.home-sub {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0;
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--paper);
}
.home-sub span + span::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 14px;
  background: var(--gold);
  transform: rotate(45deg) translateY(-2px);
}
.catalog {
  margin-top: clamp(30px, 6vh, 56px);
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr));
  gap: clamp(18px, 2.4vw, 30px);
}
.home-foot {
  color: var(--dim);
  font-size: 13px;
  margin-top: 36px;
  font-weight: 600;
}

/* ---------- mascote ---------- */
.home-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  max-width: none;
}
.hero-mascot {
  position: relative;
  width: clamp(180px, 24vw, 300px);
  aspect-ratio: 1;
  animation: rise 0.8s 0.1s var(--ease-out) both;
}
/* distintivo X1 no lugar do mascote (o pet da Pedrada fica só no jogo dele) */
.hero-badge {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.7));
  animation: float 5s ease-in-out infinite;
  transform-origin: 50% 90%;
}
.hero-mascot .halo {
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 194, 43, 0.45), rgba(245, 194, 43, 0) 65%);
  filter: blur(10px);
  animation: halo 5s ease-in-out infinite;
}
.hero-mascot .bubble {
  position: absolute;
  left: -18%;
  top: 6%;
  padding: 8px 14px;
  border-radius: 16px 16px 16px 4px;
  font-weight: 800;
  font-size: 15px;
  white-space: nowrap;
  color: #241600;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  box-shadow:
    0 5px 0 var(--gold-deep),
    0 14px 24px -8px rgba(0, 0, 0, 0.6);
  transform: rotate(-6deg);
  animation: pop 0.5s 0.9s var(--ease-back) both;
}
@keyframes float {
  0%,
  100% {
    transform: translateY(0) rotate(-1.5deg);
  }
  50% {
    transform: translateY(-10px) rotate(1.5deg);
  }
}
@keyframes halo {
  0%,
  100% {
    opacity: 0.7;
    transform: scale(0.95);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
}
.brand-row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.sticker {
  width: clamp(90px, 11vw, 150px);
  height: auto;
  transform: rotate(8deg);
  filter: drop-shadow(0 12px 18px rgba(0, 0, 0, 0.6));
  animation: float 5s ease-in-out infinite;
}
.mode-face {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 20%;
  background: #1a1510;
  box-shadow: 0 0 0 2px rgba(245, 194, 43, 0.55);
}
.ring .face {
  position: absolute;
  inset: 5px;
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  border-radius: 50%;
  object-fit: cover;
  object-position: center 18%;
  background: #1a1510;
}
.ring .badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--ink);
}

/* ---------- pôsteres de jogo: parede de cartaz, não cards de startup ---------- */
.poster {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 6px;
  text-decoration: none;
  color: var(--paper);
  background: #0d0a07;
  isolation: isolate;
  box-shadow:
    0 2px 0 rgba(255, 255, 255, 0.04) inset,
    0 26px 46px -22px rgba(0, 0, 0, 0.95);
  transform: rotate(var(--tilt, 0deg));
  transition:
    transform 0.3s var(--ease-out),
    box-shadow 0.3s;
  animation: posterIn 0.55s var(--ease-out) both;
}
.poster:nth-child(3n + 1) {
  --tilt: -1.2deg;
}
.poster:nth-child(3n + 2) {
  --tilt: 0.8deg;
}
.poster:nth-child(3n) {
  --tilt: -0.4deg;
}
@keyframes posterIn {
  from {
    opacity: 0;
    transform: translateY(26px) rotate(var(--tilt, 0deg));
  }
}
/* moldura dourada fininha por dentro, como cartaz de evento */
.poster::before {
  content: '';
  position: absolute;
  inset: 9px;
  z-index: 3;
  border: 1.5px solid rgba(245, 194, 43, 0.55);
  border-radius: 3px;
  pointer-events: none;
  transition:
    border-color 0.3s,
    inset 0.3s;
}
/* grão de impressão por cima de tudo */
.poster::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0.22;
  mix-blend-mode: overlay;
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.5) 0.6px, transparent 0.7px),
    radial-gradient(rgba(0, 0, 0, 0.6) 0.6px, transparent 0.7px);
  background-size:
    3px 3px,
    4px 4px;
  background-position:
    0 0,
    1px 2px;
}
.poster:hover {
  transform: rotate(0deg) translateY(-6px);
  box-shadow:
    0 34px 60px -24px rgba(0, 0, 0, 1),
    0 0 0 1px rgba(245, 194, 43, 0.45);
}
.poster:hover::before {
  border-color: var(--gold);
  inset: 7px;
}
.poster:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 5px;
}
.poster-art {
  container-type: inline-size;
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse at 50% 32%, #3a2a0c, #0d0a07 72%);
}
.poster-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.35) 0%,
    transparent 22%,
    transparent 42%,
    rgba(8, 6, 4, 0.92) 74%,
    #080604 100%
  );
}
.poster-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--ease-out);
}
.poster:hover .poster-img {
  transform: scale(1.05);
}
.poster-art.has-img > :not(.poster-img) {
  display: none;
} /* com imagem, some a arte em CSS */
.poster-art .art-c4 {
  top: 36%;
  width: 62cqi;
}
.poster-art .art-gude {
  top: 36%;
  width: 74cqi;
  height: 37cqi;
}
.poster-no {
  position: absolute;
  z-index: 2;
  top: 18px;
  left: 20px;
  font-family: var(--display);
  font-size: clamp(40px, 15cqi, 64px);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(245, 194, 43, 0.75);
  letter-spacing: 0.02em;
}
.poster-stamp {
  position: absolute;
  z-index: 2;
  top: 22px;
  right: 18px;
  padding: 6px 10px 5px;
  font-family: var(--display);
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #241600;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 60%, var(--gold-mid));
  transform: rotate(7deg);
  box-shadow:
    0 4px 0 var(--gold-deep),
    0 10px 18px -6px rgba(0, 0, 0, 0.7);
  clip-path: polygon(0 6%, 100% 0, 97% 100%, 3% 94%);
}
.poster-body {
  position: absolute;
  z-index: 2;
  left: 22px;
  right: 22px;
  bottom: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.poster-title {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(38px, 4.2vw, 54px);
  line-height: 0.9;
  letter-spacing: 0.01em;
  text-shadow: 0.05em 0.05em 0 rgba(0, 0, 0, 0.8);
}
.poster-tag {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: #e9e1d4;
  max-width: 30ch;
}
.poster-meta {
  margin: 2px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--gold-hi);
}
.poster-meta span + span::before {
  content: '/';
  margin-right: 10px;
  color: rgba(245, 194, 43, 0.45);
}
/* em breve: cartaz ainda fechado, fita de obra atravessada */
.poster.soon {
  cursor: default;
  background: #14110d;
}
.poster.soon:hover {
  transform: rotate(var(--tilt));
  box-shadow: 0 26px 46px -22px rgba(0, 0, 0, 0.95);
}
.poster.soon:hover::before {
  border-color: rgba(245, 194, 43, 0.55);
  inset: 9px;
}
.poster.soon .poster-art {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 9px),
    linear-gradient(160deg, #221c15, #0e0b08);
}
.tape {
  position: absolute;
  left: -20%;
  width: 140%;
  padding: 9px 0 7px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  font-family: var(--display);
  font-size: 20px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #111;
  background: repeating-linear-gradient(-45deg, var(--gold) 0 22px, #f7d55a 22px 44px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.55);
}
.tape.t1 {
  top: 30%;
  transform: rotate(-14deg);
}
.tape.t2 {
  top: 44%;
  transform: rotate(9deg);
  opacity: 0.92;
}
.poster.soon .poster-no {
  -webkit-text-stroke-color: rgba(245, 194, 43, 0.35);
}
@media (max-width: 640px) {
  .catalog {
    grid-template-columns: 1fr;
  }
  .poster {
    aspect-ratio: 5 / 4;
    --tilt: 0deg !important;
  }
  .poster-art .art-c4 {
    top: 34%;
    width: 44cqi;
  }
  .poster-art .art-gude {
    top: 27%;
    width: 50cqi;
    height: 25cqi;
  }
  .poster-title {
    font-size: 42px;
  }
}
/* arte do Ligue 4 em CSS: tabuleiro em perspectiva */
.art-c4 {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 54cqi;
  transform: translate(-50%, -50%) perspective(600px) rotateX(18deg);
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1.3cqi;
  padding: 1.8cqi;
  border-radius: 12px;
  background: linear-gradient(180deg, #2a2630, #141216 45%, #0c0b0e);
  box-shadow:
    0 16px 0 #b8860b,
    0 30px 40px rgba(0, 0, 0, 0.6),
    inset 0 0 0 2px var(--gold),
    inset 0 2px 0 rgba(255, 255, 255, 0.18);
  transition: transform 0.4s var(--ease-out);
}
.art-c4 i {
  aspect-ratio: 1;
  border-radius: 50%;
  background: #050405;
  box-shadow:
    inset 0 3px 5px rgba(0, 0, 0, 0.8),
    0 0 0 2px #c99a1c;
}
.art-c4 i.r {
  background: radial-gradient(circle at 38% 30%, #ff6a78, var(--p1) 45%, var(--p1-deep));
}
.art-c4 i.y {
  background: radial-gradient(circle at 38% 30%, #fff3b8, var(--p2) 40%, var(--p2-deep));
}
.art-c4 i.r,
.art-c4 i.y {
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25);
}
/* card da gude: roda a giz vista de lado, gudes no meio e as duas búlicas */
.poster-art:has(.art-gude) {
  background: radial-gradient(ellipse at 50% 62%, #5c3f24, #22170e 62%, #0d0a07);
}
.art-gude {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 62cqi;
  height: 31cqi;
  transform: translate(-50%, -50%);
  transition: transform 0.4s var(--ease-out);
}
.art-gude .roda {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 0.8cqi dashed rgba(246, 240, 228, 0.8);
  background: radial-gradient(ellipse at 50% 40%, #80593a, #4d3421 72%);
  box-shadow:
    inset 0 -2cqi 5cqi rgba(0, 0, 0, 0.35),
    0 0 0 0.3cqi rgba(246, 240, 228, 0.18);
}
.art-gude i {
  position: absolute;
  z-index: 1;
  width: var(--s, 5.4cqi);
  aspect-ratio: 1;
  border-radius: 50%;
  transform: translate(-50%, -78%);
  background: radial-gradient(circle at 34% 30%, #fff 0 9%, var(--c) 34%, color-mix(in srgb, var(--c), #000 50%));
  box-shadow: 0 1.1cqi 0.9cqi -0.2cqi rgba(0, 0, 0, 0.55);
}
.art-gude .g0 {
  left: 40%;
  top: 32%;
  --c: #2f7bff;
  --s: 4.8cqi;
}
.art-gude .g1 {
  left: 50%;
  top: 32%;
  --c: #22c55e;
  --s: 4.8cqi;
}
.art-gude .g2 {
  left: 60%;
  top: 32%;
  --c: #ec4899;
  --s: 4.8cqi;
}
.art-gude .g3 {
  left: 39%;
  top: 50%;
  --c: #14b8a6;
}
.art-gude .g4 {
  left: 50%;
  top: 50%;
  --c: #a855f7;
}
.art-gude .g5 {
  left: 61%;
  top: 50%;
  --c: #06b6d4;
}
.art-gude .g6 {
  left: 38%;
  top: 69%;
  --c: #f8fafc;
  --s: 6cqi;
}
.art-gude .g7 {
  left: 50%;
  top: 69%;
  --c: #60a5fa;
  --s: 6cqi;
}
.art-gude .g8 {
  left: 62%;
  top: 69%;
  --c: #84cc16;
  --s: 6cqi;
}
.art-gude .b1 {
  left: 27%;
  top: 124%;
  --c: var(--p1);
  --s: 8cqi;
}
.art-gude .b2 {
  left: 76%;
  top: -12%;
  --s: 4.6cqi;
  background: radial-gradient(
    circle at 34% 30%,
    #fff8d0 0 10%,
    var(--gold-hi) 26%,
    var(--gold-mid) 62%,
    var(--gold-deep)
  );
}
.art-gude .trail {
  position: absolute;
  left: 29%;
  top: 108%;
  width: 19cqi;
  height: 0.55cqi;
  transform-origin: 0 50%;
  transform: rotate(-47deg);
  background: repeating-linear-gradient(90deg, var(--gold-hi) 0 1.5cqi, transparent 1.5cqi 2.7cqi);
  opacity: 0.85;
  filter: drop-shadow(0 0 0.8cqi rgba(255, 226, 122, 0.6));
}

/* =========================================================
   PÁGINA DO JOGO
   ========================================================= */
.game-page {
  width: min(1160px, 100%);
  margin: 0 auto;
  padding: 18px clamp(16px, 4vw, 40px) 40px;
}
.back {
  display: inline-block;
  color: var(--muted);
  text-decoration: none;
  font-weight: 700;
  margin-bottom: 14px;
}
.back:hover {
  color: var(--paper);
}
.game-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 3.5vw, 44px);
  align-items: start;
}
.game-show {
  border-radius: 28px;
  padding: clamp(10px, 2vw, 22px);
  animation: rise 0.6s var(--ease-out) both;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(35, 66, 255, 0.18), transparent 60%),
    linear-gradient(170deg, rgba(44, 38, 33, 0.7), rgba(22, 19, 17, 0.85));
}
.game-stage {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
}
.game-info {
  animation: rise 0.6s 0.08s var(--ease-out) both;
}
.game-title {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(48px, 7vw, 88px);
  letter-spacing: 0.01em;
  line-height: 0.88;
  margin: 0 0 12px;
  text-shadow:
    0.045em 0.045em 0 #3d2a00,
    0.09em 0.09em 0 rgba(0, 0, 0, 0.5);
}
.game-tagline {
  color: var(--muted);
  font-size: 18px;
  margin: 0 0 16px;
  font-weight: 500;
}
.howto {
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.2);
}
.howto summary {
  cursor: pointer;
  padding: 12px 14px;
  font-weight: 800;
  list-style: none;
}
.howto summary::after {
  content: '+';
  float: right;
  color: var(--gold);
}
.howto[open] summary::after {
  content: '–';
}
.howto ul {
  margin: 0;
  padding: 0 16px 14px 32px;
  color: var(--muted);
  line-height: 1.55;
}
.modes {
  display: grid;
  gap: 12px;
}
.mode {
  border-radius: 18px;
  padding: 16px 18px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: 'head btn' 'text btn';
  gap: 4px 16px;
  align-items: center;
}
.mode-head {
  grid-area: head;
  display: flex;
  align-items: center;
  gap: 10px;
}
.mode-name {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.mode-tag {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  border: 1px solid var(--line-2);
  padding: 3px 8px;
  border-radius: 99px;
}
.mode-tag.gold {
  color: var(--gold);
  border-color: rgba(242, 193, 78, 0.45);
}
.mode > p {
  grid-area: text;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}
.mode > .btn {
  grid-area: btn;
}
.mode-stake {
  grid-template-columns: 1fr;
  grid-template-areas: none;
  gap: 10px;
  border-color: rgba(242, 193, 78, 0.4);
  background:
    radial-gradient(ellipse at 100% 0%, rgba(242, 193, 78, 0.16), transparent 55%),
    linear-gradient(170deg, rgba(48, 38, 24, 0.9), rgba(22, 18, 13, 0.94));
}
.mode-stake > * {
  grid-area: auto !important;
}
.mode-stake::before {
  background: linear-gradient(90deg, transparent, rgba(242, 193, 78, 0.8), transparent);
}
.stake-line {
  display: flex;
  align-items: center;
  gap: 14px;
}
.stake-line small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.stake-line strong {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.stake-line > div:last-child strong {
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 50%, var(--gold-mid));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stake-line .arrow {
  color: var(--gold);
  font-size: 22px;
}
.fine {
  color: var(--dim) !important;
  font-size: 12px !important;
  margin: 0;
}
.stake-block {
  margin: 0;
  color: var(--gold-hi);
  font-weight: 700;
  font-size: 14px;
}
.searching {
  display: flex;
  align-items: center;
  gap: 16px;
  text-align: left;
  border-radius: 18px;
  padding: 16px 18px;
  margin-top: 18px;
  animation: pop 0.25s var(--ease-out);
}
.searching strong {
  display: block;
  font-size: 17px;
}
.searching .mono {
  color: var(--muted);
  font-size: 14px;
}
.searching .btn {
  margin-left: auto;
}
.radar {
  position: relative;
  width: 44px;
  height: 44px;
  flex: none;
}
.radar span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--lime);
  animation: ping 1.8s var(--ease-out) infinite;
  opacity: 0;
}
.radar span:nth-child(2) {
  animation-delay: 0.6s;
}
.radar span:nth-child(3) {
  animation-delay: 1.2s;
}
.radar::after {
  content: '';
  position: absolute;
  inset: 15px;
  border-radius: 50%;
  background: var(--lime);
  box-shadow: 0 0 16px var(--lime);
}
@keyframes ping {
  0% {
    transform: scale(0.3);
    opacity: 1;
  }
  100% {
    transform: scale(1.15);
    opacity: 0;
  }
}

/* ---------- carteira: chip, botão dourado, gaveta ---------- */
.nav {
  display: flex;
  gap: 4px;
  margin-left: 10px;
}
.nav a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 800;
  font-size: 15px;
  padding: 8px 12px;
  border-radius: 10px;
}
.nav a:hover,
.nav a.on {
  color: var(--paper);
  background: rgba(255, 255, 255, 0.05);
}
.wallet-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 0;
  cursor: pointer;
  border-radius: 99px;
  padding: 6px 14px 6px 6px;
  font-weight: 800;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  color: var(--gold-hi);
  background: linear-gradient(180deg, rgba(242, 193, 78, 0.16), rgba(242, 193, 78, 0.05));
  box-shadow:
    inset 0 0 0 1px rgba(242, 193, 78, 0.4),
    inset 0 1px 0 rgba(255, 240, 200, 0.15);
  transition: transform 0.12s;
}
.wallet-chip:hover {
  box-shadow:
    inset 0 0 0 1px rgba(242, 193, 78, 0.7),
    0 0 24px -6px rgba(242, 193, 78, 0.6);
}
.wallet-chip:active {
  transform: scale(0.96);
}
.wallet-chip.bump {
  animation: bump 0.6s var(--ease-back);
}
@keyframes bump {
  30% {
    transform: scale(1.14);
    box-shadow:
      inset 0 0 0 1px var(--gold),
      0 0 34px rgba(242, 193, 78, 0.8);
  }
}
.coin {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--gold-hi), var(--gold) 45%, var(--gold-deep));
  box-shadow:
    inset 0 -2px 0 rgba(0, 0, 0, 0.25),
    inset 0 0 0 3px rgba(255, 232, 163, 0.35);
}
.btn-gold {
  --sh: var(--gold-deep);
  color: #2a1a00;
  background: linear-gradient(180deg, var(--gold-hi) 0%, var(--gold) 50%, var(--gold-mid) 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.6),
    inset 0 -3px 0 rgba(0, 0, 0, 0.14),
    0 5px 0 var(--sh),
    0 14px 30px -8px rgba(242, 193, 78, 0.55);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.45);
}
.btn-gold:active {
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.5),
    0 1px 0 var(--sh);
}
.btn-gold.armed {
  animation: armed 0.9s ease-in-out infinite;
}
@keyframes armed {
  50% {
    filter: brightness(1.15);
    box-shadow:
      inset 0 2px 0 rgba(255, 255, 255, 0.6),
      0 5px 0 var(--sh),
      0 0 40px rgba(242, 193, 78, 0.9);
  }
}

.drawer-wrap {
  position: fixed;
  inset: 0;
  z-index: 65;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: fade 0.2s both;
  display: flex;
  justify-content: flex-end;
}
.drawer {
  width: min(440px, 100%);
  height: 100%;
  overflow-y: auto;
  border-radius: 26px 0 0 26px;
  padding: 0 22px 28px;
  animation: slidein 0.35s var(--ease-out) both;
}
@keyframes slidein {
  from {
    transform: translateX(40px);
    opacity: 0;
  }
}
.drawer-head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 0 14px;
  background: linear-gradient(180deg, rgba(30, 26, 22, 0.98) 70%, transparent);
}
.drawer-head h2 {
  margin: 0;
  font-size: 24px;
  letter-spacing: -0.03em;
}
.drawer-head .modal-x {
  position: static;
  margin-left: auto;
}
.env-badge {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 3px 8px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--muted);
}
.env-badge.production {
  background: rgba(255, 93, 93, 0.15);
  color: #ff9b9b;
}
.env-badge.sandbox,
.env-badge.fake {
  background: rgba(245, 194, 43, 0.12);
  color: var(--lime);
}
.bal {
  padding: 20px;
  border-radius: 20px;
  margin-bottom: 16px;
  background:
    radial-gradient(ellipse at 100% 0%, rgba(242, 193, 78, 0.22), transparent 60%),
    linear-gradient(170deg, #2e2516, #171209);
  border: 1px solid rgba(242, 193, 78, 0.35);
}
.bal small {
  color: var(--muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
}
.bal-amount {
  display: block;
  font-size: 44px;
  font-weight: 800;
  letter-spacing: -0.04em;
  margin: 2px 0;
  font-variant-numeric: tabular-nums;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, var(--gold-mid));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.bal-held {
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}
.tabs {
  display: flex;
  gap: 6px;
  padding: 4px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.3);
  margin-bottom: 16px;
}
.tabs button {
  flex: 1;
  border: 0;
  background: none;
  padding: 10px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
}
.tabs button.on {
  background: rgba(255, 255, 255, 0.08);
  color: var(--paper);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.presets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.presets button {
  border: 1.5px solid var(--line-2);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  padding: 12px 0;
  font-weight: 800;
  font-size: 15px;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.presets button.on,
.presets button:hover {
  border-color: var(--gold);
  background: rgba(242, 193, 78, 0.1);
  color: var(--gold-hi);
}
.w-note {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.5;
  margin: 8px 0 14px;
}
.w-note strong {
  color: var(--paper);
}
.pix {
  text-align: center;
}
.pix img {
  width: min(240px, 70vw);
  aspect-ratio: 1;
  border-radius: 16px;
  background: #fff;
  padding: 10px;
  box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.8);
}
.pix-code {
  display: flex;
  gap: 8px;
  margin: 14px 0 8px;
}
.pix-code input {
  font-family: var(--mono);
  font-size: 12px;
}
.pix-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
  margin: 8px 0;
}
.pix-status .dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold);
  animation: blink 1.2s ease-in-out infinite;
}
@keyframes blink {
  50% {
    opacity: 0.25;
  }
}
.pix-ok {
  font-size: 26px;
  font-weight: 800;
  color: var(--lime);
  margin: 16px 0 6px;
  animation: pop 0.4s var(--ease-back);
}
.list {
  display: grid;
  gap: 6px;
}
.li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.25);
  font-size: 14px;
}
.li .t {
  font-weight: 700;
}
.li .d {
  color: var(--dim);
  font-size: 12px;
}
.li .v {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.li .v.pos {
  color: var(--lime);
}
.li .v.neg {
  color: #ff9b9b;
}
.st {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 7px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--muted);
}
.st.ok {
  background: rgba(245, 194, 43, 0.14);
  color: var(--lime);
}
.st.bad {
  background: rgba(255, 93, 93, 0.15);
  color: #ff9b9b;
}
.st.wait {
  background: rgba(242, 193, 78, 0.15);
  color: var(--gold);
}
.check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 14px;
  color: var(--muted);
  margin: 6px 0 14px;
  cursor: pointer;
}
.check input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--lime);
  flex: none;
  padding: 0;
}
.result-money {
  margin: -8px 0 18px;
  font-weight: 800;
  font-size: 18px;
}
.result-money.win {
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, var(--gold-mid));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-size: 24px;
}
.mode-chip.stake {
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  color: #2a1a00;
}

/* =========================================================
   PALCO DO TABULEIRO (3D ou DOM)
   ========================================================= */
/* isolation: o z-index das peças/cartas de cada jogo fica preso no palco (nunca passa por cima do fim de partida, VS ou avisos) */
.stage {
  position: relative;
  width: 100%;
  aspect-ratio: 8 / 9.4;
  isolation: isolate;
}
.stage canvas.board3d {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: manipulation;
}
.stage.can-play canvas.board3d {
  cursor: pointer;
}
#app > .stage {
  position: absolute;
  left: -9999px;
  width: 400px;
} /* estacionado antes de ir para o lugar */

/* ---------- bola de gude ---------- */
.stage canvas.gude3d {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.stage.can-play canvas.gude3d {
  cursor: grab;
}
.stage.can-play canvas.gude3d:active {
  cursor: grabbing;
}
.gude-hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.gude-left {
  margin-top: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  background: rgba(14, 12, 11, 0.6);
  padding: 3px 10px;
  border-radius: 99px;
  border: 1px solid var(--line);
}
.gude-left:empty {
  display: none;
}
/* a dica fica no alto do campo (abaixo do "RODA 1 · ..."): embaixo ela cobria a risca de onde se atira */
.gude-hint {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translate(-50%, -8px);
  max-width: calc(100% - 24px);
  text-align: center;
  font-weight: 800;
  font-size: 13px;
  color: var(--paper);
  background: rgba(14, 12, 11, 0.78);
  padding: 7px 14px;
  border-radius: 99px;
  border: 1px solid var(--line-2);
  opacity: 0;
  transition:
    opacity 0.2s,
    transform 0.25s var(--ease-out);
}
.gude-hint.on {
  opacity: 1;
  transform: translate(-50%, 0);
}
.gude-pop {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.6);
  font-weight: 900;
  font-size: clamp(22px, 6cqi, 40px);
  letter-spacing: 0.02em;
  white-space: nowrap;
  opacity: 0;
  color: var(--paper);
  text-shadow:
    0 4px 0 rgba(0, 0, 0, 0.5),
    0 0 24px rgba(0, 0, 0, 0.6);
}
.gude-pop.show {
  animation: gudepop 1.6s var(--ease-out) forwards;
}
.gude-pop.mine {
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, var(--gold-mid));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 0 var(--gold-deep)) drop-shadow(0 0 18px rgba(0, 0, 0, 0.6));
  text-shadow: none;
}
.gude-pop.opp {
  color: #ff8a96;
}
.gude-pop.muted {
  font-size: clamp(14px, 3.6cqi, 22px);
  color: var(--muted);
}
@keyframes gudepop {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.6);
  }
  15% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08);
  }
  25% {
    transform: translate(-50%, -50%) scale(1);
  }
  80% {
    opacity: 1;
    transform: translate(-50%, -60%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -75%) scale(0.96);
  }
}
.stage[data-game='gude'] {
  container-type: inline-size;
}
.prodas {
  display: flex;
  gap: 4px;
  margin-top: 3px;
}
.pcard.right .prodas {
  justify-content: flex-end;
}
.prodas[hidden] {
  display: none;
}
.prodas i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--gold-mid);
  background: transparent;
  transition:
    background 0.3s,
    box-shadow 0.3s;
}
.prodas i.on {
  background: var(--gold);
  box-shadow: 0 0 8px rgba(245, 194, 43, 0.7);
}
.gude-dists {
  position: absolute;
  top: 46%;
  left: 50%;
  transform: translate(-50%, 0);
  display: flex;
  gap: 8px;
  opacity: 0;
  transition: opacity 0.25s;
}
.gude-dists.on {
  opacity: 1;
}
.gude-dist {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 99px;
  background: rgba(14, 12, 11, 0.8);
  color: var(--paper);
  border: 1px solid var(--line-2);
  white-space: nowrap;
}
.gude-dist.p1 {
  border-color: var(--p1);
}
.gude-dist.p2 {
  border-color: var(--p2);
}
.pscore {
  flex: none;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  font-weight: 900;
  font-size: 20px;
  color: #2a1a00;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, var(--gold-mid));
  box-shadow: 0 3px 0 var(--gold-deep);
}
.pscore[hidden] {
  display: none;
}
.pscore.bump {
  animation: scorebump 0.5s var(--ease-back);
}
@keyframes scorebump {
  40% {
    transform: scale(1.35);
  }
}

/* =========================================================
   PARTIDA
   ========================================================= */
.match {
  --board-w: min(600px, 96vw, calc((100svh - 190px) * 8 / 9.4));
  padding: 12px 12px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.duel {
  width: min(var(--board-w), 640px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 10px;
}
.pcard {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 7px;
  border-radius: 16px;
  border: 1px solid transparent;
  transition:
    background 0.25s,
    transform 0.25s var(--ease-back),
    border-color 0.25s;
}
.pcard.right {
  justify-content: flex-end;
  text-align: right;
}
.pcard.active {
  background: linear-gradient(180deg, rgba(255, 245, 230, 0.09), rgba(255, 245, 230, 0.03));
  border-color: var(--line-2);
  transform: scale(1.04);
  box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.7);
}
.ring {
  position: relative;
  width: 52px;
  height: 52px;
  flex: none;
}
.ring svg {
  position: absolute;
  inset: 0;
  transform: rotate(-90deg);
}
.ring circle {
  fill: none;
  stroke-width: 4;
}
.ring .track {
  stroke: rgba(255, 255, 255, 0.08);
}
.ring .prog {
  stroke: var(--lime);
  stroke-linecap: round;
  stroke-dasharray: 157.08;
  stroke-dashoffset: 157.08;
  transition: stroke 0.3s;
  filter: drop-shadow(0 0 4px rgba(245, 194, 43, 0.6));
}
.ring.low .prog {
  stroke: var(--bad);
  filter: drop-shadow(0 0 5px rgba(255, 93, 93, 0.8));
}
.ring .disc {
  position: absolute;
  inset: 9px;
}
.disc {
  border-radius: 50%;
  display: block;
}
.d1 {
  background: radial-gradient(circle at 38% 30%, #ff6a78, var(--p1) 45%, var(--p1-deep));
  box-shadow:
    inset 0 -3px 0 rgba(0, 0, 0, 0.25),
    0 3px 8px rgba(0, 0, 0, 0.4);
}
.d2 {
  background: radial-gradient(circle at 38% 30%, #fff3b8, var(--p2) 40%, var(--p2-deep));
  box-shadow:
    inset 0 -3px 0 rgba(0, 0, 0, 0.25),
    0 3px 8px rgba(0, 0, 0, 0.4);
}
.pinfo {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.pname {
  font-weight: 800;
  font-size: 17px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -0.02em;
}
.pstate {
  font-size: 11px;
  font-weight: 800;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.pstate.off {
  color: var(--bad);
}
.vs-mid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-weight: 800;
  font-size: 14px;
  color: var(--muted);
  text-align: center;
  min-width: 92px;
}
.vs-mid #turn-label.mine {
  color: var(--lime);
  text-shadow: 0 0 18px rgba(245, 194, 43, 0.55);
  animation: nudge 1.6s ease-in-out infinite;
  display: inline-block;
}
.mode-chip {
  font-family: var(--mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink);
  background: var(--p2);
  padding: 2px 8px;
  border-radius: 99px;
}
@keyframes nudge {
  50% {
    transform: scale(1.08);
  }
}
.match-stage {
  width: var(--board-w);
}
.match-actions {
  margin-top: 10px;
}

/* ---------- tabuleiro DOM (reserva sem WebGL) ---------- */
.dom-board {
  container-type: inline-size;
  --gap: calc(var(--bw, 400px) * 0.018);
  --pad: calc(var(--bw, 400px) * 0.024);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4% 3%;
}
.dom-board .ghost-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1.8cqi;
  padding: 0 2.4cqi;
  margin-bottom: 2cqi;
}
.dom-board .gh {
  border-radius: 50%;
  aspect-ratio: 1;
  opacity: 0;
  transform: translateY(6px) scale(0.85);
  transition:
    opacity 0.12s,
    transform 0.18s var(--ease-back);
}
.dom-board .gh.on {
  opacity: 0.95;
  transform: none;
}
.dom-board .board {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1.8cqi;
  padding: 2.4cqi;
  background: linear-gradient(180deg, #2a2630, #141216 40%, #0c0b0e);
  border-radius: 18px;
  box-shadow:
    0 10px 0 #b8860b,
    0 22px 40px rgba(0, 0, 0, 0.5),
    inset 0 0 0 2px var(--gold);
  touch-action: manipulation;
  user-select: none;
}
.dom-board .board.thud {
  animation: thud 0.22s var(--ease-out);
}
@keyframes thud {
  40% {
    transform: translateY(3px) scaleY(0.992);
  }
}
.dom-board .board.can-play {
  cursor: pointer;
}
.dom-board .cell {
  aspect-ratio: 1;
  border-radius: 50%;
  background: #050405;
  outline: 2px solid #c99a1c;
  outline-offset: 0;
  position: relative;
  box-shadow: inset 0 4px 7px rgba(0, 0, 0, 0.6);
}
.dom-board .board.can-play .cell.col-hot {
  background: #151c4d;
}
.dom-board .pc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
}
.dom-board .pc.p1 {
  background: radial-gradient(circle at 38% 30%, #ff6a78, var(--p1) 45%, var(--p1-deep));
}
.dom-board .pc.p2 {
  background: radial-gradient(circle at 38% 30%, #fff3b8, var(--p2) 40%, var(--p2-deep));
}
.dom-board .pc.fall {
  animation: fall var(--dur, 0.4s) cubic-bezier(0.5, 0, 1, 0.5) both;
  z-index: 2;
}
.dom-board .pc.land {
  animation: land 0.32s var(--ease-out);
}
@keyframes fall {
  from {
    transform: translateY(calc(-1 * (var(--fall) + 1) * 112%));
  }
  to {
    transform: translateY(0);
  }
}
@keyframes land {
  0% {
    transform: scale(1.08, 0.86);
  }
  45% {
    transform: translateY(-9%) scale(0.97, 1.04);
  }
  100% {
    transform: none;
  }
}
.dom-board .cell.last::after {
  content: '';
  position: absolute;
  inset: 39%;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  z-index: 3;
}
.dom-board .cell.win .pc {
  animation: winpulse 0.9s ease-in-out infinite;
  z-index: 3;
}
.dom-board .cell.win.p1-glow {
  box-shadow:
    0 0 0 3px #fff,
    0 0 26px 6px rgba(255, 61, 85, 0.75);
}
.dom-board .cell.win.p2-glow {
  box-shadow:
    0 0 0 3px #fff,
    0 0 26px 6px rgba(255, 197, 49, 0.75);
}
@keyframes winpulse {
  50% {
    transform: scale(1.09);
  }
}
.dom-board .board.ended .cell:not(.win) .pc {
  filter: saturate(0.45) brightness(0.65);
}
.dom-board .winline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
  z-index: 4;
}
.dom-board .winline line {
  stroke: #fff;
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: var(--len, 0);
  stroke-dashoffset: var(--len, 0);
  opacity: 0;
}
.dom-board .winline.on line {
  opacity: 0.95;
  animation: draw 0.5s 0.15s var(--ease-out) forwards;
}
@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

/* ---------- VS splash ---------- */
@keyframes vs-out {
  to {
    opacity: 0;
    transform: scale(1.06);
    visibility: hidden;
  }
}

/* ---------- resultado ---------- */
.result {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: end center;
  padding: 16px;
  background: linear-gradient(to top, rgba(14, 12, 11, 0.9), rgba(14, 12, 11, 0.3) 60%, transparent);
  animation: fade 0.4s both;
  pointer-events: none;
}
.result-card {
  pointer-events: auto;
  width: min(480px, 100%);
  border-radius: 24px;
  padding: 24px;
  text-align: center;
  margin-bottom: max(16px, env(safe-area-inset-bottom));
  animation: sheet 0.5s 0.1s var(--ease-back) both;
}
.result-title {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(52px, 12vw, 88px);
  letter-spacing: 0.02em;
  line-height: 0.95;
  display: flex;
  justify-content: center;
}
.result-title span {
  display: inline-block;
  animation: letter 0.5s var(--ease-back) both;
}
.result-title.win {
  color: var(--lime);
  text-shadow:
    0.03em 0.03em 0 #b07a00,
    0.06em 0.06em 0 #7d5200,
    0 0 40px rgba(245, 194, 43, 0.45);
}
.result-title.lose {
  color: var(--paper);
  opacity: 0.92;
  text-shadow: 0.03em 0.03em 0 #6b6257;
}
.result-title.draw,
.result-title.void {
  color: var(--muted);
}
.result-reason {
  color: var(--muted);
  font-weight: 600;
  margin: 10px 0 20px;
}
.result-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
@keyframes letter {
  from {
    transform: translateY(40px) rotate(8deg);
    opacity: 0;
  }
}
@keyframes sheet {
  from {
    transform: translateY(60px);
    opacity: 0;
  }
}
@keyframes fade {
  from {
    opacity: 0;
  }
}

/* ---------- modais ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: fade 0.2s both;
}
.modal-card {
  width: min(520px, 100%);
  max-height: 86svh;
  overflow: auto;
  border-radius: 22px;
  padding: 26px 24px 22px;
  animation: pop 0.25s var(--ease-out);
}
.modal-card h3 {
  margin: 0 0 18px;
  font-size: 22px;
  letter-spacing: -0.02em;
}
.modal-x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 0;
  background: rgba(255, 255, 255, 0.07);
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
  z-index: 1;
}
.audit-body {
  display: grid;
  gap: 10px;
}
.audit-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 10px;
  font-size: 14px;
}
.audit-row span:first-child {
  color: var(--muted);
  font-weight: 600;
}
.audit-row span:last-child {
  font-weight: 700;
  text-align: right;
}
.audit-row .ok {
  color: var(--lime);
}
.audit-row .bad {
  color: var(--bad);
}
.audit-hash {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--dim);
  word-break: break-all;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 10px;
  white-space: pre-wrap;
}
.audit-moves {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: flex-end;
}
.audit-moves b {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  color: var(--ink);
}

/* ---------- toast / confete ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 70;
  background: var(--paper);
  color: var(--ink);
  font-weight: 800;
  padding: 12px 18px;
  border-radius: 14px;
  box-shadow:
    0 5px 0 rgba(0, 0, 0, 0.6),
    0 18px 40px -10px rgba(0, 0, 0, 0.6);
  animation: toast-in 0.3s var(--ease-back);
  max-width: calc(100vw - 32px);
}
@keyframes toast-in {
  from {
    transform: translate(-50%, 30px);
    opacity: 0;
  }
}
.confetti {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 45;
}

/* =========================================================
   RESPONSIVO
   ========================================================= */
@media (max-width: 860px) {
  .login-inner {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  .login-hero {
    text-align: center;
  }
  .login-tag {
    margin: 22px 0 8px;
  }
  .login-points {
    display: none;
  }
  .game-grid {
    grid-template-columns: 1fr;
  }
  .game-stage {
    max-width: 340px;
  }
  .nav {
    display: none;
  }
  .brand-row {
    justify-content: center;
  }
  .hero-mascot {
    width: 150px;
  }
  .hero-mascot .bubble {
    left: -40%;
    font-size: 13px;
  }
}
@media (max-width: 520px) {
  #me-name {
    display: none;
  }
  .wallet-chip {
    padding: 5px 10px 5px 5px;
    font-size: 14px;
  }
  .coin {
    width: 22px;
    height: 22px;
  }
  .wordmark.small {
    font-size: 22px;
  }
  .bar {
    gap: 8px;
  }
  .bar-right {
    gap: 6px;
  }
  .icon-btn {
    width: 38px;
    height: 38px;
  }
  .mode {
    grid-template-columns: 1fr;
    grid-template-areas: 'head' 'text' 'btn';
  }
  .mode > .btn {
    width: 100%;
    margin-top: 8px;
  }
  .drawer {
    border-radius: 22px 22px 0 0;
    height: auto;
    max-height: 92svh;
    align-self: flex-end;
  }
  .presets {
    grid-template-columns: repeat(2, 1fr);
  }
  .user-chip {
    padding: 5px;
  }
  .match {
    --board-w: min(100vw, calc((100svh - 170px) * 8 / 9.4));
    padding: 8px 4px 16px;
  }
  .duel {
    width: 100%;
    padding: 0 6px;
  }
  .pname {
    font-size: 14px;
  }
  .ring {
    width: 42px;
    height: 42px;
  }
  .ring .disc {
    inset: 7px;
  }
  .vs-mid {
    min-width: 64px;
    font-size: 12px;
  }
  .searching {
    flex-wrap: wrap;
  }
  .home-sub,
  .game-tagline {
    font-size: 16px;
  }
  .hero-mascot {
    width: 104px;
    align-self: start;
  }
  .hero-mascot .bubble {
    display: none;
  }
  .home-hero {
    gap: 8px;
  }
  .game-stage {
    max-width: 260px;
  }
}
@media (max-height: 760px) {
  .result-card {
    padding: 14px 16px;
    border-radius: 18px;
  }
  .result-title {
    font-size: clamp(34px, 7vh, 48px);
  }
  .result-reason {
    margin: 4px 0 12px;
    font-size: 14px;
  }
  .result-actions .btn {
    padding: 10px 16px;
    font-size: 15px;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* =========================================================
   ADMIN
   ========================================================= */
.admin-main {
  width: min(1100px, 100%);
  margin: 0 auto;
  padding: 28px clamp(16px, 4vw, 40px) 60px;
}
.admin-title {
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(38px, 5vw, 58px);
  letter-spacing: 0.01em;
  margin: 0 0 18px;
}
.admin-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
.admin-card {
  border-radius: 20px;
  padding: 18px 20px;
}
.admin-card h2 {
  margin: 0 0 10px;
  font-size: 20px;
}
.admin-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.admin-big {
  font-size: 28px;
  font-weight: 800;
  margin: 4px 0;
}
.admin-big.ok {
  color: var(--lime);
}
.admin-big.bad {
  color: var(--bad);
}
.admin-li {
  flex-wrap: wrap;
}
.admin-actions {
  display: flex;
  gap: 8px;
  flex-basis: 100%;
  justify-content: flex-end;
}
.admin-actions:empty {
  display: none;
}
.admin a {
  color: var(--gold);
}
.w-sub {
  margin: 22px 0 10px;
  font-size: 17px;
}
.pix-ok.muted {
  color: var(--muted);
}
.mt-10 {
  margin-top: 10px;
}
.admin-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.fine.stake-fee {
  color: var(--gold-hi) !important;
  font-weight: 700;
}
.presets.tiers {
  margin: 2px 0 4px;
}

/* =========================================================
   LATINHA NA BALADEIRA: tela dividida
   ========================================================= */
.stage[data-game='latinha'] {
  aspect-ratio: 16 / 9;
  container-type: inline-size;
}
.stage canvas.latinha3d {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.stage.can-play canvas.latinha3d {
  cursor: grab;
}
.match:has(.stage[data-game='latinha']) {
  --board-w: min(1120px, 96vw, calc((100svh - 190px) * 16 / 9));
}
.match:has(.stage[data-game='latinha']) .duel {
  width: min(var(--board-w), 900px);
}
@media (max-aspect-ratio: 4 / 5) {
  .stage[data-game='latinha'] {
    aspect-ratio: 3 / 4.4;
  }
  .match:has(.stage[data-game='latinha']) {
    --board-w: min(100vw, calc((100svh - 170px) * 3 / 4.4));
  }
}
.lat-hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.lat-hud.stacked {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
}
.lat-hud.stacked .lat-side.me {
  order: 2;
}
.lat-hud::after {
  content: '';
  position: absolute;
  left: calc(50% - 1.5px);
  top: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, transparent, var(--gold) 15%, var(--gold) 85%, transparent);
  box-shadow: 0 0 14px rgba(245, 194, 43, 0.6);
}
.lat-hud.stacked::after {
  left: 0;
  right: 0;
  top: calc(50% - 1.5px);
  bottom: auto;
  width: auto;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold) 15%, var(--gold) 85%, transparent);
}
.lat-side {
  position: relative;
  padding: 10px 12px;
  min-width: 0;
  overflow: hidden;
}
.lat-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.lat-name {
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 9px;
  border-radius: 99px;
  background: rgba(8, 6, 4, 0.7);
  color: var(--paper);
  border: 1px solid var(--line-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lat-side.me .lat-name {
  border-color: var(--gold);
  color: var(--gold-hi);
}
.lat-score {
  font-family: var(--display);
  font-size: clamp(26px, 4.4cqi, 44px);
  line-height: 1;
  color: var(--gold);
  text-shadow:
    0 3px 0 #3d2a00,
    0 0 18px rgba(0, 0, 0, 0.7);
}
.lat-stones {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-top: 6px;
  max-width: 70%;
}
.lat-stones i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e5ddd2, #8b8178 70%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
  transition: opacity 0.3s;
}
.lat-stones i.used {
  opacity: 0.16;
}
.lat-stage {
  margin-top: 5px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--paper);
  text-shadow: 0 1px 3px #000;
}
.lat-side.demo .lat-top,
.lat-side.demo .lat-stones,
.lat-side.demo .lat-stage {
  visibility: hidden;
}
.lat-pop {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%) scale(0.6);
  font-family: var(--display);
  font-size: clamp(24px, 5cqi, 46px);
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  color: var(--paper);
  text-shadow:
    0 4px 0 rgba(0, 0, 0, 0.55),
    0 0 22px rgba(0, 0, 0, 0.6);
}
.lat-pop.show {
  animation: gudepop 1.6s var(--ease-out) forwards;
}
.lat-pop.mine {
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 55%, var(--gold-mid));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 0 var(--gold-deep));
  text-shadow: none;
}
.lat-pop.opp {
  color: #ff8a96;
}
.lat-pop.muted {
  font-size: clamp(16px, 3cqi, 26px);
  color: var(--muted);
}
.lat-hint {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translate(-50%, 8px);
  max-width: calc(100% - 20px);
  padding: 6px 12px;
  border-radius: 99px;
  text-align: center;
  font-weight: 800;
  font-size: 12px;
  color: var(--paper);
  background: rgba(8, 6, 4, 0.78);
  border: 1px solid var(--line-2);
  opacity: 0;
  transition:
    opacity 0.2s,
    transform 0.25s var(--ease-out);
}
.lat-hint.on {
  opacity: 1;
  transform: translate(-50%, 0);
}
/* arte do pôster (antes da imagem chegar): muro, pirâmide de latas */
.art-lat {
  position: absolute;
  left: 50%;
  top: 38%;
  width: 66cqi;
  height: 46cqi;
  transform: translate(-50%, -50%);
  transition: transform 0.4s var(--ease-out);
}
.poster:hover .art-lat {
  transform: translate(-50%, -53%) scale(1.04);
}
.art-lat .muro {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40%;
  border-radius: 2px;
  background: repeating-linear-gradient(0deg, #3b2c22 0 1.2cqi, #7a5a44 1.2cqi 6cqi), #6b4f3c;
  background-size: 100% 6cqi;
  box-shadow:
    inset 0 1.5cqi 0 rgba(255, 255, 255, 0.08),
    0 2cqi 4cqi rgba(0, 0, 0, 0.5);
}
.art-lat .lata {
  position: absolute;
  width: 9cqi;
  height: 12.5cqi;
  left: calc(50% + var(--x) * 9.8cqi);
  bottom: calc(40% + var(--y) * 12.5cqi);
  transform: translateX(-50%);
  border-radius: 1.4cqi 1.4cqi 1cqi 1cqi;
  background:
    linear-gradient(
      90deg,
      rgba(0, 0, 0, 0.45),
      transparent 30%,
      rgba(255, 255, 255, 0.35) 45%,
      transparent 60%,
      rgba(0, 0, 0, 0.4)
    ),
    linear-gradient(180deg, #d8d8d8 0 9%, var(--c) 9% 38%, var(--s) 38% 62%, var(--c) 62% 91%, #bdbdbd 91%);
  box-shadow: 0 1cqi 1.5cqi rgba(0, 0, 0, 0.45);
}
.art-lat .l0 {
  --c: #c4141f;
  --s: #f5c22b;
}
.art-lat .l1 {
  --c: #1f2a7a;
  --s: #e9e9e9;
}
.art-lat .l2 {
  --c: #156b3a;
  --s: #f5c22b;
}
.art-lat .forquilha {
  position: absolute;
  left: 6%;
  bottom: -46%;
  width: 12cqi;
  height: 26cqi;
}
.art-lat .forquilha::before,
.art-lat .forquilha::after {
  content: '';
  position: absolute;
  bottom: 30%;
  width: 2cqi;
  height: 13cqi;
  border-radius: 1cqi;
  background: linear-gradient(90deg, #4a2c14, #8a5a30, #4a2c14);
  transform-origin: 50% 100%;
}
.art-lat .forquilha::before {
  left: 25%;
  transform: rotate(-24deg);
}
.art-lat .forquilha::after {
  left: 55%;
  transform: rotate(24deg);
  box-shadow: -2.6cqi 9cqi 0 -0.2cqi #6b4423;
}
/* contagem regressiva da largada (Latinha) */
.lat-count {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: clamp(90px, 22cqi, 220px);
  line-height: 1;
  color: var(--gold);
  text-shadow:
    0 0.06em 0 #3d2a00,
    0 0 40px rgba(0, 0, 0, 0.8);
  opacity: 0;
  pointer-events: none;
}
.lat-count.show {
  animation: countPop 0.9s var(--ease-out) both;
}
.lat-count.go {
  color: var(--paper);
  font-size: clamp(70px, 16cqi, 160px);
}
@keyframes countPop {
  0% {
    opacity: 0;
    transform: scale(1.6);
  }
  25% {
    opacity: 1;
    transform: scale(1);
  }
  80% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: scale(0.85);
  }
}
/* nome dos jogos em letra de tag (pichação) */
.poster-title {
  font-family: var(--tag);
  text-transform: none;
  font-size: clamp(42px, 4.8vw, 62px);
  line-height: 0.95;
  letter-spacing: 0;
  transform: rotate(-4deg);
  transform-origin: 0 100%;
  color: #fff6e0;
  text-shadow:
    0.03em 0.03em 0 #e3192f,
    0.06em 0.06em 0 rgba(0, 0, 0, 0.85),
    0 0 18px rgba(0, 0, 0, 0.6);
}
.game-title {
  font-family: var(--tag);
  text-transform: none;
  font-size: clamp(56px, 8vw, 104px);
  line-height: 0.95;
  letter-spacing: 0;
  transform: rotate(-3deg);
  transform-origin: 0 100%;
  color: #fff6e0;
  text-shadow:
    0.03em 0.03em 0 #e3192f,
    0.07em 0.07em 0 rgba(0, 0, 0, 0.8);
}

/* =========================================================
   TELA DO X1 (antes da partida): cartaz de luta
   ========================================================= */
.vs-splash {
  position: fixed;
  inset: 0;
  z-index: 50;
  overflow: hidden;
  background: #070504;
  animation: vs-out 0.35s 1.68s ease-in forwards;
}
.vs-splash.go {
  animation:
    vs-shake 0.32s 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97),
    vs-out 0.35s 1.68s ease-in forwards;
}
/* os dois painéis cobrem a tela toda e são recortados pela MESMA linha em ziguezague, cada um afastado um pouco
   dela: a rachadura é o vão preto entre os dois (encaixa certinho, nenhuma cor invade o outro lado) */
.vs-panel {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
}
.vs-panel.left {
  justify-content: flex-start;
  padding-left: 5vw;
  background: radial-gradient(circle at 12% 45%, #ff5a68 0, #d4142b 30%, #6b0714 70%);
  clip-path: polygon(
    0 0,
    55.4% 0%,
    56.46% 7%,
    52.2% 15%,
    54.96% 22%,
    50.08% 31%,
    52.34% 38%,
    47.66% 47%,
    50.6% 55%,
    46.66% 62%,
    48.88% 71%,
    44.22% 79%,
    46.48% 86%,
    42.22% 94%,
    43.4% 100%,
    0 100%
  );
  animation: vs-in-l 0.42s var(--ease-out) both;
}
.vs-panel.right {
  justify-content: flex-end;
  padding-right: 5vw;
  background: radial-gradient(circle at 88% 55%, #fff1a8 0, #f5c22b 30%, #8a5a00 70%);
  clip-path: polygon(
    56.6% 0%,
    57.66% 7%,
    53.4% 15%,
    56.16% 22%,
    51.28% 31%,
    53.54% 38%,
    48.86% 47%,
    51.8% 55%,
    47.86% 62%,
    50.08% 71%,
    45.42% 79%,
    47.68% 86%,
    43.42% 94%,
    44.6% 100%,
    100% 100%,
    100% 0
  );
  animation: vs-in-r 0.42s var(--ease-out) both;
}
/* textura de cartaz: retícula de pontinhos por cima dos painéis */
.vs-panel::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(0, 0, 0, 0.22) 1.2px, transparent 1.4px);
  background-size: 7px 7px;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.vs-card {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: clamp(12px, 2vw, 26px);
  max-width: 40vw;
}
.vs-panel.left .vs-card {
  animation: vs-card-l 0.5s 0.12s var(--ease-back) both;
}
.vs-panel.right .vs-card {
  animation: vs-card-r 0.5s 0.12s var(--ease-back) both;
}
.vs-avatar {
  position: relative;
  flex: none;
  width: clamp(84px, 13vw, 170px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.vs-face {
  width: 118%;
  height: auto;
  filter: drop-shadow(0 12px 0 rgba(0, 0, 0, 0.28));
}
.vs-initial {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: clamp(44px, 7vw, 92px);
  color: #fff6e0;
  background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.35), rgba(0, 0, 0, 0.35));
  border: clamp(4px, 0.5vw, 7px) solid #fff6e0;
  box-shadow:
    0 10px 0 rgba(0, 0, 0, 0.3),
    inset 0 -6px 0 rgba(0, 0, 0, 0.2);
  text-shadow: 0 4px 0 rgba(0, 0, 0, 0.35);
}
.vs-face:not([hidden]) + .vs-initial {
  display: none;
}
.vs-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.vs-panel.right .vs-meta {
  align-items: flex-end;
  text-align: right;
}
.vs-tag {
  align-self: flex-start;
  padding: 3px 10px 2px;
  font-family: var(--mono);
  font-size: clamp(10px, 1vw, 13px);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff6e0;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 99px;
}
.vs-panel.right .vs-tag {
  align-self: flex-end;
  color: #2a1a00;
  background: rgba(255, 255, 255, 0.55);
}
.vs-name {
  font-family: var(--tag);
  font-size: clamp(30px, 5.4vw, 76px);
  line-height: 1;
  color: #fff6e0;
  text-shadow:
    0.04em 0.04em 0 #1a0d04,
    0.08em 0.08em 0 rgba(0, 0, 0, 0.35);
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transform: rotate(-3deg);
}
.vs-panel.right .vs-name {
  color: #1a0d04;
  text-shadow:
    0.04em 0.04em 0 #fff6e0,
    0.08em 0.08em 0 rgba(0, 0, 0, 0.25);
}
/* X1 no centro: caixa dourada com relevo sólido (sem contorno torto) */
.vs-center {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  display: grid;
  place-items: center;
}
.vs-x1 {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0.04em 0.16em 0;
  transform: rotate(-7deg);
  font-family: var(--display);
  font-size: clamp(84px, 17vw, 210px);
  line-height: 1;
  color: #1a0d04;
  background: linear-gradient(180deg, #ffe98f, var(--gold) 52%, #c98a06);
  border-radius: 0.1em;
  box-shadow:
    0 0 0 0.035em #1a0d04,
    0.035em 0.035em 0 0.035em #1a0d04,
    0.075em 0.075em 0 0.035em #7d5200,
    0.11em 0.11em 0 0.035em #1a0d04,
    0 0 0.5em rgba(245, 194, 43, 0.45);
  animation: vs-slam 0.5s 0.3s var(--ease-back) both;
}
.vs-x1 span {
  display: block;
  transform: translateY(0.02em);
  text-shadow: 0.025em 0.025em 0 rgba(255, 255, 255, 0.45);
}
.vs-ring {
  position: absolute;
  width: clamp(120px, 22vw, 300px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: clamp(4px, 0.6vw, 9px) solid #fff6e0;
  opacity: 0;
  animation: vs-ring 0.6s 0.42s ease-out both;
}
.vs-ring.r2 {
  border-color: var(--gold);
  animation-delay: 0.5s;
}
.vs-flash {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: #fff6e0;
  opacity: 0;
  pointer-events: none;
  animation: vs-flash 0.4s 0.42s ease-out both;
}
.vs-foot {
  position: absolute;
  left: 50%;
  bottom: 9%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  animation: vs-foot 0.45s 0.62s var(--ease-back) both;
}
.vs-game {
  font-family: var(--tag);
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1;
  color: #fff6e0;
  text-shadow:
    0.04em 0.04em 0 #e3192f,
    0.08em 0.08em 0 rgba(0, 0, 0, 0.8);
  white-space: nowrap;
  transform: rotate(-3deg);
}
.vs-mode {
  font-family: var(--display);
  font-size: clamp(15px, 1.8vw, 22px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #241600;
  padding: 6px 14px 4px;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 60%, var(--gold-mid));
  box-shadow:
    0 4px 0 var(--gold-deep),
    0 10px 18px -6px rgba(0, 0, 0, 0.7);
  clip-path: polygon(0 8%, 100% 0, 97% 100%, 3% 92%);
  white-space: nowrap;
}
.vs-mode.plain {
  color: #fff6e0;
  background: rgba(0, 0, 0, 0.6);
  box-shadow: none;
}
@keyframes vs-in-l {
  from {
    transform: translateX(-105%);
  }
}
@keyframes vs-in-r {
  from {
    transform: translateX(105%);
  }
}
@keyframes vs-card-l {
  from {
    transform: translateX(-40vw) rotate(-8deg);
    opacity: 0;
  }
}
@keyframes vs-card-r {
  from {
    transform: translateX(40vw) rotate(8deg);
    opacity: 0;
  }
}
@keyframes vs-slam {
  0% {
    transform: rotate(-7deg) scale(3.4);
    opacity: 0;
  }
  55% {
    opacity: 1;
    transform: rotate(-7deg) scale(0.92);
  }
  75% {
    transform: rotate(-7deg) scale(1.06);
  }
  100% {
    transform: rotate(-7deg) scale(1);
  }
}
@keyframes vs-ring {
  0% {
    transform: scale(0.4);
    opacity: 0.95;
  }
  100% {
    transform: scale(2.6);
    opacity: 0;
  }
}
@keyframes vs-flash {
  0% {
    opacity: 0.75;
  }
  100% {
    opacity: 0;
  }
}
@keyframes vs-foot {
  from {
    transform: translateX(-50%) translateY(40px);
    opacity: 0;
  }
}
@keyframes vs-shake {
  0%,
  100% {
    transform: translate(0, 0);
  }
  20% {
    transform: translate(-9px, 5px);
  }
  40% {
    transform: translate(8px, -6px);
  }
  60% {
    transform: translate(-6px, 3px);
  }
  80% {
    transform: translate(4px, -2px);
  }
}
@media (max-width: 640px) {
  /* celular: um em cima, outro embaixo; a rachadura atravessa deitada */
  .vs-panel {
    padding: 0 6vw !important;
  }
  .vs-panel.left {
    background: radial-gradient(circle at 30% 18%, #ff5a68 0, #d4142b 30%, #6b0714 70%);
    clip-path: polygon(
      0 0,
      100% 0,
      100% 45.45%,
      88% 47.81%,
      75% 45.65%,
      62% 50.09%,
      49% 48.03%,
      36% 52.47%,
      24% 50.23%,
      11% 54.27%,
      0% 53.45%
    );
    justify-content: flex-start;
    align-items: flex-end;
    padding-bottom: 56vh !important;
  }
  .vs-panel.right {
    background: radial-gradient(circle at 70% 82%, #fff1a8 0, #f5c22b 30%, #8a5a00 70%);
    clip-path: polygon(
      0% 54.55%,
      11% 55.37%,
      24% 51.33%,
      36% 53.57%,
      49% 49.13%,
      62% 51.19%,
      75% 46.75%,
      88% 48.91%,
      100% 46.55%,
      100% 100%,
      0 100%
    );
    justify-content: flex-end;
    align-items: flex-start;
    padding-top: 56vh !important;
  }
  .vs-card {
    max-width: 88vw;
  }
  .vs-foot {
    bottom: 4%;
  }
  @keyframes vs-in-l {
    from {
      transform: translateY(-105%);
    }
  }
  @keyframes vs-in-r {
    from {
      transform: translateY(105%);
    }
  }
}

/* =========================================================
   X1 COM AMIGO: convite por link, conta pelo convite, amigos, desafio direto
   ========================================================= */
/* modo com escolha + botão (treino: quantos jogadores) */
.mode > .mode-btns {
  grid-area: btn;
  display: grid;
  gap: 8px;
}

/* painel do anfitrião: link, copiar, WhatsApp */
.inviting {
  border-radius: 20px;
  padding: 18px;
  margin-top: 4px;
  display: grid;
  gap: 14px;
  animation: pop 0.25s var(--ease-out);
  border-color: rgba(245, 194, 43, 0.35);
}
.inv-top {
  display: flex;
  align-items: center;
  gap: 14px;
}
.inv-top strong {
  display: block;
  font-family: var(--display);
  font-weight: 400;
  font-size: 24px;
  letter-spacing: 0.01em;
  line-height: 1.05;
}
.inv-sub {
  display: block;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  margin-top: 3px;
}
.inv-pulse {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  position: relative;
  background: radial-gradient(circle at 35% 30%, var(--gold-hi), var(--gold) 55%, var(--gold-mid));
  box-shadow: 0 3px 0 var(--gold-deep);
}
.inv-pulse::before,
.inv-pulse::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--gold);
  animation: inv-ping 1.8s var(--ease-out) infinite;
}
.inv-pulse::after {
  animation-delay: 0.9s;
}
@keyframes inv-ping {
  from {
    transform: scale(1);
    opacity: 0.9;
  }
  to {
    transform: scale(2.1);
    opacity: 0;
  }
}
.inv-link {
  display: flex;
  gap: 8px;
}
.inv-link input {
  flex: 1;
  min-width: 0;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--gold-hi);
  background: rgba(0, 0, 0, 0.35);
  border: 1.5px dashed rgba(245, 194, 43, 0.45);
  border-radius: 12px;
  padding: 0 12px;
  height: 48px;
}
.inv-link .btn {
  flex: none;
  min-width: 108px;
}
.inv-share {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.inv-share .btn {
  flex: 1;
  text-align: center;
  text-decoration: none;
  font-size: 14px;
  padding: 11px 14px;
}
.inv-share .btn[hidden] {
  display: none;
}
.inv-wa {
  color: #7ff0a8;
}
.inv-cancel {
  flex: 0 0 auto !important;
}
.inv-state {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--paper);
  display: flex;
  align-items: center;
  gap: 8px;
}
.inv-state::before {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gold);
  animation: blink 1.2s ease-in-out infinite;
}
@keyframes blink {
  50% {
    opacity: 0.2;
  }
}

/* tela do convite (logado) */
.invite-page {
  min-height: calc(100svh - 80px);
  display: grid;
  place-items: center;
  padding: 24px 16px 60px;
}
.invite-card {
  width: min(460px, 100%);
  border-radius: 28px;
  padding: 34px 26px 26px;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 10px;
  animation: rise 0.5s var(--ease-out) both;
  border-color: rgba(245, 194, 43, 0.3);
  overflow: hidden;
}
.invite-card::after {
  content: 'X1';
  position: absolute;
  right: -14px;
  bottom: -46px;
  font-family: var(--display);
  font-size: 190px;
  line-height: 1;
  color: rgba(245, 194, 43, 0.06);
  pointer-events: none;
  transform: rotate(-8deg);
}
.ic-avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: 44px;
  color: var(--ink);
  background: radial-gradient(circle at 35% 30%, var(--gold-hi), var(--gold) 55%, var(--gold-mid));
  box-shadow:
    0 5px 0 var(--gold-deep),
    0 0 0 6px rgba(245, 194, 43, 0.12);
}
.ic-avatar:empty {
  visibility: hidden;
}
.ic-from {
  margin: 6px 0 0;
  font-weight: 800;
  font-size: 17px;
  color: var(--muted);
}
.ic-game {
  margin: 0;
  font-family: var(--tag);
  font-weight: 400;
  font-size: clamp(42px, 11vw, 64px);
  line-height: 1;
  color: var(--paper);
  text-shadow:
    0.04em 0.04em 0 var(--p1),
    0.08em 0.08em 0 rgba(0, 0, 0, 0.6);
  transform: rotate(-3deg);
}
.ic-mode {
  font-family: var(--display);
  font-size: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #241600;
  padding: 6px 14px 4px;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 60%, var(--gold-mid));
  clip-path: polygon(0 8%, 100% 0, 97% 100%, 3% 92%);
}
.ic-mode:empty {
  display: none;
}
.ic-mode.casual {
  color: var(--paper);
  background: rgba(255, 255, 255, 0.1);
}
.ic-stake {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.ic-stake[hidden] {
  display: none;
}
.ic-stake small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ic-stake strong {
  font-size: 24px;
  font-weight: 800;
}
.ic-stake .arrow {
  color: var(--gold);
  font-size: 20px;
}
.ic-stake .fine {
  flex-basis: 100%;
  margin: 4px 0 0;
}
.ic-state {
  margin: 6px 0 4px;
  color: var(--paper);
  font-weight: 600;
  min-height: 1.4em;
  max-width: 34ch;
}
.ic-actions {
  display: grid;
  gap: 10px;
  width: 100%;
  margin-top: 6px;
}
.ic-actions[hidden] {
  display: none;
}
.ic-actions .btn {
  width: 100%;
  text-align: center;
  text-decoration: none;
}
.ic-actions .btn[hidden] {
  display: none;
}
.ic-dots {
  display: inline-flex;
  gap: 4px;
  vertical-align: middle;
}
.ic-dots i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  animation: dots 1s ease-in-out infinite;
}
.ic-dots i:nth-child(2) {
  animation-delay: 0.15s;
}
.ic-dots i:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes dots {
  50% {
    transform: translateY(-5px);
    opacity: 0.5;
  }
}

/* login pelo convite */
.login-side {
  display: grid;
  gap: 14px;
  align-content: center;
}
.invite-ticket {
  border-radius: 20px;
  padding: 16px 18px;
  display: grid;
  gap: 4px;
  border-color: rgba(245, 194, 43, 0.4);
  animation: rise 0.6s var(--ease-out) both;
  overflow: hidden;
}
.invite-ticket[hidden],
.auth-tabs[hidden],
.login-side .login-card[hidden] {
  display: none;
}
.invite-ticket::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(-45deg, rgba(245, 194, 43, 0.05) 0 10px, transparent 10px 20px);
  pointer-events: none;
}
.it-from {
  font-weight: 800;
  color: var(--muted);
  font-size: 14px;
}
.it-game {
  font-family: var(--tag);
  font-weight: 400;
  font-size: 38px;
  line-height: 1.05;
  color: var(--paper);
  text-shadow: 0.04em 0.04em 0 var(--p1);
}
.it-mode {
  font-family: var(--display);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  font-size: 15px;
}
.it-hint {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--paper);
  font-weight: 600;
}
.auth-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 5px;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--line);
}
.auth-tabs button {
  border: 0;
  border-radius: 10px;
  padding: 11px 8px;
  font-weight: 800;
  font-size: 14px;
  color: var(--muted);
  background: transparent;
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
}
.auth-tabs button.on {
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  color: var(--ink);
}

/* amigos: gaveta do menu do perfil (e as linhas de amigo do painel "Chamar amigo") */
.fr-body {
  display: grid;
  gap: 14px;
  padding-bottom: 8px;
}
.fr-me {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1.5px dashed rgba(245, 194, 43, 0.45);
  background: rgba(245, 194, 43, 0.06);
  color: var(--paper);
  font: inherit;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.fr-me:hover {
  border-color: var(--gold);
  background: rgba(245, 194, 43, 0.1);
}
.fr-me span {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.fr-me b {
  font-family: var(--mono);
  font-size: 16px;
  color: var(--gold-hi);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.fr-me small {
  margin-left: auto;
  font-size: 12px;
  font-weight: 800;
  color: var(--gold);
}
.fr-me.done {
  justify-content: center;
  font-weight: 800;
  color: var(--gold-hi);
  border-style: solid;
}
.fr-add {
  display: flex;
  gap: 8px;
}
.fr-add input {
  flex: 1;
  min-width: 0;
  height: 48px;
  border-radius: 12px;
  padding: 0 14px;
  font-size: 16px;
}
.fr-add .btn {
  flex: none;
  padding: 10px 16px;
  font-size: 15px;
}
.fr-sub {
  margin: 4px 0 -4px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gold);
}
.fr-requests {
  display: grid;
  gap: 8px;
}
.fr-requests[hidden],
.fr-sub[hidden] {
  display: none;
}
.fr-req,
.fr-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line);
}
.fr-req {
  border-color: rgba(245, 194, 43, 0.4);
  background: rgba(245, 194, 43, 0.07);
  flex-wrap: wrap;
}
.fr-req .fr-name {
  flex: 1 1 140px;
}
.fr-req-btns {
  display: flex;
  gap: 8px;
  margin-left: auto;
}
.fr-out {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
.fr-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.fr-list:empty {
  display: none;
}
.fr-av {
  position: relative;
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: 21px;
  color: var(--paper);
  background: linear-gradient(160deg, #4a3f36, #2a241f);
  box-shadow: inset 0 0 0 2px var(--line-2);
}
.fr-dot {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #5d554d;
  box-shadow: 0 0 0 3px #1d1916;
}
.fr-item.on .fr-dot {
  background: #3ddc84;
}
.fr-item.busy .fr-dot {
  background: var(--gold);
}
.fr-item.on .fr-av {
  box-shadow: inset 0 0 0 2px rgba(61, 220, 132, 0.6);
}
.fr-item:not(.on):not(.busy) {
  opacity: 0.72;
}
.fr-name {
  flex: 1;
  min-width: 0;
  display: grid;
}
.fr-name b {
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fr-name small {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fr-item.on .fr-name small {
  color: #7ff0a8;
}
.fr-item.busy .fr-name small {
  color: var(--gold);
}
.fr-call {
  flex: none;
}
.fr-x {
  flex: none;
  min-width: 34px;
  height: 34px;
  padding: 0 8px;
  border-radius: 10px;
  border: 0;
  background: transparent;
  color: var(--dim);
  font-size: 22px;
  font-weight: 800;
  cursor: pointer;
  transition:
    color 0.15s,
    background 0.15s;
}
.fr-x:hover {
  color: var(--bad);
  background: rgba(255, 93, 93, 0.08);
}
.fr-x.armed {
  font-size: 13px;
  color: #fff;
  background: var(--bad);
}
.fr-item.leaving {
  border-color: rgba(255, 93, 93, 0.5);
}
.fr-empty {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.5;
}
.fr-empty[hidden] {
  display: none;
}
/* selo de pedidos de amizade: no chip do perfil e no item do menu */
.user-chip {
  position: relative;
}
.chip-badge,
.menu-badge {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 900;
  color: #fff;
  background: var(--p1);
  box-shadow: 0 0 0 2px var(--ink);
}
.chip-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  animation: pop 0.3s var(--ease-back);
}
.menu-badge {
  margin-left: 6px;
  box-shadow: none;
  vertical-align: 1px;
}
/* chip "Sua sala" na barra (volta para a sala de espera) */
.room-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 99px;
  font-weight: 800;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  box-shadow: 0 3px 0 var(--gold-deep);
  white-space: nowrap;
  animation: pop 0.3s var(--ease-back);
}
.room-chip:hover {
  filter: brightness(1.06);
}
.rc-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--p1);
  animation: blink 1.2s ease-in-out infinite;
}

/* chip de escolha (jogo ao criar sala) */
.chip {
  border: 1.5px solid var(--line-2);
  background: rgba(255, 255, 255, 0.03);
  color: var(--paper);
  border-radius: 99px;
  padding: 9px 14px;
  font: inherit;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  transition:
    border-color 0.15s,
    background 0.15s,
    color 0.15s;
}
.chip:hover {
  border-color: rgba(245, 194, 43, 0.5);
}
.chip.on {
  border-color: var(--gold);
  background: rgba(245, 194, 43, 0.14);
  color: var(--gold-hi);
}
.chip.gold {
  color: var(--gold);
}

/* desafio direto recebido: cartão que sobe de baixo */
.challenge {
  position: fixed;
  z-index: 65;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom));
  width: min(560px, calc(100vw - 24px));
  transform: translateX(-50%);
  border-radius: 22px;
  padding: 14px 16px 18px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  border-color: rgba(245, 194, 43, 0.55);
  box-shadow:
    0 0 0 1px rgba(245, 194, 43, 0.2),
    0 30px 60px -16px rgba(0, 0, 0, 0.9),
    0 0 50px -10px rgba(245, 194, 43, 0.35);
  overflow: hidden;
}
.challenge[hidden] {
  display: none;
}
.challenge.in {
  animation: ch-in 0.45s var(--ease-back) both;
}
@keyframes ch-in {
  from {
    transform: translateX(-50%) translateY(140%);
  }
  to {
    transform: translateX(-50%);
  }
}
.ch-avatar {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: 26px;
  color: var(--ink);
  background: radial-gradient(circle at 35% 30%, var(--gold-hi), var(--gold) 55%, var(--gold-mid));
  box-shadow: 0 3px 0 var(--gold-deep);
}
.ch-text {
  display: grid;
  min-width: 0;
}
.ch-text strong {
  font-size: 17px;
}
.ch-text span {
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}
.ch-actions {
  display: flex;
  gap: 8px;
}
.ch-actions .btn {
  padding: 11px 16px;
  font-size: 14px;
}
.ch-timer {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 4px;
  width: 100%;
  background: linear-gradient(90deg, var(--gold-mid), var(--gold-hi));
  transform-origin: left;
}
.challenge.in .ch-timer {
  animation: ch-timer 60s linear forwards;
}
@keyframes ch-timer {
  to {
    transform: scaleX(0);
  }
}

@media (max-width: 640px) {
  .inv-link .btn {
    min-width: 92px;
  }
  .challenge {
    grid-template-columns: auto 1fr;
  }
  .ch-actions {
    grid-column: 1 / -1;
  }
  .ch-actions .btn {
    flex: 1;
  }
  .fr-req-btns {
    flex-basis: 100%;
  }
  .fr-req-btns .btn {
    flex: 1;
  }
}

/* =========================================================
   PET DO JOGO (imagem de corpo inteiro viva, desenhada em canvas por js/mascote.js)
   ========================================================= */
.pet {
  position: relative;
  width: var(--pet-size);
  height: var(--pet-size);
  pointer-events: none;
}
.pet-canvas {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.45));
}
.pet-bubble {
  position: absolute;
  left: 62%;
  top: 4%;
  width: max-content;
  max-width: 220px;
  padding: 10px 14px;
  border-radius: 16px 16px 16px 4px;
  background: var(--paper);
  color: var(--ink);
  font-weight: 800;
  font-size: 14px;
  line-height: 1.25;
  overflow-wrap: break-word; /* dica do painel com palavra comprida quebra dentro do balão */
  box-shadow:
    0 5px 0 rgba(0, 0, 0, 0.45),
    0 16px 30px -12px rgba(0, 0, 0, 0.6);
}
.pet-bubble.in {
  animation: petBubble 0.35s var(--ease-back) both;
}
@keyframes petBubble {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.85);
    transform-origin: left bottom;
  }
}
/* página do jogo: GRANDE, em pé no espaço livre embaixo do cartão do jogo, puxado para a esquerda (para a margem da
   página), sem nunca sair da tela; a dica fica ao lado da cabeça */
.pet-lobby {
  position: absolute;
  top: calc(100% + 28px);
  left: max(-246px, calc(-1 * ((100vw - 1160px) / 2 + 40px) - 91px));
  z-index: 5;
  pointer-events: none;
}
.pet-lobby .pet-bubble {
  left: 66%;
  top: 6%;
  font-size: 15px;
  max-width: 240px;
}
.pet-lobby:empty {
  display: none;
}
/* partida: no canto da tela, fora do tabuleiro (só em tela larga) */
.pet-match {
  position: fixed;
  left: 14px;
  bottom: 6px;
  z-index: 30;
  pointer-events: none;
}
.pet-match:empty {
  display: none;
}
/* fim da partida: em cima do cartão do resultado */
.pet-result {
  display: flex;
  justify-content: center;
  margin: -152px auto -4px;
}
.pet-result:empty {
  display: none;
}
/* pôster da página inicial: o pet PRESO na borda de cima do cartão (mãos na beirada). Ele não balança sozinho:
   quem balança de leve é o cartão inteiro, levando ele junto. A imagem "espiando" tem a linha das mãos a 70% da altura */
.poster.has-pet {
  overflow: visible;
  animation:
    posterIn 0.55s var(--ease-out) both,
    cardSway 5s 1s ease-in-out infinite;
  transform-origin: 50% 100%;
}
.poster.has-pet .poster-art {
  overflow: hidden;
  border-radius: inherit;
}
.poster-pet {
  position: absolute;
  top: 0;
  left: 50%;
  width: 74%;
  z-index: 5;
  pointer-events: none;
  transform: translate(-50%, -70%);
  transition: transform 0.25s var(--ease-back);
}
.poster-pet img {
  display: block;
  width: 100%;
  height: auto;
}
/* expressões: piscando (sozinho, de vez em quando) e feliz (mouse em cima / dedo no pôster); trocam no lugar, sem fade */
.poster-pet .pp-blink,
.poster-pet .pp-happy {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.poster-pet.blink .pp-blink {
  opacity: 1;
}
.poster-pet.blink .pp-base {
  opacity: 0;
}
.poster.has-pet:is(:hover, :focus-visible, :active) .poster-pet:has(.pp-happy) :is(.pp-base, .pp-blink) {
  opacity: 0;
}
.poster.has-pet:is(:hover, :focus-visible, :active) .poster-pet .pp-happy {
  opacity: 1;
}
.poster.has-pet:is(:hover, :focus-visible) .poster-pet {
  transform: translate(-50%, -72%) scale(1.04);
}
/* cada pet fica por cima do seu cartão: espaço entre as fileiras para a cabeça dele (e antes da 1ª, se ele estiver nela) */
.catalog:has(.poster-pet) {
  row-gap: clamp(160px, 16vw, 195px);
}
.catalog:has(> .poster:nth-child(-n + 3) .poster-pet) {
  padding-top: clamp(140px, 14vw, 180px);
}
@keyframes cardSway {
  0%,
  100% {
    rotate: 0deg;
  }
  30% {
    rotate: 0.9deg;
  }
  70% {
    rotate: -0.6deg;
  }
}
@media (max-width: 860px) {
  /* colunas empilhadas: pequeno no canto do cartão, para não cair em cima do título */
  .pet-lobby {
    top: auto;
    left: -10px;
    bottom: -26px;
    /* a caixa vai até a borda direita do cartão (sem pegar toque) para a dica medir o espaço (cqw): em tela de 320 px
       a dica comprida passava 26 px da tela e a página rolava para o lado */
    right: 0;
    container-type: inline-size;
  }
  .pet-lobby .pet-bubble {
    max-width: min(240px, calc(100cqw - 66% - 4px)); /* 66% = onde ela começa, na largura do pet */
  }
}
@media (max-width: 640px) {
  .pet-bubble {
    font-size: 12px;
    max-width: 150px;
    padding: 8px 11px;
  }
  .pet-result {
    margin-top: -96px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .poster.has-pet {
    animation: posterIn 0.55s var(--ease-out) both;
  }
}

/* celular: DUAS capas por fileira, em pé (4:5) como no PC, tudo dentro do cartão em escala menor */
@media (max-width: 640px) {
  .catalog {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 12px;
  }
  .poster {
    aspect-ratio: 4 / 5;
  }
  .poster::before {
    inset: 6px;
  }
  .poster-no {
    top: 8px;
    left: 10px;
    font-size: 26px;
    -webkit-text-stroke-width: 1px;
  }
  .poster-stamp {
    top: 10px;
    right: 8px;
    padding: 4px 6px 3px;
    font-size: 11px;
  }
  .poster-body {
    left: 10px;
    right: 10px;
    bottom: 10px;
    gap: 4px;
  }
  .poster-title {
    font-size: clamp(22px, 7.4vw, 30px);
  }
  .poster-tag {
    display: none;
  }
  .poster-meta {
    font-size: 9px;
    letter-spacing: 0.06em;
    gap: 0 6px;
  }
  .poster-meta span + span::before {
    margin-right: 6px;
  }
  .tape {
    font-size: 12px;
    padding: 6px 0 4px;
  }
  /* pet do pôster proporcional ao cartão menor: espaço só para a cabeça dele */
  .catalog:has(.poster-pet) {
    row-gap: 100px;
  }
  .catalog:has(> .poster:nth-child(n + 3) .poster-pet) {
    padding-top: 0;
  }
  .catalog:has(> .poster:nth-child(-n + 2) .poster-pet) {
    padding-top: 96px;
  }
}

/* =========================================================
   COR DO TÍTULO DE CADA JOGO (degradê + brilho externo; a letra de pichação fica igual)
   ========================================================= */
[data-game='ligue-4'] {
  --t1: #ff6b6b;
  --t2: #ff2d3f;
  --t3: #ff9a3c;
  --tglow: rgba(255, 60, 70, 0.55);
}
[data-game='gude'] {
  --t1: #8ff8ff;
  --t2: #2fd0ff;
  --t3: #3a6dff;
  --tglow: rgba(60, 190, 255, 0.55);
}
[data-game='latinha'] {
  --t1: #fff1a0;
  --t2: #ffc21f;
  --t3: #ff6a13;
  --tglow: rgba(255, 150, 30, 0.6);
}
[data-game='velha'] {
  --t1: #ffb3ef;
  --t2: #ff4fd8;
  --t3: #a63cff;
  --tglow: rgba(255, 70, 220, 0.6);
}
[data-game='dama'] {
  --t1: #ffe2b0;
  --t2: #e8a24a;
  --t3: #a8641c;
  --tglow: rgba(232, 160, 70, 0.5);
}
[data-game='xadrez'] {
  --t1: #ffffff;
  --t2: #d9deff;
  --t3: #8f9bff;
  --tglow: rgba(140, 155, 255, 0.6);
}
[data-game='domino'] {
  --t1: #d4ffb0;
  --t2: #5df07a;
  --t3: #12a85a;
  --tglow: rgba(70, 230, 120, 0.5);
}
[data-game='cartas'] {
  --t1: #ff4d6d;
  --t2: #ffd23f;
  --t3: #3d8bff;
  --tglow: rgba(255, 210, 63, 0.5);
}
[data-game='bola8'] {
  --t1: #f2fffc;
  --t2: #4dedcf;
  --t3: #0a9a8c;
  --tglow: rgba(60, 230, 200, 0.5);
}
:is(.poster-title, .game-title, .vs-game, .ic-game, .it-game)[data-game] {
  background: linear-gradient(170deg, var(--t1) 0%, var(--t2) 48%, var(--t3) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  /* contorno escuro de adesivo + brilho na cor do jogo */
  filter: drop-shadow(0.035em 0.035em 0 rgba(10, 6, 2, 0.95)) drop-shadow(0 0 0.28em var(--tglow));
  padding-right: 0.08em; /* o degradê não corta a última letra inclinada */
}
/* cartas: degradê das quatro cores do baralho, na horizontal */
:is(.poster-title, .game-title, .vs-game, .ic-game, .it-game)[data-game='cartas'] {
  background-image: linear-gradient(100deg, #ff4d6d 0%, #ffd23f 35%, #3ddc84 65%, #3d8bff 100%);
}

/* logo X1zada (imagem): topo, login e admin */
.wordmark .logo {
  display: block;
  height: auto;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.55));
}
.wordmark.small .logo {
  width: auto;
  height: 38px;
}
.wordmark.big .logo {
  width: min(560px, 82vw);
}
.wordmark.small:hover .logo {
  transform: rotate(-2deg) scale(1.04);
  transition: transform 0.2s var(--ease-back);
}

/* =========================================================
   CELULAR DEITADO (paisagem com pouca altura): nada de tabuleiro minúsculo no meio da tela.
   Sem a barra do site durante a partida; os jogadores vão para as laterais e o tabuleiro usa a altura toda.
   Vale também quando a pessoa gira o celular no meio da partida (é só CSS: muda na hora).
   ========================================================= */
@media (orientation: landscape) and (max-height: 560px) {
  body:has(#screen-match:not([hidden])) .bar {
    display: none;
  }
  .match {
    --side: clamp(130px, 21vw, 230px);
    --stage-ar: 8 / 9.4;
    min-height: 100svh;
    padding: 6px max(8px, env(safe-area-inset-right)) 6px max(8px, env(safe-area-inset-left));
    display: grid;
    grid-template-columns: var(--side) auto var(--side);
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas: '. stage .' 'pc1 stage pc2' 'mid stage act' '. stage .';
    justify-content: center;
    align-items: center;
    column-gap: 12px;
    row-gap: 10px;
  }
  /* tabuleiro: o maior que couber na altura, na proporção do jogo */
  body .match:has(.stage[data-game]) {
    --board-w: min(calc(100vw - 2 * var(--side) - 44px), calc((100svh - 12px) * var(--stage-ar)));
  }
  body .match:has(.stage[data-game]) .duel {
    display: contents;
  }
  .match #pc1 {
    grid-area: pc1;
  }
  .match #pc2 {
    grid-area: pc2;
  }
  .match .vs-mid {
    grid-area: mid;
    min-width: 0;
  }
  .match .match-stage {
    grid-area: stage;
  }
  .match .match-actions {
    grid-area: act;
    margin: 0;
    justify-self: center;
  }
  .match .pcard.active {
    transform: none;
  }
  /* jogos de tela larga: uma coluna só, à esquerda, com tudo empilhado; o resto da largura é do jogo */
  .match:is(:has(.stage[data-game='latinha']), :has(.stage[data-game='domino'])) {
    grid-template-columns: var(--side) auto;
    grid-template-rows: 1fr auto auto auto auto 1fr;
    grid-template-areas: '. stage' 'pc1 stage' 'mid stage' 'pc2 stage' 'act stage' '. stage';
  }
  body .match:is(:has(.stage[data-game='latinha']), :has(.stage[data-game='domino'])) {
    --board-w: min(calc(100vw - var(--side) - 32px), calc((100svh - 12px) * var(--stage-ar)));
  }
  .match:is(:has(.stage[data-game='latinha']), :has(.stage[data-game='domino'])) .pcard.right {
    flex-direction: row-reverse;
    justify-content: flex-end;
    text-align: left;
  }
  .match:has(.stage[data-game='latinha']) {
    --stage-ar: 16 / 9;
  }
  .match:has(.stage[data-game='domino']) {
    --stage-ar: 6 / 5;
  }
  /* cartas: mesa mais larga, para a mão caber numa fileira só (a tela da carta mede tudo pela largura e altura do palco) */
  .match:has(.stage[data-game='cartas']) {
    --stage-ar: 4 / 3;
  }
  .match .stage[data-game='cartas'] {
    aspect-ratio: 4 / 3;
  }
  /* xadrez: tabuleiro + as duas faixas (68 px) na altura; a lista de lances não cabe aqui (fica na auditoria) */
  body .match:has(.stage[data-game='xadrez']) {
    --board-w: min(calc(100vw - 2 * var(--side) - 44px), calc(100svh - 84px));
  }
  .match .stage[data-game='xadrez'] .xadrez-side {
    display: none;
  }
}

/* =========================================================
   PARTIDA NO COMPUTADOR (17/10/2026): o jogo usa a tela, em vez de uma caixa de 600 px no meio dela.
   Mesmo desenho do celular deitado: jogadores e "Desistir" nas laterais e o palco do tamanho da altura livre (abaixo
   da barra do topo, que continua: saldo e som), na proporção de cada jogo. A Bola 8 e o xadrez têm tamanho próprio
   (já usam a tela) e ficam de fora. A largura guarda 20 px de folga: se a página ganhar barra de rolagem vertical,
   nada passa para o lado.
   ========================================================= */
@media (min-width: 1024px) and (min-height: 561px) {
  body .match:where(:has(.stage[data-game]):not(:has(.stage[data-game='bola8'], .stage[data-game='xadrez']))) {
    --side: clamp(200px, 15vw, 300px);
    --stage-h: min(calc(100svh - var(--bar-h) - 40px), 1100px);
    /* 8 px a menos que a altura livre: com a altura exata a página rolava 3 px e ganhava barra de rolagem */
    min-height: calc(100svh - var(--bar-h) - 8px);
    padding: 16px 24px;
    display: grid;
    grid-template-columns: var(--side) auto var(--side);
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas: '. stage .' 'pc1 stage pc2' 'mid stage act' '. stage .';
    justify-content: center;
    align-items: center;
    column-gap: 32px;
    row-gap: 14px;
  }
  /* palco: o maior que couber na altura (body + :has vence o tamanho que cada jogo define para o celular) */
  body
    .match:where(:has(.stage[data-game]):not(:has(.stage[data-game='bola8'], .stage[data-game='xadrez']))):has(
      .stage[data-game]
    ) {
    --board-w: min(calc(100vw - 2 * var(--side) - 132px), calc(var(--stage-h) * var(--stage-ar, 8 / 9.4)));
  }
  body .match:where(:has(.stage[data-game]):not(:has(.stage[data-game='bola8'], .stage[data-game='xadrez']))) .duel {
    display: contents;
  }
  body .match:where(:has(.stage[data-game]):not(:has(.stage[data-game='bola8'], .stage[data-game='xadrez']))) #pc1 {
    grid-area: pc1;
  }
  body .match:where(:has(.stage[data-game]):not(:has(.stage[data-game='bola8'], .stage[data-game='xadrez']))) #pc2 {
    grid-area: pc2;
  }
  body .match:where(:has(.stage[data-game]):not(:has(.stage[data-game='bola8'], .stage[data-game='xadrez']))) .vs-mid {
    grid-area: mid;
    min-width: 0;
  }
  body
    .match:where(:has(.stage[data-game]):not(:has(.stage[data-game='bola8'], .stage[data-game='xadrez'])))
    .match-stage {
    grid-area: stage;
  }
  body
    .match:where(:has(.stage[data-game]):not(:has(.stage[data-game='bola8'], .stage[data-game='xadrez'])))
    .match-actions {
    grid-area: act;
    margin: 0;
    justify-self: center;
  }
  body
    .match:where(:has(.stage[data-game]):not(:has(.stage[data-game='bola8'], .stage[data-game='xadrez'])))
    .pcard.active {
    transform: none;
  }
  /* jogos de tela larga: uma coluna só, à esquerda, com tudo empilhado; o resto da largura é do jogo */
  body .match:is(:has(.stage[data-game='latinha']), :has(.stage[data-game='domino'])) {
    grid-template-columns: var(--side) auto;
    grid-template-rows: 1fr auto auto auto auto 1fr;
    grid-template-areas: '. stage' 'pc1 stage' 'mid stage' 'pc2 stage' 'act stage' '. stage';
    --board-w: min(calc(100vw - var(--side) - 100px), calc(var(--stage-h) * var(--stage-ar)));
  }
  body .match:is(:has(.stage[data-game='latinha']), :has(.stage[data-game='domino'])) .pcard.right {
    flex-direction: row-reverse;
    justify-content: flex-end;
    text-align: left;
  }
  .match:has(.stage[data-game='latinha']) {
    --stage-ar: 16 / 9;
  }
  .match:has(.stage[data-game='domino']) {
    --stage-ar: 6 / 5;
  }
  /* cartas: a mesa ocupa o espaço livre todo, de 8:9,4 (tela estreita) até 4:3 (tela larga, a mão cabe numa fileira
     só). A tela da carta mede tudo pelo tamanho do palco, então serve qualquer proporção nesse intervalo */
  .match:has(.stage[data-game='cartas']) {
    --stage-ar: 4 / 3;
  }
  body .match .stage[data-game='cartas'] {
    aspect-ratio: auto;
    height: min(var(--stage-h), calc(var(--board-w) * 9.4 / 8));
  }

  /* 3 ou 4 jogadores: os cartões empilham na coluna da esquerda e o jogo usa o resto */
  body .match.multi:has(.stage[data-game]) {
    grid-template-columns: var(--side) auto;
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas: '. stage' 'duel stage' 'act stage' '. stage';
    --board-w: min(calc(100vw - var(--side) - 100px), calc(var(--stage-h) * var(--stage-ar, 8 / 9.4)));
  }
  body .match.multi:has(.stage[data-game]) .duel.multi {
    grid-area: duel;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    width: 100%;
  }
  body .match.multi .duel.multi .pcard,
  body .match.multi .duel.multi .pcard.right {
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    padding: 6px 10px;
    gap: 10px;
  }
  body .match.multi .duel.multi .pinfo {
    align-items: flex-start;
  }
  body .match.multi .duel.multi .pcard .pscore {
    margin-left: auto;
  }
  body .match.multi .duel.multi #pc1 {
    order: 1;
  }
  body .match.multi .duel.multi #pc3 {
    order: 2;
  }
  body .match.multi .duel.multi #pc2 {
    order: 4;
  }
  body .match.multi .duel.multi #pc4 {
    order: 5;
  }
  body .match.multi .duel.multi:not(.teams) #pc2 {
    order: 2;
  }
  body .match.multi .duel.multi:not(.teams) #pc3 {
    order: 3;
  }
  body .match.multi .duel.multi.teams::before {
    order: 3;
    font-size: 18px;
    line-height: 1;
    text-align: center;
  }
  body .match.multi .duel.multi .vs-mid {
    order: 9;
    margin-top: 6px;
  }
}

/* =========================================================
   SALAS (08/10/2026): página do jogo com "Jogar agora", lista de salas e "Chamar amigo";
   criar sala; sala de espera; partida com 3 ou 4.
   ========================================================= */
/* título de seção: letra de cartaz com um losango dourado na frente */
.sec-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 26px 0 12px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 26px;
  line-height: 1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--paper);
}
.sec-title::before {
  content: '';
  flex: none;
  width: 10px;
  height: 10px;
  background: var(--gold);
  transform: rotate(45deg);
  box-shadow: 0 0 12px rgba(245, 194, 43, 0.55);
}
.game-info > .sec-title:first-of-type {
  margin-top: 4px;
}

/* coluna da esquerda: cartão do jogo e, embaixo, o painel "Chamar amigo" com o pet espiando por cima */
/* (sem animação de transform na coluna: ela viraria a referência do "position: fixed" da gaveta no celular) */
.game-left {
  display: grid;
  gap: 0;
  min-width: 0;
}
.cp-wrap {
  position: relative;
  margin-top: 18px;
  animation: rise 0.6s 0.12s var(--ease-out) both;
}
.cp-pet {
  position: relative;
  z-index: 0;
  height: 196px;
  padding-left: 6px;
  pointer-events: none;
  /* o balão da dica mede a largura da coluna (cqw) para não passar dela */
  container-type: inline-size;
}
.cp-pet:empty {
  display: none;
}
.cp-pet .pet-bubble {
  left: 64%;
  top: 8%;
  font-size: 15px;
  max-width: 230px;
  /* coluna estreita (tela de ~860 a ~1280 px): o balão usa só o que sobra à direita da cabeça e quebra mais linhas, em
     vez de entrar por baixo dos cartões da outra coluna. 100cqw = largura da coluna; 64% = onde ele começa, no pet */
  max-width: min(230px, calc(100cqw - 64% - 4px));
}
.call-panel {
  position: relative;
  z-index: 1;
  border-radius: 24px;
  padding: 18px;
  display: grid;
  gap: 12px;
  background: linear-gradient(170deg, rgba(44, 38, 33, 0.97) 0%, rgba(22, 19, 17, 0.98) 100%);
}
.cp-pet:not(:empty) + .call-panel {
  margin-top: -6px;
}
.cp-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cp-head .sec-title {
  margin: 0;
  font-size: 24px;
}
.cp-x {
  display: none;
}
.cp-sub {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 14px;
  font-weight: 600;
}
.cp-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.cp-list:empty {
  display: none;
}
.cp-list .fr-item {
  padding: 8px 10px;
}
.cp-list .fr-av {
  width: 38px;
  height: 38px;
  font-size: 19px;
}
.cp-call {
  flex: none;
  min-width: 92px;
}
.cp-empty {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}
.cp-empty[hidden] {
  display: none;
}
.cp-more {
  justify-self: start;
  background: none;
  border: 0;
  padding: 4px 0;
  font: inherit;
  font-weight: 800;
  font-size: 14px;
  color: var(--gold);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(245, 194, 43, 0.4);
}
.cp-more:hover {
  color: var(--gold-hi);
}
.cp-open {
  display: none;
  margin-top: 14px;
}
.cp-count {
  display: inline-grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  margin-left: 8px;
  padding: 0 6px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 900;
  color: var(--ink);
  background: #3ddc84;
  vertical-align: 1px;
  position: relative;
  z-index: 1;
}
.flash {
  animation: cpflash 0.9s var(--ease-out);
}
@keyframes cpflash {
  30% {
    box-shadow:
      0 0 0 3px var(--gold),
      0 0 40px rgba(245, 194, 43, 0.6);
  }
}

/* ---------- lista de salas ---------- */
.rooms {
  margin-top: 8px;
}
.sec-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 26px 0 12px;
}
.sec-head .sec-title {
  margin: 0;
}
.live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #ff8a96;
}
.live i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--p1);
  box-shadow: 0 0 10px var(--p1);
  animation: blink 1.4s ease-in-out infinite;
}
.rooms-create {
  margin-left: auto;
}
.room-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.room-list:empty {
  display: none;
}
.room-list.loading:empty {
  display: block;
  height: 66px;
  border-radius: 18px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03)) 0
    0 / 200% 100%;
  animation: shimmer 1.2s linear infinite;
}
@keyframes shimmer {
  to {
    background-position: -200% 0;
  }
}
.room-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto;
  grid-template-areas: 'av main seats mode go';
  align-items: center;
  gap: 6px 14px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: linear-gradient(170deg, rgba(44, 38, 33, 0.82), rgba(22, 19, 17, 0.9));
  box-shadow:
    inset 0 1px 0 rgba(255, 245, 230, 0.06),
    0 14px 30px -18px rgba(0, 0, 0, 0.8);
  animation: rise 0.35s var(--ease-out) both;
}
.room-row:hover {
  border-color: rgba(245, 194, 43, 0.35);
}
.room-row.stake {
  border-color: rgba(245, 194, 43, 0.35);
  background:
    radial-gradient(ellipse at 100% 0%, rgba(242, 193, 78, 0.14), transparent 60%),
    linear-gradient(170deg, rgba(48, 38, 24, 0.9), rgba(22, 18, 13, 0.94));
}
.room-row.mine {
  box-shadow:
    inset 0 0 0 1.5px var(--gold),
    0 14px 30px -18px rgba(0, 0, 0, 0.8);
}
.room-row.full {
  opacity: 0.6;
}
.rr-av {
  grid-area: av;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: 21px;
  color: var(--ink);
  background: radial-gradient(circle at 35% 30%, var(--gold-hi), var(--gold) 55%, var(--gold-mid));
  box-shadow: 0 3px 0 var(--gold-deep);
}
.rr-main {
  grid-area: main;
  display: grid;
  min-width: 0;
}
.rr-main b {
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rr-main small {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rr-meta {
  display: contents;
}
.rr-seats {
  grid-area: seats;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.rr-seats em {
  font-style: normal;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 14px;
  color: var(--paper);
}
.rr-dots {
  display: inline-flex;
  gap: 4px;
}
.rr-dots i {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 2px solid rgba(245, 194, 43, 0.55);
}
.rr-dots i.on {
  background: var(--gold);
  border-color: var(--gold);
  box-shadow: 0 0 8px rgba(245, 194, 43, 0.5);
}
.rr-dots.teams i:nth-child(2) {
  margin-right: 6px;
}
.rr-mode {
  grid-area: mode;
  display: grid;
  justify-items: end;
  text-align: right;
  line-height: 1.15;
  min-width: 84px;
}
.rr-mode b {
  font-size: 15px;
  font-weight: 800;
}
.rr-mode.casual b {
  color: var(--muted);
  font-size: 14px;
}
.rr-mode.stake b {
  color: var(--gold-hi);
  font-size: 17px;
}
.rr-mode small {
  font-size: 11px;
  font-weight: 800;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.rr-go {
  grid-area: go;
  min-width: 96px;
}
.rr-go.armed {
  animation: armed 0.9s ease-in-out infinite;
}
/* nenhuma sala: cartaz pontilhado convidando a criar */
.room-empty {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 6px;
  text-align: center;
  padding: 26px 18px 22px;
  border-radius: 22px;
  border: 2px dashed rgba(245, 194, 43, 0.35);
  background:
    repeating-linear-gradient(-45deg, rgba(245, 194, 43, 0.035) 0 12px, transparent 12px 24px), rgba(0, 0, 0, 0.18);
  overflow: hidden;
}
.room-empty strong {
  font-family: var(--tag);
  font-weight: 400;
  font-size: clamp(28px, 3.4vw, 38px);
  line-height: 1;
  color: #fff6e0;
  text-shadow:
    0.04em 0.04em 0 var(--p1),
    0.08em 0.08em 0 rgba(0, 0, 0, 0.6);
  transform: rotate(-3deg);
  margin-top: 4px;
}
.room-empty > span:not(.re-icon) {
  color: var(--muted);
  font-weight: 700;
  font-size: 15px;
}
.room-empty .btn {
  margin-top: 8px;
}
.re-icon {
  position: relative;
  width: 64px;
  height: 44px;
}
.re-icon i {
  position: absolute;
  top: 4px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 3px dashed rgba(245, 194, 43, 0.6);
}
.re-icon i:first-child {
  left: 0;
}
.re-icon i:last-child {
  right: 0;
  border-style: solid;
  border-color: var(--gold);
  background: radial-gradient(circle at 35% 30%, var(--gold-hi), var(--gold) 55%, var(--gold-mid));
}
.re-icon i:last-child::after {
  content: '+';
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 900;
  font-size: 22px;
  color: var(--ink);
}

/* ---------- segmentado (escolhas de 2/3/4, modo, pública/privada) ---------- */
.seg {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 6px;
  padding: 5px;
  border-radius: 16px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid var(--line);
}
.seg button {
  display: grid;
  gap: 1px;
  justify-items: center;
  border: 0;
  border-radius: 11px;
  padding: 10px 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  font: inherit;
  transition:
    background 0.15s,
    color 0.15s,
    box-shadow 0.15s;
}
.seg button b {
  font-size: 16px;
  font-weight: 800;
}
.seg button small {
  font-size: 11px;
  font-weight: 700;
  opacity: 0.85;
}
.seg button:hover:not(:disabled) {
  color: var(--paper);
  background: rgba(255, 255, 255, 0.05);
}
.seg button.on {
  color: var(--ink);
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  box-shadow: 0 3px 0 var(--gold-deep);
}
.seg button.on small {
  opacity: 0.75;
}
.seg button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.seg.single {
  pointer-events: none;
}
.seg-sm {
  padding: 4px;
  border-radius: 12px;
}
.seg-sm button {
  padding: 6px 8px;
  border-radius: 9px;
}
.seg-sm button b {
  font-size: 13px;
}
.seg-sm button.on {
  box-shadow: 0 2px 0 var(--gold-deep);
}

/* ---------- criar sala ---------- */
.room-form {
  display: grid;
  gap: 14px;
  width: min(500px, 100%);
}
.stepper .st-btn:disabled {
  opacity: 0.35;
  cursor: default;
  transform: none;
  border-color: var(--line-2);
  color: var(--paper);
}
.room-form h3 {
  margin: 0;
  padding-right: 40px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 28px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.rf-row {
  display: grid;
  gap: 8px;
}
.rf-row[hidden] {
  display: none;
}
.rf-label {
  font-size: 12px;
  font-weight: 800;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.rf-hint {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
  line-height: 1.4;
}
.rf-hint:empty {
  display: none;
}
.rf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.rf-stake {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: 18px;
  border: 1px solid rgba(242, 193, 78, 0.4);
  background: radial-gradient(ellipse at 100% 0%, rgba(242, 193, 78, 0.16), transparent 55%), rgba(30, 24, 15, 0.7);
  animation: pop 0.2s var(--ease-out);
}
.stepper {
  display: grid;
  grid-template-columns: 52px auto minmax(0, 1fr) 52px;
  align-items: center;
  gap: 8px;
}
.stepper .st-btn {
  height: 52px;
  border-radius: 14px;
  border: 1.5px solid var(--line-2);
  background: rgba(255, 255, 255, 0.05);
  color: var(--paper);
  font-size: 26px;
  font-weight: 800;
  cursor: pointer;
  line-height: 1;
}
.stepper .st-btn:hover {
  border-color: var(--gold);
  color: var(--gold-hi);
}
.stepper .st-btn:active {
  transform: scale(0.94);
}
.st-cur {
  font-weight: 800;
  font-size: 22px;
  color: var(--gold);
}
.stepper input {
  height: 52px;
  font-size: 28px;
  font-weight: 800;
  text-align: center;
  font-variant-numeric: tabular-nums;
  color: var(--gold-hi);
  padding: 0 8px;
}
.stepper.bad input {
  border-color: var(--bad);
}
.rf-limits {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}
.rf-line strong {
  font-size: 22px;
}
.rf-stake .fine {
  margin: 0;
}

/* ---------- sala de espera ---------- */
.room-page {
  width: min(1160px, 100%);
  margin: 0 auto;
  padding: 18px clamp(16px, 4vw, 40px) 48px;
}
.room-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: clamp(18px, 3vw, 32px);
  align-items: start;
}
.room-grid > .room-side:empty {
  display: none;
}
.room-card {
  border-radius: 28px;
  padding: clamp(18px, 3vw, 30px);
  display: grid;
  gap: 18px;
  animation: rise 0.5s var(--ease-out) both;
  border-color: rgba(245, 194, 43, 0.28);
  overflow: hidden;
}
.room-card::after {
  content: 'SALA';
  position: absolute;
  right: -10px;
  bottom: -40px;
  font-family: var(--display);
  font-size: 170px;
  line-height: 1;
  color: rgba(245, 194, 43, 0.045);
  pointer-events: none;
  transform: rotate(-6deg);
}
.room-card > * {
  position: relative;
  z-index: 1;
}
.room-from {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 16px;
  background: rgba(245, 194, 43, 0.08);
  border: 1px solid rgba(245, 194, 43, 0.35);
}
.room-from[hidden] {
  display: none;
}
.room-from .ic-avatar {
  width: 46px;
  height: 46px;
  font-size: 24px;
  flex: none;
}
.room-from strong {
  font-size: 18px;
}
.room-head {
  display: grid;
  gap: 6px;
}
.room-head .eyebrow {
  margin: 0;
}
.room-game {
  margin: 0;
  font-family: var(--tag);
  font-weight: 400;
  font-size: clamp(44px, 6vw, 76px);
  line-height: 0.95;
  color: #fff6e0;
  transform: rotate(-2deg);
  transform-origin: 0 100%;
  text-shadow:
    0.03em 0.03em 0 #e3192f,
    0.07em 0.07em 0 rgba(0, 0, 0, 0.8);
}
.room-game:empty {
  display: none;
}
.room-game[data-game] {
  background: linear-gradient(170deg, var(--t1) 0%, var(--t2) 48%, var(--t3) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0.035em 0.035em 0 rgba(10, 6, 2, 0.95)) drop-shadow(0 0 0.28em var(--tglow));
  padding-right: 0.08em;
  justify-self: start;
}
.room-game[data-game='cartas'] {
  background-image: linear-gradient(100deg, #ff4d6d 0%, #ffd23f 35%, #3ddc84 65%, #3d8bff 100%);
}
.room-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}
.room-tags .ic-mode {
  font-size: 15px;
}
.room-code {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  padding: 4px 10px;
  border-radius: 99px;
  border: 1px solid var(--line-2);
}
.room-stake {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border-radius: 18px;
  border: 1px solid rgba(242, 193, 78, 0.4);
  background: radial-gradient(ellipse at 100% 0%, rgba(242, 193, 78, 0.16), transparent 55%), rgba(30, 24, 15, 0.6);
}
.room-stake[hidden] {
  display: none;
}
.room-stake small {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.room-stake strong {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
}
.room-stake strong.gold {
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 50%, var(--gold-mid));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.room-stake .arrow {
  color: var(--gold);
  font-size: 22px;
}
.room-stake .fine {
  flex-basis: 100%;
}
/* lugares */
.seats {
  display: grid;
  gap: 14px;
  align-items: stretch;
}
.seats.n2 {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
}
.seats.n3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.seats.n4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.seats.teams {
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
}
.seats-vs {
  font-family: var(--display);
  font-size: 30px;
  color: var(--ink);
  padding: 6px 10px 4px;
  border-radius: 10px;
  transform: rotate(-6deg);
  background: linear-gradient(180deg, #ffe98f, var(--gold) 52%, #c98a06);
  box-shadow:
    0 0 0 2px #1a0d04,
    3px 3px 0 2px #1a0d04;
}
.seats-loading {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  min-height: 160px;
}
.team {
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 20px;
  border: 1.5px solid;
}
.team-a {
  border-color: rgba(227, 25, 47, 0.5);
  background: radial-gradient(ellipse at 0% 0%, rgba(227, 25, 47, 0.18), transparent 70%);
}
.team-b {
  border-color: rgba(245, 194, 43, 0.5);
  background: radial-gradient(ellipse at 100% 0%, rgba(245, 194, 43, 0.16), transparent 70%);
}
.team-label {
  font-family: var(--display);
  font-size: 18px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.team-a .team-label {
  color: #ff7d8a;
}
.team-b .team-label {
  color: var(--gold-hi);
}
.seat {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 4px;
  padding: 18px 10px 14px;
  border-radius: 20px;
  text-align: center;
  min-width: 0;
  background: rgba(255, 255, 255, 0.04);
  border: 1.5px solid var(--line-2);
  animation: pop 0.3s var(--ease-out);
}
.team .seat {
  padding: 12px 10px;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: 'av name kick' 'av tag kick';
  justify-items: start;
  text-align: left;
  align-items: center;
  column-gap: 12px;
}
.team .seat .seat-av {
  grid-area: av;
  width: 48px;
  height: 48px;
  font-size: 24px;
}
.team .seat .seat-name {
  grid-area: name;
}
.team .seat .seat-tag {
  grid-area: tag;
}
.team .seat .seat-kick,
.team .seat .seat-pick {
  grid-area: kick;
  position: static;
}
.team .seat .seat-no {
  display: none;
}
.seat.filled {
  border-color: rgba(245, 194, 43, 0.45);
  background: linear-gradient(170deg, rgba(60, 48, 30, 0.7), rgba(26, 21, 15, 0.8));
}
.seat.you {
  box-shadow:
    0 0 0 2px var(--gold),
    0 0 26px -6px rgba(245, 194, 43, 0.6);
}
.seat.empty {
  border-style: dashed;
  background: rgba(0, 0, 0, 0.18);
}
.seat-no {
  position: absolute;
  top: 8px;
  left: 10px;
  font-family: var(--display);
  font-size: 16px;
  color: rgba(245, 194, 43, 0.6);
}
.seat-av {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--display);
  font-size: 32px;
  color: var(--ink);
  background: radial-gradient(circle at 35% 30%, var(--gold-hi), var(--gold) 55%, var(--gold-mid));
  box-shadow: 0 4px 0 var(--gold-deep);
}
.seat.team-a.filled .seat-av {
  color: #fff6e0;
  background: radial-gradient(circle at 35% 30%, #ff6a78, var(--p1) 50%, var(--p1-deep));
  box-shadow: 0 4px 0 #5a0710;
}
.seat.empty .seat-av {
  color: var(--dim);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 2px var(--line-2);
  font-family: var(--font);
  font-weight: 800;
  animation: seatwait 1.6s ease-in-out infinite;
}
@keyframes seatwait {
  50% {
    box-shadow: inset 0 0 0 2px rgba(245, 194, 43, 0.55);
    color: var(--gold);
  }
}
.seat-crown {
  position: absolute;
  top: -9px;
  right: -6px;
  width: 24px;
  height: 18px;
  background: var(--gold);
  clip-path: polygon(0 100%, 0 25%, 25% 60%, 50% 0, 75% 60%, 100% 25%, 100% 100%);
  filter: drop-shadow(0 2px 0 var(--gold-deep));
}
.seat-name {
  font-size: 17px;
  font-weight: 800;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.seat.empty .seat-name {
  color: var(--muted);
  font-weight: 700;
  font-size: 15px;
}
.seat-tag {
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.seat.you .seat-tag,
.seat.owner .seat-tag {
  color: var(--gold);
}
.seat-kick {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border-radius: 9px;
  border: 0;
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  font-size: 18px;
  font-weight: 800;
  cursor: pointer;
}
.seat-kick:hover {
  color: var(--bad);
  background: rgba(255, 93, 93, 0.1);
}
.seat-kick.armed {
  font-size: 12px;
  color: #fff;
  background: var(--bad);
}
.seat-pick {
  margin-top: 6px;
}
.room-note {
  margin: 0;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  font-weight: 700;
  color: var(--paper);
  background: rgba(227, 25, 47, 0.1);
  border: 1px solid rgba(227, 25, 47, 0.35);
}
.room-note[hidden] {
  display: none;
}
.room-state {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-weight: 800;
  font-size: 16px;
  color: var(--paper);
}
.room-state:empty {
  display: none;
}
.rs-dot {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 12px var(--gold);
  animation: blink 1.2s ease-in-out infinite;
}
.room-state.full {
  color: var(--gold-hi);
}
.room-state.full .rs-dot {
  background: #3ddc84;
  box-shadow: 0 0 12px #3ddc84;
}
.room-link[hidden] {
  display: none;
}
.room-link .btn {
  min-width: 140px;
}
.room-link .btn.done {
  filter: hue-rotate(60deg) saturate(1.3);
}
.room-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.room-actions .btn {
  flex: 1 1 160px;
}
.room-actions .btn[hidden] {
  display: none;
}
.room-leave {
  color: #ffb3b3;
}
.room-leave.armed {
  background: var(--bad);
  color: #fff;
  box-shadow: 0 4px 0 #7a1414;
}
.is-preview .room-actions #room-join {
  flex: 2 1 240px;
}
.room-side .cp-wrap {
  margin-top: 0;
}

/* ---------- partida com 3 ou 4: um cartão por jogador ---------- */
.d3 {
  background: radial-gradient(circle at 38% 30%, #9cc4ff, #3d8bff 45%, #163f8f);
  box-shadow:
    inset 0 -3px 0 rgba(0, 0, 0, 0.25),
    0 3px 8px rgba(0, 0, 0, 0.4);
}
.d4 {
  background: radial-gradient(circle at 38% 30%, #b6ffd5, #3ddc84 45%, #13703f);
  box-shadow:
    inset 0 -3px 0 rgba(0, 0, 0, 0.25),
    0 3px 8px rgba(0, 0, 0, 0.4);
}
.duel.multi {
  width: min(max(var(--board-w), 520px), 100%);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-template-areas: 'p1 p2 p3 p4' 'mid mid mid mid';
  row-gap: 4px;
  column-gap: 6px;
}
.duel.multi.n3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-areas: 'p1 p2 p3' 'mid mid mid';
}
.duel.multi.teams {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: 'p1 p3 x p2 p4' 'mid mid mid mid mid';
}
.duel.multi.teams::before {
  content: '×';
  grid-area: x;
  align-self: center;
  font-family: var(--display);
  font-size: 26px;
  color: var(--gold);
  padding: 0 2px;
}
.duel.multi #pc1 {
  grid-area: p1;
}
.duel.multi #pc2 {
  grid-area: p2;
}
.duel.multi #pc3 {
  grid-area: p3;
}
.duel.multi #pc4 {
  grid-area: p4;
}
.duel.multi .vs-mid {
  grid-area: mid;
  flex-direction: row;
  justify-content: center;
  gap: 10px;
  min-width: 0;
}
.duel.multi .pcard,
.duel.multi .pcard.right {
  flex-direction: column;
  justify-content: flex-start;
  text-align: center;
  gap: 4px;
  padding: 6px 4px;
}
.duel.multi .pcard .ring {
  order: -1;
  width: 46px;
  height: 46px;
}
.duel.multi .pcard .ring .disc {
  inset: 8px;
}
.duel.multi .pcard .pscore {
  order: 2;
  min-width: 28px;
  height: 24px;
  font-size: 14px;
}
.duel.multi .pinfo {
  align-items: center;
  max-width: 100%;
}
.duel.multi .pname {
  font-size: 14px;
  max-width: 100%;
}
.duel.multi .pstate {
  font-size: 10px;
}
.duel.multi .pcard.active {
  transform: translateY(-2px);
}
.duel.multi .pcard.me .pname {
  color: var(--gold-hi);
}
.duel.multi .pcard.out {
  opacity: 0.42;
  filter: grayscale(1);
}
.duel.multi .pcard.out .pname {
  text-decoration: line-through;
}
.duel.multi.teams .pcard.team-a {
  background: linear-gradient(180deg, rgba(227, 25, 47, 0.12), transparent);
}
.duel.multi.teams .pcard.team-b {
  background: linear-gradient(180deg, rgba(245, 194, 43, 0.1), transparent);
}
.duel.multi.teams .pcard.team-a .disc {
  background: radial-gradient(circle at 38% 30%, #ff6a78, var(--p1) 45%, var(--p1-deep));
}
.duel.multi.teams .pcard.team-b .disc {
  background: radial-gradient(circle at 38% 30%, #fff3b8, var(--p2) 40%, var(--p2-deep));
}
.duel.multi.teams .pcard.active.team-a {
  border-color: rgba(227, 25, 47, 0.6);
}
.duel.multi.teams .pcard.active.team-b {
  border-color: rgba(245, 194, 43, 0.6);
}

/* saiu da mesa: aviso preso embaixo da tela (o tabuleiro continua jogando por cima do resto) */
.out-note {
  position: fixed;
  z-index: 35;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100vw - 24px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 10px 12px 10px 16px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--paper);
  background: linear-gradient(170deg, rgba(60, 24, 24, 0.96), rgba(28, 14, 14, 0.97));
  border: 1px solid rgba(255, 93, 93, 0.45);
  box-shadow: 0 20px 40px -14px rgba(0, 0, 0, 0.9);
  animation: fade 0.3s both;
}
.out-note[hidden] {
  display: none;
}
.out-note b {
  color: #ff9b9b;
}

/* VS com 3 ou 4: as duplas (ou você contra a mesa) empilhadas em cada lado */
.vs-team {
  display: none;
}
.vs-splash.multi .vs-card {
  display: none;
}
.vs-splash.multi .vs-team {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 2.4vh, 24px);
  max-width: 42vw;
}
.vs-panel.left .vs-team {
  align-items: flex-start;
  animation: vs-card-l 0.5s 0.12s var(--ease-back) both;
}
.vs-panel.right .vs-team {
  align-items: flex-end;
  animation: vs-card-r 0.5s 0.12s var(--ease-back) both;
}
.vs-mini {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 18px);
  min-width: 0;
  max-width: 100%;
}
.vs-panel.right .vs-mini {
  flex-direction: row-reverse;
  text-align: right;
}
.vs-mini .vs-initial {
  flex: none;
  width: clamp(54px, 7.4vw, 104px);
  font-size: clamp(28px, 4vw, 56px);
  border-width: clamp(3px, 0.4vw, 5px);
}
.vs-mini .vs-name {
  font-size: clamp(24px, 3.6vw, 54px);
  -webkit-line-clamp: 1;
}
.vs-mini.you .vs-initial {
  box-shadow:
    0 0 0 4px var(--gold),
    0 10px 0 rgba(0, 0, 0, 0.3);
}
.vs-team-label {
  font-family: var(--display);
  font-size: clamp(14px, 1.6vw, 20px);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff6e0;
  background: rgba(0, 0, 0, 0.4);
  padding: 4px 12px 2px;
  border-radius: 99px;
}
.vs-panel.right .vs-team-label {
  color: #2a1a00;
  background: rgba(255, 255, 255, 0.5);
}
.vs-splash.multi .vs-x1 {
  font-size: clamp(64px, 12vw, 150px);
}

/* resultado com 3 ou 4: vencedores e o prêmio dividido */
.result-winners {
  display: grid;
  justify-items: center;
  gap: 8px;
  margin: -8px 0 16px;
}
.result-winners[hidden] {
  display: none;
}
.rw-label {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
}
.rw-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.rw-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 14px 5px 5px;
  border-radius: 99px;
  font-weight: 800;
  font-size: 15px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line-2);
}
.rw-chip .disc {
  width: 24px;
  height: 24px;
}
.rw-chip.you {
  border-color: var(--gold);
  color: var(--gold-hi);
  background: rgba(245, 194, 43, 0.1);
}
.rw-split {
  font-size: 13px;
  font-weight: 700;
  color: var(--gold-hi);
}

/* ---------- responsivo das salas ---------- */
@media (max-width: 1100px) {
  .room-grid {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 300px);
  }
  .seats.n4:not(.teams) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 860px) {
  /* celular/tablet em pé: "Chamar amigo" vira gaveta que sobe de baixo */
  .cp-wrap {
    display: none;
    margin: 0;
  }
  .cp-wrap.open {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 66;
    align-items: flex-end;
    justify-content: center;
    background: rgba(0, 0, 0, 0.55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    animation: fade 0.2s both;
  }
  .cp-wrap.open .call-panel {
    width: min(560px, 100%);
    max-height: 82svh;
    overflow-y: auto;
    border-radius: 24px 24px 0 0;
    padding: 20px 18px max(20px, env(safe-area-inset-bottom));
    animation: sheet 0.35s var(--ease-out) both;
  }
  .cp-pet {
    display: none;
  }
  .cp-x {
    display: block;
    position: static;
    margin-left: auto;
  }
  .cp-open {
    display: block;
  }
  .room-grid {
    grid-template-columns: 1fr;
  }
  .room-grid > .room-side {
    display: none;
  }
  .room-grid > .room-side:has(.cp-wrap.open) {
    display: block;
  }
}
@media (max-width: 640px) {
  .sec-title {
    font-size: 22px;
    margin: 22px 0 10px;
  }
  .sec-head {
    margin: 22px 0 10px;
    gap: 8px;
  }
  .live {
    font-size: 10px;
  }
  .room-row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: 'av main go' 'av meta meta';
    gap: 6px 10px;
    padding: 10px 12px;
  }
  .rr-meta {
    grid-area: meta;
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
  }
  .rr-mode {
    display: flex;
    gap: 6px;
    align-items: baseline;
    justify-items: start;
    text-align: left;
    min-width: 0;
    white-space: nowrap;
  }
  .rr-dots i {
    width: 9px;
    height: 9px;
  }
  .rr-go {
    min-width: 78px;
  }
  .room-card {
    border-radius: 22px;
    gap: 14px;
  }
  .seats.n3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .seats.n2 {
    gap: 8px;
  }
  .seats.teams {
    grid-template-columns: 1fr;
  }
  .seats.teams .seats-vs {
    justify-self: center;
    font-size: 22px;
  }
  .seat {
    padding: 14px 6px 10px;
    border-radius: 16px;
  }
  .seat-av {
    width: 52px;
    height: 52px;
    font-size: 26px;
  }
  .seat-name {
    font-size: 15px;
  }
  .seats-vs {
    font-size: 22px;
    padding: 4px 8px 2px;
  }
  .room-link .btn {
    min-width: 112px;
  }
  .room-actions .btn {
    flex: 1 1 140px;
  }
  .stepper {
    grid-template-columns: 46px auto minmax(0, 1fr) 46px;
  }
  .stepper .st-btn,
  .stepper input {
    height: 48px;
  }
  .seg button {
    padding: 9px 4px;
  }
  .seg button small {
    font-size: 10px;
  }
  .vs-splash.multi .vs-team {
    max-width: 88vw;
    gap: 10px;
  }
  .vs-mini .vs-initial {
    width: 50px;
    font-size: 26px;
  }
  .vs-mini .vs-name {
    font-size: 26px;
  }
  .duel.multi {
    width: 100%;
    column-gap: 2px;
  }
  .duel.multi .pcard .ring {
    width: 38px;
    height: 38px;
  }
  .duel.multi .pcard .ring .disc {
    inset: 6px;
  }
  .duel.multi .pname {
    font-size: 12px;
  }
  .duel.multi .pstate {
    font-size: 9px;
    letter-spacing: 0.04em;
  }
  .duel.multi.teams::before {
    font-size: 18px;
  }
}

/* CELULAR DEITADO com 3 ou 4 jogadores: os cartões empilham na coluna da esquerda e o jogo usa o resto.
   (fica separado do bloco do 1 contra 1, que continua igual) */
@media (orientation: landscape) and (max-height: 560px) {
  body .match.multi:has(.stage[data-game]) {
    grid-template-columns: var(--side) auto;
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas: '. stage' 'duel stage' 'act stage' '. stage';
    --board-w: min(calc(100vw - var(--side) - 32px), calc((100svh - 12px) * var(--stage-ar)));
  }
  body .match.multi:has(.stage[data-game]) .duel.multi {
    grid-area: duel;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    width: 100%;
  }
  body .match.multi .duel.multi .pcard,
  body .match.multi .duel.multi .pcard.right {
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    padding: 3px 6px;
    gap: 8px;
  }
  body .match.multi .duel.multi .pcard .ring {
    width: 32px;
    height: 32px;
  }
  body .match.multi .duel.multi .pcard .ring .disc {
    inset: 5px;
  }
  body .match.multi .duel.multi .pinfo {
    align-items: flex-start;
  }
  body .match.multi .duel.multi .pcard .pscore {
    margin-left: auto;
  }
  body .match.multi .duel.multi #pc1 {
    order: 1;
  }
  body .match.multi .duel.multi #pc3 {
    order: 2;
  }
  body .match.multi .duel.multi #pc2 {
    order: 4;
  }
  body .match.multi .duel.multi #pc4 {
    order: 5;
  }
  body .match.multi .duel.multi:not(.teams) #pc2 {
    order: 2;
  }
  body .match.multi .duel.multi:not(.teams) #pc3 {
    order: 3;
  }
  body .match.multi .duel.multi.teams::before {
    order: 3;
    font-size: 16px;
    line-height: 1;
    text-align: center;
  }
  body .match.multi .duel.multi .vs-mid {
    order: 9;
    margin-top: 4px;
  }
}
.room-state > span {
  display: grid;
  gap: 2px;
}
.rs-invited {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.seat.off {
  opacity: 0.6;
}
.seat.off .seat-tag {
  color: var(--bad);
}
.seat.waiting .seat-av {
  animation: seatwait 1.6s ease-in-out infinite;
}
/* criar sala: mais justo para caber em 900 px de altura; o botão fica sempre à vista */
.room-form.modal-card {
  padding: 20px 22px 0;
  gap: 12px;
}
.room-form .rf-stake {
  gap: 8px;
  padding: 12px 14px;
}
.room-form .stepper .st-btn,
.room-form .stepper input {
  height: 46px;
}
.room-form .stepper input {
  font-size: 24px;
}
.room-form .seg button {
  padding: 8px 6px;
}
.room-form .form-error {
  margin: 0;
  min-height: 0;
}
.room-form .form-error:empty {
  display: none;
}
.room-form #rf-send {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin-bottom: 18px;
}
/* chip "Sua sala" no celular: só o ponto e "Sala" (a barra não pode passar da largura da tela) */
.room-chip {
  max-width: 42vw;
  overflow: hidden;
}
.room-chip #room-chip-text {
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 640px) {
  .room-chip {
    padding: 7px 10px;
    font-size: 13px;
    gap: 6px;
  }
  .room-chip #room-chip-text {
    display: none;
  }
  .room-chip::after {
    content: 'Sala';
  }
}
@media (max-width: 520px) {
  /* com o chip da sala na barra, a logo encolhe um pouco para tudo caber em 375 px */
  .bar:has(.room-chip:not([hidden])) .wordmark.small .logo {
    height: 28px;
  }
  .bar:has(.room-chip:not([hidden])) .wallet-chip {
    padding-right: 8px;
  }
}

/* fim de mesa de 3 ou 4: "+ Fulano" para cada jogador */
.result-addfriends {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  align-items: center;
  margin-top: 12px;
}
.result-addfriends[hidden] {
  display: none;
}
.result-addfriends .raf-label {
  font-size: 13px;
  font-weight: 800;
  color: var(--muted);
}

/* Pedrada sendo o jogador 2: cabeçalho espelhado (você à esquerda, como na tela dividida) */
.duel.flip #pc2 {
  order: -1;
  flex-direction: row-reverse;
  justify-content: flex-end;
  text-align: left;
}
.duel.flip #pc1 {
  order: 3;
  flex-direction: row-reverse;
  justify-content: flex-start;
  text-align: right;
}
@media (orientation: landscape) and (max-height: 560px) {
  /* deitado a Pedrada empilha os cartões numa coluna à esquerda: todos alinhados à esquerda */
  .match .duel.flip #pc1 {
    grid-area: pc2;
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
  }
  .match .duel.flip #pc2 {
    grid-area: pc1;
    flex-direction: row-reverse;
    justify-content: flex-end;
    text-align: left;
  }
}

/* =========================================================
   MOLDURA NOVA (08/10/2026): topo com saldo e "Depositar", menu lateral fixo no PC, barra de baixo no celular,
   página inicial com banners, categorias, busca, fileiras de jogos e salas de todos os jogos.
   Na partida (e no VS/resultado) o menu lateral e a barra de baixo somem.
   ========================================================= */
:root {
  --bar-h: 64px;
  --side-w: 236px;
  --tab-h: 62px;
}
body.side-mini {
  --side-w: 76px;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.only-narrow {
  display: none !important;
}

/* ---------- topo ---------- */
.bar {
  min-height: var(--bar-h);
  gap: 12px;
  z-index: 30;
}
.side-toggle {
  flex: none;
}
.btn-deposit {
  padding: 10px 18px;
  font-size: 15px;
  border-radius: 12px;
}
.btn-deposit[hidden],
.btn-enter[hidden] {
  display: none;
}
.btn-enter {
  padding: 10px 20px;
  font-size: 15px;
  border-radius: 12px;
}
body.guest #wallet-chip,
body.guest #btn-deposit,
body.guest #user-menu,
body.guest #room-chip {
  display: none !important;
}

/* ---------- menu lateral ---------- */
.side {
  position: fixed;
  z-index: 26;
  top: var(--bar-h);
  bottom: 0;
  left: 0;
  width: var(--side-w);
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 10px 12px;
  background: linear-gradient(180deg, rgba(22, 18, 15, 0.97), rgba(12, 10, 9, 0.99));
  border-right: 1px solid var(--line);
  transition:
    width 0.2s var(--ease-out),
    transform 0.3s var(--ease-out);
  scrollbar-width: thin;
  scrollbar-color: rgba(245, 194, 43, 0.25) transparent;
}
.side-head {
  display: none;
  align-items: center;
  gap: 10px;
  padding: 2px 4px 10px;
}
.side-close {
  position: static;
  margin-left: auto;
}
.side-nav {
  display: grid;
  gap: 2px;
}
.side-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  border-radius: 12px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-weight: 800;
  font-size: 15px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.15s,
    color 0.15s;
}
.side-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--paper);
}
.side-item.on {
  color: var(--ink);
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  box-shadow: 0 3px 0 var(--gold-deep);
}
.side-item span {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.si-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
}
.si-ico svg {
  width: 22px;
  height: 22px;
}
.si-caret {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s;
  opacity: 0.7;
}
.side-item[aria-expanded='false'] .si-caret {
  transform: rotate(-45deg);
}
.si-live {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--p1);
  box-shadow: 0 0 10px var(--p1);
  animation: blink 1.4s ease-in-out infinite;
}
.side .menu-badge {
  margin-left: auto;
}
.side-games {
  display: grid;
  gap: 2px;
  padding: 2px 0 6px 10px;
}
.side-games[hidden] {
  display: none;
}
.side-game {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 8px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--paper);
  min-width: 0;
}
.side-game:hover {
  background: rgba(255, 255, 255, 0.05);
}
.side-game.on {
  background: rgba(245, 194, 43, 0.12);
  box-shadow: inset 0 0 0 1px rgba(245, 194, 43, 0.4);
}
.sg-thumb {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #1d1813;
  font-family: var(--display);
  color: var(--gold);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.sg-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}
.sg-name {
  font-family: var(--tag);
  font-size: 17px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff6e0;
}
.sg-name[data-game] {
  background: linear-gradient(170deg, var(--t1) 0%, var(--t2) 48%, var(--t3) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  padding-right: 0.1em;
}
.sg-name[data-game='cartas'] {
  background-image: linear-gradient(100deg, #ff4d6d 0%, #ffd23f 35%, #3ddc84 65%, #3d8bff 100%);
}
.side-collapse {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--dim);
  font: inherit;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.side-collapse:hover {
  color: var(--paper);
}
.side-collapse i {
  flex: none;
  width: 24px;
  height: 14px;
  position: relative;
}
.side-collapse i::before {
  content: '';
  position: absolute;
  left: 7px;
  top: 3px;
  width: 8px;
  height: 8px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
}
body.side-mini .side-collapse i::before {
  transform: rotate(-135deg);
  left: 4px;
}
.side-foot {
  margin: 4px 4px 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.side-backdrop {
  position: fixed;
  inset: 0;
  z-index: 68;
  background: rgba(0, 0, 0, 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  animation: fade 0.2s both;
}
.side-backdrop[hidden] {
  display: none;
}

/* PC: menu fixo, conteúdo à direita */
@media (min-width: 1024px) {
  #app > main,
  #app > .site-foot {
    margin-left: var(--side-w);
    transition: margin-left 0.2s var(--ease-out);
  }
  body.side-mini .side {
    padding: 14px 8px 12px;
  }
  body.side-mini .side-item {
    justify-content: center;
    padding: 8px;
  }
  body.side-mini .side-item span,
  body.side-mini .side-item .si-caret,
  body.side-mini .side-item .si-live,
  body.side-mini .side .menu-badge,
  body.side-mini .side-games,
  body.side-mini .side-collapse span,
  body.side-mini .side-foot {
    display: none !important;
  }
  body.side-mini .side-collapse {
    justify-content: center;
    padding: 10px 8px;
  }
  .side-backdrop {
    display: none !important;
  }
}
/* celular e tablet: menu vira gaveta pela esquerda; barra de baixo fixa */
@media (max-width: 1023px) {
  .side {
    top: 0;
    z-index: 69;
    width: min(300px, 84vw);
    transform: translateX(-104%);
    box-shadow: 20px 0 60px rgba(0, 0, 0, 0.6);
    padding-top: max(12px, env(safe-area-inset-top));
  }
  .side.open {
    transform: none;
  }
  .side-head {
    display: flex;
  }
  .side-collapse {
    display: none;
  }
  .side-toggle {
    display: none;
  }
  #app {
    padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom));
  }
  .only-narrow {
    display: block !important;
  }
  /* o avatar do topo sai: a "Conta" fica na barra de baixo (o menu dela sobe acima da barra) */
  .bar .user-chip {
    display: none;
  }
  .menu#user-dropdown {
    position: fixed;
    top: auto;
    right: 10px;
    bottom: calc(var(--tab-h) + 10px + env(safe-area-inset-bottom));
    z-index: 45;
    min-width: 220px;
  }
  .bar #btn-sound {
    display: none;
  }
}

/* ---------- barra de baixo (celular) ---------- */
.tabbar {
  display: none;
}
@media (max-width: 1023px) {
  .tabbar {
    position: fixed;
    z-index: 40;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(var(--tab-h) + env(safe-area-inset-bottom));
    padding: 0 4px env(safe-area-inset-bottom);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: stretch;
    background: linear-gradient(180deg, rgba(24, 20, 17, 0.97), rgba(12, 10, 9, 0.99));
    border-top: 1px solid var(--line-2);
    box-shadow: 0 -12px 30px -12px rgba(0, 0, 0, 0.8);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  .tabbar button {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 3px;
    border: 0;
    background: none;
    color: var(--muted);
    font: inherit;
    font-weight: 800;
    font-size: 11px;
    cursor: pointer;
  }
  .tabbar button .si-ico svg {
    width: 23px;
    height: 23px;
  }
  .tabbar button.on {
    color: var(--gold-hi);
  }
  .tabbar button.on::before {
    content: '';
    position: absolute;
    top: 0;
    left: 26%;
    right: 26%;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--gold);
    box-shadow: 0 0 12px var(--gold);
  }
  .tabbar .chip-badge {
    top: 6px;
    right: calc(50% - 22px);
  }
  /* avisos e o chamado de amigo ficam acima da barra */
  body:not(:has(#screen-match:not([hidden]))) .toast {
    bottom: calc(var(--tab-h) + 14px + env(safe-area-inset-bottom));
  }
  body:not(:has(#screen-match:not([hidden]))) .challenge {
    bottom: calc(var(--tab-h) + 10px + env(safe-area-inset-bottom));
  }
  /* chip "Sua sala": vira um botão flutuante acima da barra de baixo, com o texto inteiro */
  .room-chip {
    position: fixed;
    z-index: 39;
    left: 50%;
    bottom: calc(var(--tab-h) + 12px + env(safe-area-inset-bottom));
    transform: translateX(-50%);
    max-width: calc(100vw - 32px);
    padding: 9px 16px;
    font-size: 14px;
    box-shadow:
      0 4px 0 var(--gold-deep),
      0 14px 30px -8px rgba(0, 0, 0, 0.8);
    animation: fade 0.3s both;
  }
  .room-chip #room-chip-text {
    display: inline !important;
  }
  .room-chip::after {
    content: none !important;
  }
}
@media (max-width: 1023px) and (orientation: landscape) and (max-height: 560px) {
  :root {
    --tab-h: 50px;
  }
  .tabbar button {
    grid-auto-flow: column;
    gap: 6px;
    font-size: 12px;
  }
}

/* ---------- celular: só a área do meio rola (Safari do iOS 26) ----------
   O Safari do iOS 26 desenha a página POR BAIXO da barra de endereço flutuante, mas corta os elementos fixos na borda
   da área visível: com o documento rolando, os cartões passavam entre a nossa barra de baixo e a dele (e um fundo
   esticado para baixo nem aparece). Aqui o documento não rola; quem rola é o #app, do tamanho exato da área visível,
   e embaixo da barra do Safari só fica o fundo escuro. Só no site principal (admin e políticas rolam normal). */
@media (max-width: 1023px) {
  /* fora da partida (na partida a barra de baixo some e o jogo precisa da altura real; com o documento parado o
     Safari deitado nunca recolhe as barras dele e a mesa ficava cortada) */
  html:has(body > #app):not(:has(#screen-match:not([hidden]))),
  html:has(body > #app):not(:has(#screen-match:not([hidden]))) body {
    height: 100%;
    overflow: hidden;
  }
  html:not(:has(#screen-match:not([hidden]))) body > #app {
    height: 100vh;
    height: var(--altura-tela, 100dvh);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior-y: contain;
  }
  body > .login {
    height: 100vh;
    height: var(--altura-tela, 100dvh);
    min-height: 0;
    overflow-y: auto;
  }
}

/* ---------- partida, VS e resultado: o jogo ocupa a tela ---------- */
body:has(#screen-match:not([hidden])) .side,
body:has(#screen-match:not([hidden])) .side-backdrop,
body:has(#screen-match:not([hidden])) .tabbar,
body:has(#screen-match:not([hidden])) .site-foot,
body:has(#screen-match:not([hidden])) .side-toggle {
  display: none !important;
}
body:has(#screen-match:not([hidden])) #app > main {
  margin-left: 0;
}
body:has(#screen-match:not([hidden])) #app {
  padding-bottom: 0;
}

/* ---------- rodapé ---------- */
.site-foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 26px 16px 30px;
  color: var(--dim);
  font-size: 13px;
  font-weight: 700;
  border-top: 1px solid var(--line);
  margin-top: 24px;
}
.sf-18 {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid currentColor;
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: 0;
  flex: none;
}

/* ---------- página inicial ---------- */
.home {
  width: min(1280px, 100%);
  padding: 16px clamp(12px, 2.6vw, 32px) 20px;
}
.banners {
  position: relative;
  margin: 0 calc(-1 * clamp(0px, 1vw, 8px));
}
.bn-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: 22px;
  overscroll-behavior-x: contain;
}
.bn-track::-webkit-scrollbar {
  display: none;
}
.bn-track.dragging {
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
}
@media (min-width: 1180px) {
  .bn-track {
    grid-auto-columns: calc(50% - 7px);
  }
}
.bn {
  position: relative;
  scroll-snap-align: start;
  aspect-ratio: 1920 / 800;
  min-height: 196px;
  overflow: hidden;
  border-radius: 22px;
  isolation: isolate;
  background:
    radial-gradient(ellipse 70% 120% at 85% 60%, rgba(245, 194, 43, 0.35), transparent 60%),
    radial-gradient(ellipse 60% 90% at 100% 0%, rgba(227, 25, 47, 0.35), transparent 60%),
    linear-gradient(110deg, #0c0907 0%, #1b130b 45%, #2b1a08 100%);
  box-shadow:
    inset 0 0 0 1px rgba(245, 194, 43, 0.22),
    0 22px 40px -22px rgba(0, 0, 0, 0.9);
  cursor: grab;
}
.bn-2 {
  background:
    radial-gradient(ellipse 50% 110% at 72% 55%, rgba(227, 25, 47, 0.45), transparent 62%),
    radial-gradient(ellipse 50% 110% at 98% 55%, rgba(245, 194, 43, 0.4), transparent 62%),
    linear-gradient(110deg, #0c0907 0%, #170d0b 50%, #24100c 100%);
}
.bn-3 {
  background:
    radial-gradient(ellipse 70% 120% at 82% 60%, rgba(10, 154, 140, 0.45), transparent 62%),
    linear-gradient(110deg, #0a0807 0%, #0d1614 50%, #0a2622 100%);
}
.bn-4 {
  background:
    radial-gradient(ellipse 70% 120% at 82% 60%, rgba(70, 230, 120, 0.3), transparent 62%),
    linear-gradient(110deg, #0a0807 0%, #0f160c 50%, #12280f 100%);
}
.bn-5 {
  background:
    radial-gradient(ellipse 70% 120% at 82% 60%, rgba(60, 190, 255, 0.3), transparent 62%),
    linear-gradient(110deg, #0a0807 0%, #0c1320 50%, #0e1d33 100%);
}
.bn-6 {
  background:
    radial-gradient(ellipse 70% 120% at 82% 60%, rgba(255, 70, 220, 0.28), transparent 62%),
    radial-gradient(ellipse 50% 90% at 60% 100%, rgba(245, 194, 43, 0.3), transparent 60%),
    linear-gradient(110deg, #0a0807 0%, #1a0d19 50%, #2a0f25 100%);
}
/* fio de estampa X1 por cima do degradê (banner sem imagem) */
.bn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url('/img/bg/x1-estampa.webp') 0 0 / 180px 180px repeat;
  opacity: 0.07;
}
.bn-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--fx, 70%) center;
  pointer-events: none;
}
@media (min-width: 700px) {
  .bn-img {
    object-position: center;
  }
}
.bn.has-img .bn-art {
  display: none;
}
.bn.has-img::before {
  display: none;
}
/* escurece a esquerda (onde vai o texto), com ou sem imagem */
.bn::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(8, 6, 4, 0.88) 0%, rgba(8, 6, 4, 0.62) 34%, rgba(8, 6, 4, 0) 62%);
}
.bn-copy {
  position: absolute;
  z-index: 2;
  left: 0;
  top: 0;
  bottom: 0;
  width: 52%;
  padding: clamp(14px, 3.4cqi, 30px) 0 clamp(30px, 4cqi, 40px) clamp(16px, 4cqi, 36px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(6px, 1.2cqi, 12px);
}
.bn {
  container-type: inline-size;
}
.bn-title {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(24px, 7.2cqi, 58px);
  line-height: 0.95;
  letter-spacing: 0.01em;
  color: #fff6e0;
  text-shadow:
    0 0.04em 0 #3d2a00,
    0 0.12em 0.3em rgba(0, 0, 0, 0.7);
}
.bn-title::first-line {
  color: var(--gold-hi);
}
.bn-sub {
  margin: 0;
  font-size: clamp(12px, 2.6cqi, 18px);
  font-weight: 700;
  line-height: 1.25;
  color: #efe6d6;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
  max-width: 34ch;
}
.bn-cta {
  padding: clamp(8px, 1.6cqi, 13px) clamp(14px, 3cqi, 24px);
  font-size: clamp(13px, 2.3cqi, 17px);
  border-radius: 12px;
  margin-top: 2px;
}
.bn-18 {
  position: absolute;
  z-index: 2;
  left: clamp(14px, 4cqi, 36px);
  bottom: clamp(8px, 1.6cqi, 14px);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: clamp(9px, 1.5cqi, 11px);
  font-weight: 800;
  color: rgba(255, 246, 224, 0.8);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.bn-18 b {
  display: inline-grid;
  place-items: center;
  width: 2.2em;
  height: 2.2em;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  font-size: 0.95em;
}
/* desenhos em CSS (enquanto não há imagem) */
.bn-art {
  position: absolute;
  z-index: 0;
  inset: 0 0 0 38%;
  pointer-events: none;
}
.bn-cover {
  position: absolute;
  right: -2%;
  top: 50%;
  height: 125%;
  transform: translateY(-50%) rotate(4deg);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 16px;
  box-shadow:
    0 30px 50px rgba(0, 0, 0, 0.7),
    0 0 0 2px rgba(245, 194, 43, 0.5);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 30%);
}
.bn-pet {
  position: absolute;
  bottom: -4%;
  height: 78%;
  width: auto;
  filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.6));
}
.bn-art.jogo .bn-pet.p1,
.bn-art.treino .bn-pet.p1 {
  left: 18%;
  height: 70%;
}
.bn-art.amigos .bn-pet.left {
  left: 8%;
  transform: scaleX(1);
  height: 82%;
}
.bn-art.amigos .bn-pet.right {
  right: 4%;
  transform: scaleX(-1);
  height: 82%;
}
.bn-vs {
  position: absolute;
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%) rotate(-7deg);
  font-family: var(--display);
  font-size: clamp(36px, 11cqi, 110px);
  line-height: 1;
  padding: 0.04em 0.16em 0;
  color: #1a0d04;
  background: linear-gradient(180deg, #ffe98f, var(--gold) 52%, #c98a06);
  border-radius: 0.1em;
  box-shadow:
    0.05em 0.05em 0 #1a0d04,
    0 0 0.5em rgba(245, 194, 43, 0.45);
}
.bn-art.salas .bn-pet.crowd {
  height: 64%;
}
.bn-art.salas .c0 {
  left: 6%;
}
.bn-art.salas .c1 {
  left: 34%;
  height: 74%;
  z-index: 1;
}
.bn-art.salas .c2 {
  right: 2%;
}
.bn-live {
  position: absolute;
  right: 6%;
  top: 12%;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 99px;
  font-weight: 900;
  font-size: clamp(11px, 2cqi, 16px);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #fff;
  background: var(--p1);
  box-shadow: 0 0 24px rgba(227, 25, 47, 0.6);
}
.bn-live i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
  animation: blink 1.2s ease-in-out infinite;
}
.bn-badge {
  position: absolute;
  right: 6%;
  top: 50%;
  height: 108%;
  transform: translateY(-50%) rotate(-8deg);
  filter: drop-shadow(0 26px 30px rgba(0, 0, 0, 0.7));
  animation: float 5s ease-in-out infinite;
}
.bn-coin {
  position: absolute;
  right: 18%;
  top: 22%;
  width: 34%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, var(--gold-hi), var(--gold) 45%, var(--gold-deep));
  box-shadow:
    inset 0 -8px 0 rgba(0, 0, 0, 0.25),
    inset 0 0 0 10px rgba(255, 232, 163, 0.35),
    0 20px 40px rgba(0, 0, 0, 0.6);
}
.bn-coin.c2 {
  right: 4%;
  top: 48%;
  width: 20%;
}
.bn-arrow {
  position: absolute;
  z-index: 3;
  top: 50%;
  width: 42px;
  height: 42px;
  margin-top: -21px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(12, 10, 9, 0.7);
  box-shadow: inset 0 0 0 1px var(--line-2);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.bn-arrow::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2.5px solid var(--paper);
  border-bottom: 2.5px solid var(--paper);
}
.bn-arrow.prev {
  left: 10px;
}
.bn-arrow.prev::before {
  transform: translate(-30%, -50%) rotate(135deg);
}
.bn-arrow.next {
  right: 10px;
}
.bn-arrow.next::before {
  transform: translate(-70%, -50%) rotate(-45deg);
}
.bn-arrow:hover {
  background: rgba(245, 194, 43, 0.25);
}
.bn-arrow[hidden] {
  display: none;
}
.bn-dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 10px;
}
.bn-dots[hidden] {
  display: none;
}
.bn-dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: rgba(255, 246, 224, 0.25);
  cursor: pointer;
  transition:
    width 0.25s var(--ease-out),
    background 0.2s;
}
.bn-dots button.on {
  width: 24px;
  background: var(--gold);
  box-shadow: 0 0 10px rgba(245, 194, 43, 0.6);
}
@media (max-width: 699px) {
  .bn-arrow {
    display: none;
  }
  .bn {
    aspect-ratio: 1.9 / 1;
    border-radius: 18px;
  }
  .bn-track {
    border-radius: 18px;
  }
  .bn-copy {
    width: 60%;
  }
  .bn-art {
    inset: 0 0 0 42%;
  }
}

/* categorias com ícone */
.cats {
  display: flex;
  gap: 10px;
  margin: 18px 0 14px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 2px 2px 4px;
  scroll-snap-type: x proximity;
}
.cats::-webkit-scrollbar {
  display: none;
}
.cat {
  flex: none;
  scroll-snap-align: start;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 7px;
  width: 92px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}
.cat-ico {
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border-radius: 50%;
  color: var(--gold);
  background: radial-gradient(circle at 50% 30%, rgba(245, 194, 43, 0.16), rgba(245, 194, 43, 0.04) 70%), #17130f;
  box-shadow:
    inset 0 0 0 1.5px rgba(245, 194, 43, 0.28),
    0 8px 18px -10px rgba(0, 0, 0, 0.8);
  transition:
    transform 0.2s var(--ease-back),
    background 0.2s,
    color 0.2s,
    box-shadow 0.2s;
}
.cat-ico svg {
  width: 30px;
  height: 30px;
}
.cat-label {
  font-size: 13px;
  font-weight: 800;
  line-height: 1.15;
  text-align: center;
  color: var(--paper);
}
.cat:hover .cat-ico {
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 1.5px var(--gold),
    0 10px 22px -10px rgba(245, 194, 43, 0.5);
}
.cat.on .cat-ico {
  color: var(--ink);
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  box-shadow:
    0 4px 0 var(--gold-deep),
    0 12px 24px -10px rgba(245, 194, 43, 0.6);
}
.cat.on .cat-label {
  color: var(--gold-hi);
}
.cat[data-cat='salas'] .cat-ico {
  color: #ff8a96;
  box-shadow:
    inset 0 0 0 1.5px rgba(227, 25, 47, 0.45),
    0 8px 18px -10px rgba(0, 0, 0, 0.8);
}
@media (min-width: 1024px) {
  .cats {
    justify-content: flex-start;
    flex-wrap: wrap;
    overflow: visible;
  }
}

/* busca */
.search {
  position: relative;
  display: block;
  margin: 0 0 6px;
}
.search input {
  height: 52px;
  padding: 0 52px 0 18px;
  border-radius: 14px;
  font-size: 16px;
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--line-2);
}
.search input::placeholder {
  color: var(--dim);
}
.search svg {
  position: absolute;
  right: 16px;
  top: 50%;
  width: 22px;
  height: 22px;
  transform: translateY(-50%);
  color: var(--muted);
  pointer-events: none;
}
.search input::-webkit-search-cancel-button {
  filter: invert(1) sepia(1) saturate(4) hue-rotate(5deg);
}

/* fileiras */
.rows {
  display: grid;
  gap: 4px;
}
.rows[hidden] {
  display: none;
}
.row {
  margin-top: 18px;
}
.row-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.row-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 26px);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--paper);
}
.row-title::before {
  content: '';
  flex: none;
  width: 9px;
  height: 9px;
  background: var(--gold);
  transform: rotate(45deg);
  box-shadow: 0 0 12px rgba(245, 194, 43, 0.55);
}
.row-more {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: none;
  padding: 6px 4px;
  color: var(--muted);
  font: inherit;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}
.row-more i {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}
.row-more:hover {
  color: var(--gold-hi);
}
.row-track {
  --cw: clamp(132px, calc((100vw - 24px - 3 * 12px) / 2.3), 190px);
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--cw);
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scroll-padding-left: 2px;
  padding: 4px 2px 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(245, 194, 43, 0.3) transparent;
}
@media (min-width: 1024px) {
  .row-track {
    --cw: 188px;
    gap: 16px;
  }
}
/* fileira com pets: espaço em cima para a cabeça deles (a rolagem lateral corta o que passa da fileira) */
.row-track.with-pets {
  padding-top: calc(var(--cw) * 0.62);
}
.gcard {
  position: relative;
  display: block;
  scroll-snap-align: start;
  aspect-ratio: 4 / 5;
  border-radius: 14px;
  text-decoration: none;
  color: var(--paper);
  isolation: isolate;
  background: #0d0a07;
  box-shadow:
    0 16px 28px -16px rgba(0, 0, 0, 0.95),
    inset 0 0 0 1px rgba(245, 194, 43, 0.22);
  transition:
    transform 0.25s var(--ease-out),
    box-shadow 0.25s;
}
.gcard:hover {
  transform: translateY(-4px);
  box-shadow:
    0 22px 36px -16px rgba(0, 0, 0, 1),
    inset 0 0 0 1.5px var(--gold);
}
.gcard:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}
.gc-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  container-type: inline-size;
  background: radial-gradient(ellipse at 50% 32%, #3a2a0c, #0d0a07 72%);
}
.gc-art::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.25) 0%,
    transparent 24%,
    transparent 48%,
    rgba(8, 6, 4, 0.92) 82%,
    #080604 100%
  );
}
.gc-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s var(--ease-out);
}
.gcard:hover .gc-img {
  transform: scale(1.05);
}
.gc-art.has-img > :not(.gc-img) {
  display: none;
}
.gc-art .art-c4 {
  top: 40%;
  width: 64cqi;
}
.gc-art .art-gude {
  top: 40%;
  width: 74cqi;
  height: 37cqi;
}
.gc-tags {
  position: absolute;
  z-index: 2;
  top: 8px;
  left: 8px;
  right: 8px;
  display: flex;
  justify-content: space-between;
  gap: 4px;
  pointer-events: none;
}
.gc-tag {
  padding: 3px 7px 2px;
  border-radius: 6px;
  font-family: var(--display);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--paper);
  background: rgba(8, 6, 4, 0.72);
  box-shadow: inset 0 0 0 1px var(--line-2);
}
.gc-tag.many {
  color: #9ff0c0;
  box-shadow: inset 0 0 0 1px rgba(61, 220, 132, 0.5);
}
.gc-tag.gold {
  color: #241600;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 60%, var(--gold-mid));
  box-shadow: 0 2px 0 var(--gold-deep);
  margin-left: auto;
}
.gc-body {
  position: absolute;
  z-index: 2;
  left: 10px;
  right: 10px;
  bottom: 10px;
}
.gc-title {
  display: block;
  font-family: var(--tag);
  font-weight: 400;
  font-size: clamp(19px, calc(var(--cw, 160px) * 0.14), 28px);
  line-height: 0.95;
  transform: rotate(-3deg);
  transform-origin: 0 100%;
  color: #fff6e0;
}
.gc-title[data-game] {
  background: linear-gradient(170deg, var(--t1) 0%, var(--t2) 48%, var(--t3) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0.035em 0.035em 0 rgba(10, 6, 2, 0.95)) drop-shadow(0 0 0.28em var(--tglow));
  padding-right: 0.08em;
}
.gc-title[data-game='cartas'] {
  background-image: linear-gradient(100deg, #ff4d6d 0%, #ffd23f 35%, #3ddc84 65%, #3d8bff 100%);
}
/* pet preso na borda de cima do cartão (o mesmo do pôster; pisca sozinho e fica feliz com o mouse/dedo) */
.gcard.has-pet .poster-pet {
  top: 0;
  width: 70%;
  z-index: 3;
}
.gcard.has-pet:is(:hover, :focus-visible, :active) .poster-pet:has(.pp-happy) :is(.pp-base, .pp-blink) {
  opacity: 0;
}
.gcard.has-pet:is(:hover, :focus-visible, :active) .poster-pet .pp-happy {
  opacity: 1;
}
.gcard.has-pet:is(:hover, :focus-visible) .poster-pet {
  transform: translate(-50%, -72%) scale(1.04);
}

/* grade completa ("Ver todos", categoria, busca) */
.grid-view {
  margin-top: 18px;
}
.grid-view[hidden] {
  display: none;
}
.grid-view .row-head {
  flex-wrap: wrap;
}
.grid-back {
  margin: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  padding: 6px 0;
}
.grid-view .catalog {
  margin-top: 14px;
}
.grid-empty {
  color: var(--muted);
  font-weight: 700;
  margin: 20px 0;
}
.grid-empty[hidden] {
  display: none;
}

/* salas abertas de todos os jogos */
.rooms-row {
  margin-top: 26px;
}
.rooms-row .row-title .live {
  margin-left: 4px;
  font-family: var(--mono);
}
.hrooms {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: min(300px, 82vw);
  gap: 12px;
  overflow-x: auto;
  padding: 2px 2px 10px;
  scrollbar-width: thin;
  scrollbar-color: rgba(245, 194, 43, 0.3) transparent;
}
.hrooms:empty {
  display: none;
}
.hrooms.loading:empty {
  display: block;
  height: 96px;
  border-radius: 18px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03)) 0
    0 / 200% 100%;
  animation: shimmer 1.2s linear infinite;
}
.hroom {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  gap: 12px;
  padding: 10px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: linear-gradient(170deg, rgba(44, 38, 33, 0.85), rgba(22, 19, 17, 0.92));
  box-shadow: 0 14px 30px -18px rgba(0, 0, 0, 0.8);
  animation: rise 0.35s var(--ease-out) both;
}
.hroom.stake {
  border-color: rgba(245, 194, 43, 0.4);
  background:
    radial-gradient(ellipse at 100% 0%, rgba(242, 193, 78, 0.14), transparent 60%),
    linear-gradient(170deg, rgba(48, 38, 24, 0.9), rgba(22, 18, 13, 0.94));
}
.hroom.mine {
  box-shadow: inset 0 0 0 1.5px var(--gold);
}
.hr-cover {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  border-radius: 12px;
  overflow: hidden;
  background: #1a140e;
}
.hr-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hr-cover::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(8, 6, 4, 0.9));
}
.hr-game {
  position: absolute;
  z-index: 1;
  left: 6px;
  right: 4px;
  bottom: 6px;
  font-family: var(--tag);
  font-weight: 400;
  font-size: 15px;
  line-height: 0.95;
  color: #fff6e0;
  transform: rotate(-3deg);
}
.hr-game[data-game] {
  background: linear-gradient(170deg, var(--t1) 0%, var(--t2) 48%, var(--t3) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0.04em 0.04em 0 rgba(10, 6, 2, 0.95));
}
.hr-body {
  display: grid;
  align-content: center;
  gap: 8px;
  min-width: 0;
}
.hr-owner {
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hr-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  font-size: 13px;
}
.hr-meta em {
  font-style: normal;
  font-family: var(--mono);
  font-weight: 700;
}
.hr-mode {
  font-weight: 800;
  color: var(--muted);
}
.hr-mode.stake {
  color: var(--gold-hi);
}
.hr-go {
  justify-self: start;
  min-width: 104px;
}
.hr-go.armed {
  animation: armed 0.9s ease-in-out infinite;
}
.hrooms-empty {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
  margin: 0;
  padding: 18px;
  border-radius: 18px;
  border: 2px dashed rgba(245, 194, 43, 0.3);
  color: var(--muted);
  font-weight: 700;
  background: rgba(0, 0, 0, 0.18);
}
.hrooms-empty[hidden] {
  display: none;
}

/* ---------- jogo responsável ---------- */
.responsible h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 40px;
}
.responsible h3 .sf-18 {
  color: var(--gold);
}
.resp-list {
  margin: 0;
  padding: 0 0 0 20px;
  display: grid;
  gap: 10px;
  color: var(--paper);
  line-height: 1.45;
  font-weight: 600;
}
.resp-list li::marker {
  color: var(--gold);
}

/* ---------- login: motivo e voltar para os jogos ---------- */
.login-reason {
  margin: 0;
  padding: 12px 16px;
  border-radius: 14px;
  font-weight: 800;
  color: var(--gold-hi);
  background: rgba(245, 194, 43, 0.08);
  border: 1px solid rgba(245, 194, 43, 0.35);
}
.login-reason[hidden] {
  display: none;
}
.login-back {
  justify-self: center;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
}
#login-invite-only b {
  color: var(--gold-hi);
}

/* ---------- celular: topo enxuto ---------- */
@media (max-width: 520px) {
  .bar {
    gap: 8px;
    padding: 10px 12px;
  }
  .bar .wordmark.small .logo {
    height: 30px;
  }
  .btn-deposit {
    padding: 9px 12px;
    font-size: 14px;
    border-radius: 11px;
  }
  .wallet-chip {
    padding: 5px 9px 5px 5px;
    font-size: 13px;
  }
  .cats {
    gap: 6px;
    margin: 14px 0 12px;
  }
  .cat {
    width: 78px;
  }
  .cat-ico {
    width: 56px;
    height: 56px;
  }
  .cat-ico svg {
    width: 27px;
    height: 27px;
  }
  .cat-label {
    font-size: 12px;
  }
  .home {
    padding-top: 12px;
  }
}
/* setas do carrossel: na linha das bolinhas, à direita (não cobrem o texto do banner) */
.bn-arrow {
  top: auto;
  bottom: -6px;
  margin-top: 0;
  width: 32px;
  height: 32px;
}
.bn-arrow.prev {
  left: auto;
  right: 48px;
}
.bn-arrow.next {
  right: 8px;
}
.bn-dots {
  min-height: 22px;
  align-items: center;
}
/* filhos de grade não podem crescer com a fileira que rola de lado (senão a página ganha rolagem lateral) */
.rows > .row,
.home > *,
.row,
.grid-view,
.banners {
  min-width: 0;
}
.home {
  overflow-x: clip;
}
/* PC: o conteúdo ocupa o espaço à direita do menu e fica centralizado nele */
@media (min-width: 1024px) {
  #app > main {
    --main-max: 1160px;
    width: min(var(--main-max), calc(100% - var(--side-w)));
    margin-left: calc(var(--side-w) + max(0px, (100% - var(--side-w) - var(--main-max)) / 2));
    margin-right: 0;
  }
  #app > main.home {
    --main-max: 1280px;
  }
  #app > .site-foot {
    width: calc(100% - var(--side-w));
  }
  body:has(#screen-match:not([hidden])) #app > main {
    width: auto;
    margin-left: 0;
  }
}
.site-foot .sf-18 {
  display: none;
}
/* celular deitado (pouca altura): banner mais baixo e barra de baixo com ícone e nome lado a lado */
@media (orientation: landscape) and (max-height: 560px) {
  .bn {
    aspect-ratio: auto;
    height: min(58svh, 230px);
    min-height: 0;
  }
  .bn-img {
    object-position: center 30%;
  }
  .tabbar button {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
  }
  .tabbar .chip-badge {
    top: 4px;
    right: calc(50% - 30px);
  }
}

/* Bola 8: a mesa usa a tela toda (barra de força e efeito nos cantos); o pet da partida ficaria por cima */
body:has(#screen-match:not([hidden]) .stage[data-game='bola8']) .pet-match {
  display: none;
}

/* =========================================================
   TELA LARGA / ULTRAWIDE: a página inicial é desenhada para 1280 px e CRESCE INTEIRA, proporcional (mesmos 2 banners e
   mesma quantidade de cartões por fileira, tudo maior). O home.js calcula --home-zoom e --home-w pela largura livre.
   ========================================================= */
.home-in,
.home-in > * {
  min-width: 0;
}
@media (min-width: 1024px) {
  #app > main.home {
    --main-max: 100000px;
  }
  .home-in {
    width: var(--home-w, auto);
    zoom: var(--home-zoom, 1);
  }
}
/* categorias e busca: no PC, numa linha só (busca à direita, sem ir de ponta a ponta) e sem crescer tanto quanto os
   banners e cartões na tela larga (no máximo 1,3×) */
@media (min-width: 1024px) {
  .home-tools {
    --tz: calc(min(var(--home-zoom, 1), 1.3) / var(--home-zoom, 1));
    zoom: var(--tz); /* largura automática: o navegador já preenche a linha inteira mesmo com a ampliação */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 28px;
    margin: 18px 0 14px; /* sem espaço ao lado, a busca desce */
  }
  /* as categorias ficam sempre inteiras numa linha; a busca usa o que sobra à direita (até 440 px) */
  .home-tools .cats {
    flex: 0 0 auto;
    flex-wrap: nowrap;
    margin: 0;
  }
  .home-tools .search {
    flex: 1 1 auto;
    max-width: 440px;
    min-width: 220px;
    margin: 0 0 0 auto;
  }
}

/* ------------------------------------------------------------------ páginas de Privacidade e Cookies */
.legal-page {
  padding: 0 16px 32px;
}
.legal-top {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 0;
}
.legal-top .logo {
  height: 40px;
  width: auto;
  display: block;
}
.legal-back {
  color: var(--gold);
  font-weight: 800;
  text-decoration: none;
}
.legal-back:hover {
  text-decoration: underline;
}
.legal {
  max-width: 860px;
  margin: 0 auto;
  padding: 28px clamp(18px, 4vw, 40px);
  line-height: 1.6;
  font-size: 15px;
}
.legal h1 {
  font-family: 'Anton', var(--font);
  font-weight: 400;
  letter-spacing: 0.5px;
  font-size: clamp(30px, 5vw, 42px);
  color: var(--gold);
  margin: 0 0 4px;
}
.legal h2 {
  font-size: 19px;
  margin: 28px 0 8px;
  color: var(--paper);
}
.legal p,
.legal li {
  color: rgba(246, 240, 230, 0.86);
}
.legal a {
  color: var(--gold);
}
.legal code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  background: rgba(255, 240, 220, 0.08);
  padding: 1px 6px;
  border-radius: 6px;
}
.legal-meta {
  color: var(--dim) !important;
  font-weight: 700;
  margin: 0 0 18px;
}
.legal-table {
  overflow-x: auto;
  margin: 10px 0 6px;
}
.legal table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  min-width: 560px;
}
.legal th,
.legal td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
.legal th {
  color: var(--gold);
  font-weight: 800;
  white-space: nowrap;
}
.legal-foot {
  max-width: 860px;
  margin: 18px auto 0;
  text-align: center;
  color: var(--dim);
  font-size: 13px;
  font-weight: 700;
}
.legal-foot a {
  color: var(--dim);
}

/* links de privacidade no rodapé e no menu */
.sf-links {
  display: inline-flex;
  gap: 12px;
}
.sf-links a,
.side-legal a {
  color: var(--dim);
  text-decoration: none;
  font-weight: 700;
}
.sf-links a:hover,
.side-legal a:hover {
  color: var(--paper);
  text-decoration: underline;
}
.side-legal {
  margin: 2px 4px 0;
  font-size: 11px;
  display: flex;
  gap: 10px;
}
.login-legal {
  text-align: center;
  color: var(--dim);
  font-size: 12px;
  margin: 10px 0 0;
}
.login-legal a {
  color: var(--dim);
}

/* aviso de cookies (só cookies essenciais: é aviso, não pedido de consentimento) */
.cookie-note {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + var(--cookie-lift, 0px));
  z-index: 65;
  width: min(640px, calc(100vw - 32px));
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px 12px 16px;
  border-radius: 14px;
  background: rgba(20, 17, 15, 0.97);
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px -10px rgba(0, 0, 0, 0.7);
  font-size: 13px;
  color: rgba(246, 240, 230, 0.86);
}
.cookie-note p {
  margin: 0;
  flex: 1;
  line-height: 1.45;
}
.cookie-note a {
  color: var(--gold);
  font-weight: 700;
}
.cookie-note .btn {
  flex: none;
}
@media (max-width: 767px) {
  .cookie-note {
    --cookie-lift: var(--tab-h);
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
}
@media (max-width: 640px) {
  .legal table {
    min-width: 0;
  }
  .legal thead {
    display: none;
  }
  .legal table,
  .legal tbody,
  .legal tr,
  .legal td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }
  .legal tr {
    padding: 10px 0;
    border-bottom: 1px solid var(--line);
  }
  .legal td {
    border: 0;
    padding: 3px 0;
  }
  .legal td::before {
    content: attr(data-label);
    display: block;
    color: var(--gold);
    font-weight: 800;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
  }
}