/* Conta, convites e fila — as peças que toda página do site tem (conta.js).
   Mesma casa do resto: no hover muda só a borda, sem zoom e sem brilho. */

/* ------------------------------------------------------------------ topo */

.conta-entrar {
  height: calc(52 * var(--u));
  min-height: 34px;
  margin-top: calc(6 * var(--u));
  padding: 0 max(14px, calc(26 * var(--u)));
  border: 1px solid rgb(125 155 255 / 0.85);
  border-radius: calc(14 * var(--u));
  background: linear-gradient(180deg, rgb(38 56 122 / 0.75), rgb(16 24 60 / 0.85));
  color: var(--ink-0);
  font: 400 max(13px, calc(19 * var(--u)))/1 var(--font-serif);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .18s var(--ease);
}

.conta-entrar:hover,
.conta-entrar:focus-visible { border-color: rgb(175 200 255); }

.account[data-menu] { cursor: pointer; transition: border-color .18s var(--ease); }
.account[data-menu]:hover { border-color: rgb(175 200 255 / 0.9); }

.messages__badge[hidden] { display: none; }

/* ------------------------------------------------------------------ menus */

.conta-menu {
  position: fixed;
  inset: auto;
  margin: 0;
  width: max(220px, calc(300 * var(--u)));
  max-width: calc(100vw - 16px);
  padding: max(10px, calc(14 * var(--u)));
  border: 1px solid rgb(150 180 255 / 0.42);
  border-radius: max(8px, calc(10 * var(--u)));
  background: linear-gradient(180deg, rgb(24 32 70 / 0.98), rgb(10 13 32 / 0.98));
  box-shadow: 0 18px 40px rgb(2 4 12 / 0.65);
  color: var(--ink-0);
  font-family: var(--font-serif);
}

.conta-menu--convites { width: max(260px, calc(360 * var(--u))); }

.conta-menu__titulo {
  margin: 0 0 max(8px, calc(10 * var(--u)));
  padding: 0 4px;
  font-size: max(12px, calc(14 * var(--u)));
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.conta-menu__nome {
  margin: 0;
  padding: 2px 6px;
  font-size: max(16px, calc(22 * var(--u)));
  overflow: hidden;
  text-overflow: ellipsis;
}

.conta-menu__founder {
  margin: 2px 0 0;
  padding: 0 6px;
  font-size: max(12px, calc(14 * var(--u)));
  letter-spacing: 0.1em;
  color: var(--founder);
}

.conta-menu__nome + .conta-menu__item,
.conta-menu__founder + .conta-menu__item { margin-top: max(8px, calc(10 * var(--u))); }

.conta-menu__item {
  display: block;
  width: 100%;
  padding: max(8px, calc(9 * var(--u))) 6px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--ink-1);
  font: inherit;
  font-size: max(15px, calc(18 * var(--u)));
  line-height: 1.2;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.conta-menu__item:hover,
.conta-menu__item:focus-visible { background: rgb(120 150 255 / 0.12); color: var(--ink-0); }

.conta-menu__vazio {
  margin: 0;
  padding: 4px 6px 6px;
  font-size: max(14px, calc(16 * var(--u)));
  line-height: 1.45;
  color: var(--ink-2);
}

.conta-convite {
  padding: max(8px, calc(10 * var(--u))) 4px;
  border-top: 1px solid rgb(170 195 255 / 0.12);
}

.conta-menu__titulo + .conta-convite { border-top: 0; }

.conta-convite__texto {
  margin: 0 0 max(8px, calc(10 * var(--u)));
  font-size: max(14px, calc(17 * var(--u)));
  line-height: 1.35;
  color: var(--ink-1);
}

.conta-convite__texto strong { font-weight: 500; color: var(--ink-0); }

.conta-convite__acoes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

/* ---------------------------------------------------------------- botões */

.conta-btn {
  display: grid;
  place-items: center;
  min-height: max(38px, calc(50 * var(--u)));
  padding: 6px max(10px, calc(14 * var(--u)));
  border: 1px solid rgb(150 180 255 / 0.4);
  border-radius: max(8px, calc(10 * var(--u)));
  background: transparent;
  color: var(--ink-1);
  font: 400 max(12px, calc(15 * var(--u)))/1.25 var(--font-serif);
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .18s var(--ease), color .18s var(--ease);
}

.conta-btn:hover,
.conta-btn:focus-visible { border-color: rgb(180 205 255 / 0.9); color: var(--ink-0); }

.conta-btn--principal {
  border-color: rgb(125 155 255 / 0.9);
  background: linear-gradient(180deg, rgb(38 56 122 / 0.85), rgb(16 24 60 / 0.9));
  color: var(--ink-0);
}

.conta-btn:disabled { opacity: 0.5; cursor: wait; }

/* --------------------------------------------------------------- diálogos */

.conta-dialogo {
  width: min(calc(520 * var(--u)), calc(100vw - 32px));
  min-width: min(330px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: max(24px, calc(34 * var(--u))) max(22px, calc(36 * var(--u))) max(20px, calc(28 * var(--u)));
  border: 1px solid rgb(150 180 255 / 0.55);
  border-radius: max(10px, calc(14 * var(--u)));
  background: linear-gradient(180deg, rgb(22 30 66), rgb(9 12 30));
  color: var(--ink-0);
  font-family: var(--font-serif);
  box-shadow: 0 28px 70px rgb(0 2 8 / 0.7);
}

.conta-dialogo::backdrop { background: rgb(2 4 12 / 0.72); backdrop-filter: blur(4px); }

.conta-dialogo__fechar {
  position: absolute;
  top: max(10px, calc(14 * var(--u)));
  right: max(10px, calc(14 * var(--u)));
  width: max(34px, calc(44 * var(--u)));
  height: max(34px, calc(44 * var(--u)));
  padding: 0;
  border: 1px solid rgb(150 180 255 / 0.35);
  border-radius: max(8px, calc(10 * var(--u)));
  background: transparent;
  color: var(--ink-1);
  font: 300 max(20px, calc(26 * var(--u)))/1 system-ui, sans-serif;
  cursor: pointer;
  transition: border-color .18s var(--ease), color .18s var(--ease);
}

.conta-dialogo__fechar:hover { border-color: rgb(180 205 255 / 0.9); color: var(--ink-0); }

.conta-dialogo__kicker {
  margin: 0;
  font-size: max(12px, calc(14 * var(--u)));
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.conta-dialogo__titulo {
  margin: max(8px, calc(10 * var(--u))) 0 max(10px, calc(14 * var(--u)));
  padding-right: max(40px, calc(50 * var(--u)));
  font-size: max(24px, calc(36 * var(--u)));
  font-weight: 400;
  line-height: 1.1;
}

.conta-dialogo__texto,
.conta-dialogo__nota {
  margin: 0;
  font-size: max(15px, calc(18 * var(--u)));
  line-height: 1.5;
  color: var(--ink-2);
}

.conta-dialogo__texto strong { font-weight: 500; color: var(--ink-0); font-variant-numeric: tabular-nums; }

.conta-dialogo__acoes {
  display: grid;
  gap: max(8px, calc(10 * var(--u)));
  margin-top: max(18px, calc(22 * var(--u)));
}

.conta-dialogo__nota {
  margin-top: max(12px, calc(14 * var(--u)));
  font-size: max(13px, calc(15 * var(--u)));
  color: var(--ink-3);
}

/* ------------------------------------------------------------------ aviso */

.conta-toast {
  position: fixed;
  z-index: 20;
  left: 50%;
  bottom: max(20px, calc(40 * var(--u)));
  translate: -50% 0;
  max-width: calc(100vw - 32px);
  margin: 0;
  padding: 10px 18px;
  border: 1px solid rgb(150 180 255 / 0.42);
  border-radius: 9px;
  background: rgb(14 19 44 / 0.96);
  box-shadow: 0 14px 34px rgb(2 4 12 / 0.6);
  color: var(--ink-0);
  font: 400 max(14px, calc(18 * var(--u)))/1.3 var(--font-serif);
  text-align: center;
}

.conta-toast[hidden] { display: none; }

/* ------------------------------------------------------ 1v1 no destaque */

.hero__acoes {
  display: flex;
  align-items: stretch;
  gap: calc(16 * var(--u));
}

.play--1v1 {
  width: auto;
  justify-content: center;
  padding: 0 calc(38 * var(--u));
  border-color: rgb(125 155 255 / 0.55);
  background: linear-gradient(180deg, rgb(24 34 78 / 0.55), rgb(12 18 46 / 0.7));
  box-shadow: none;
  letter-spacing: 0.18em;
}

@media (max-width: 900px), (max-aspect-ratio: 1/1) {
  .hero__acoes .play { width: auto; flex: 1; }
  .hero__acoes .play--1v1 { flex: 0 0 auto; min-width: calc(150 * var(--u)); }
}

/* ------------------------------------------------- campo e lista (ajustes) */

.conta-campo {
  width: 100%;
  margin-top: max(14px, calc(18 * var(--u)));
  padding: max(9px, calc(12 * var(--u))) max(10px, calc(14 * var(--u)));
  border: 1px solid rgb(150 180 255 / 0.4);
  border-radius: max(8px, calc(9 * var(--u)));
  background: rgb(6 9 22 / 0.7);
  color: var(--ink-0);
  font: 400 max(15px, calc(19 * var(--u)))/1.3 var(--font-serif);
}

.conta-campo:focus { outline: none; border-color: rgb(175 200 255 / 0.9); }

.conta-btn--perigo {
  border-color: rgb(217 122 133 / 0.55);
  background: rgb(60 20 32 / 0.35);
  color: #eba5ad;
}

.conta-btn--perigo:hover,
.conta-btn--perigo:focus-visible { border-color: rgb(236 158 168 / 0.95); color: #f8cdd2; }

.bloqueados {
  margin: max(14px, calc(18 * var(--u))) 0 0;
  padding: 0;
  list-style: none;
  max-height: 40vh;
  overflow-y: auto;
}

.bloqueados__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: max(8px, calc(10 * var(--u))) 0;
  border-top: 1px solid rgb(170 195 255 / 0.12);
  font-size: max(15px, calc(19 * var(--u)));
  color: var(--ink-0);
}

.bloqueados__item:first-child { border-top: 0; }

.bloqueados__item .conta-btn { min-height: max(32px, calc(40 * var(--u))); padding: 0 12px; }

.bloqueados__vazio {
  padding: max(10px, calc(12 * var(--u))) 0 0;
  font-size: max(14px, calc(17 * var(--u)));
  color: var(--ink-2);
}