@charset "UTF-8";

/* Peças introduzidas pela fatia estrutural: avatar da Steam, fila de espera,
   veto de mapas e liberação do servidor. O restante segue em styles.css. */

/* ---- Avatar ---- */

img.avatar {
  object-fit: cover;
  border: 1px solid var(--line);
  background: var(--panel-deep);
}

.account-avatar .avatar,
.account-avatar img.avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  font-size: .75rem;
}

.steam-account { align-items: center; }

/* ---- Lobby ---- */

.lobby-slot.occupied:not(.ready) { opacity: .68; }

.lobby-slot.occupied.ready { border-color: color-mix(in srgb, var(--cyan) 45%, var(--line)); }

.lobby-slot.occupied.ready span { color: var(--cyan); }

/* ---- Fila de espera ---- */

.queue { margin-top: 1.4rem; border-top: 1px solid var(--line); padding-top: 1.1rem; }

.queue-title {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 .8rem;
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.queue-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }

.queue-item {
  display: grid;
  grid-template-columns: 2.2rem auto 1fr auto;
  align-items: center;
  gap: .7rem;
  background: var(--panel-deep);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: .5rem .8rem;
}

.queue-item .avatar { width: 1.75rem; height: 1.75rem; font-size: .7rem; }

.queue-position {
  font-family: var(--display);
  font-size: 1.1rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.queue-tag {
  font-size: .78rem;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .15rem .6rem;
  white-space: nowrap;
}

.queue-tag.ready { color: var(--cyan); border-color: color-mix(in srgb, var(--cyan) 45%, var(--line)); }

.queue-note { margin: .8rem 0 0; color: var(--muted); font-size: .85rem; }

/* ---- Tela do veto ---- */

.veto-dialog {
  width: min(96vw, 1100px);
  max-height: 92vh;
  padding: 1.6rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--bg);
  color: var(--text);
  overflow: auto;
}

.veto-dialog::backdrop { background: rgba(6, 11, 14, .82); backdrop-filter: blur(3px); }

.veto-head { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1rem; }
.veto-head h2 { font-family: var(--display); font-size: clamp(1.7rem, 4vw, 2.6rem); letter-spacing: .01em; }
.veto-head .kicker-line {
  margin: 0 0 .2rem;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--copper);
}

.veto-step-count {
  margin-left: auto;
  margin-right: 2.2rem;
  font-family: var(--display);
  font-size: 2.2rem;
  line-height: 1;
  color: var(--cyan);
  font-variant-numeric: tabular-nums;
}
.veto-step-count small {
  display: block;
  font-family: var(--body);
  font-size: .72rem;
  color: var(--muted);
  letter-spacing: .1em;
}

.veto-call {
  margin: 0 0 1.1rem;
  padding: .6rem .9rem;
  border-left: 3px solid var(--line);
  background: var(--panel-deep);
  border-radius: 0 8px 8px 0;
  color: var(--muted);
  font-weight: 600;
}
.veto-call.mine { border-left-color: var(--copper); color: var(--copper); }

.veto-arena { display: grid; grid-template-columns: 13rem 1fr 13rem; gap: 1.1rem; align-items: start; }

.veto-team {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .9rem;
  transition: border-color .2s;
}
.veto-team.active { border-color: var(--copper); }
.veto-team header { display: flex; align-items: center; gap: .5rem; margin-bottom: .7rem; }
.veto-team h3 { font-family: var(--display); font-size: 1.05rem; letter-spacing: .06em; }

.veto-squad { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.veto-squad li { display: flex; align-items: center; gap: .5rem; font-size: .9rem; opacity: .72; }
.veto-squad li.caller { opacity: 1; }
.veto-squad .avatar { width: 1.6rem; height: 1.6rem; font-size: .65rem; }
.veto-squad strong { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.caller-tag {
  margin-left: auto;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--copper);
}

/* ---- Cartas de mapa ---- */

.veto-maps {
  /* Quatro por linha sempre: com sete mapas o corte fica 4+3, sem carta sozinha no fim.
     A carta encolhe junto com o espaço em vez de a linha quebrar em outro número. */
  --colunas: 4;
  --vao: .6rem;
  --carta: min(8.5rem, calc((100cqw - (var(--colunas) - 1) * var(--vao)) / var(--colunas)));

  container-type: inline-size;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: start;
  gap: var(--vao);
}

@container (max-width: 26rem) {
  .veto-maps { --colunas: 3; }
}

.map-card {
  --map-accent: var(--cyan);
  --map-photo: none;

  position: relative;
  display: grid;
  align-content: end;
  gap: .15rem;
  flex: 0 0 var(--carta, 8.5rem);
  aspect-ratio: 3 / 4;
  padding: .65rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--panel-deep);
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: default;
  transition: border-color .15s, transform .15s;
}

/* Sem foto declarada em maps/index.json, a carta se desenha com a grade tática do site. */
.map-card .map-art {
  position: absolute;
  inset: 0;
  background-image:
    var(--map-photo),
    radial-gradient(120% 90% at 70% 20%, color-mix(in srgb, var(--map-accent) 40%, transparent), transparent 62%),
    linear-gradient(165deg, #1d2f38, #111c22);
  background-size: cover, auto, auto;
  background-position: center;
  transition: filter .2s, transform .2s;
}

/* O texto precisa vencer a foto: véu que escurece do rodapé para cima. */
.map-card .map-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(142, 169, 172, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(142, 169, 172, .07) 1px, transparent 1px),
    linear-gradient(0deg, rgba(8, 14, 17, .95) 12%, rgba(8, 14, 17, .45) 45%, rgba(8, 14, 17, .05) 75%);
  background-size: 22px 22px, 22px 22px, auto;
}

.map-card > *:not(.map-art) { position: relative; }

.map-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.1;
}

.map-seal {
  font-size: .64rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.map-seal.pick { color: var(--copper); }
.map-seal.stay { color: var(--cyan); }

/* Carimbo central, como o "pré-vetado" da GC. */
.map-stamp {
  position: absolute;
  inset: 0 0 auto;
  top: 38%;
  translate: 0 -50%;
  text-align: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}
.map-stamp.ban::after {
  content: "";
  display: block;
  width: 1.6rem;
  height: 1.6rem;
  margin: .5rem auto 0;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  rotate: -45deg;
  opacity: .8;
}
.map-stamp.pick { color: var(--copper); }
.map-stamp.stay { color: var(--cyan); }

.map-action {
  position: absolute;
  inset: auto 0 .65rem;
  margin-inline: auto;
  width: fit-content;
  padding: .2rem .7rem;
  border: 1px solid var(--copper);
  border-radius: 999px;
  background: rgba(8, 14, 17, .8);
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--copper);
  opacity: 0;
  transition: opacity .15s;
}

button.map-card { cursor: pointer; }
button.map-card:hover, button.map-card:focus-visible { border-color: var(--copper); transform: translateY(-3px); }
button.map-card:hover .map-art { transform: scale(1.04); }
button.map-card:hover .map-title, button.map-card:focus-visible .map-title { opacity: 0; }
button.map-card:hover .map-action, button.map-card:focus-visible .map-action { opacity: 1; }
button.map-card:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.map-card.banned { border-style: dashed; }
.map-card.banned .map-art { filter: grayscale(1) brightness(.35); }
.map-card.banned .map-title { text-decoration: line-through; color: var(--muted); }
.map-card.picked { border-color: var(--copper); }
.map-card.picked .map-art { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--copper) 55%, transparent); }
.veto-outcome {
  margin: 1rem 0 0;
  padding-top: .9rem;
  border-top: 1px solid var(--line);
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: .03em;
  color: var(--cyan);
}

@media (max-width: 820px) {
  .veto-arena { grid-template-columns: 1fr; }
  .veto-team { order: 2; }
  .veto-maps { order: 1; }
  .veto-step-count { font-size: 1.6rem; }
}


/* ---- Connect ao fim do veto ---- */

.veto-result { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--line); }

.connect-box {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: .5rem .8rem;
  margin-top: .8rem;
  padding: .9rem 1.1rem;
  background: var(--panel);
  border: 1px solid color-mix(in srgb, var(--cyan) 40%, var(--line));
  border-radius: 10px;
}

.connect-label {
  grid-column: 1 / -1;
  margin: 0;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--copper);
}

.connect-line {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: clamp(.95rem, 2vw, 1.2rem);
  color: var(--cyan);
  word-break: break-all;
  user-select: all;
}

.connect-note { grid-column: 1 / -1; margin: 0; font-size: .82rem; color: var(--muted); }

.squad-position {
  font-family: var(--display);
  font-size: .8rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  min-width: 1.2rem;
}

@media (max-width: 820px) {
  .veto-arena { grid-template-columns: 1fr; }
  .veto-team { order: 2; }
  .veto-maps { order: 1; }
  .veto-step-count { font-size: 1.6rem; }
}

/* ---- Identidade dos times ---- */
/* Cada lado ganha um tom próprio: o cobre e o ciano da casa, um para cada. */

.team-panel.team-a { --time: var(--copper); }
.team-panel.team-b { --time: var(--cyan); }
.veto-team#vetoTeamA { --time: var(--copper); }
.veto-team#vetoTeamB { --time: var(--cyan); }

.team-panel { border-top: 3px solid var(--time, var(--line)); }
.team-panel .team-emblem,
.veto-team .team-emblem {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  background: color-mix(in srgb, var(--time, var(--line)) 22%, transparent);
  border: 1px solid var(--time, var(--line));
  color: var(--time, var(--text));
  font-family: var(--display);
  font-weight: 700;
}
.team-panel h2, .veto-team h3 { color: var(--time, var(--text)); }
.team-panel .section-kicker { color: var(--muted); }
.veto-team.active { border-color: var(--time, var(--copper)); }
.veto-team.active .caller-tag { color: var(--time, var(--copper)); }

@media (prefers-reduced-motion: no-preference) {
  .matchup-veil .button { animation: chamada 2.4s ease-in-out infinite; }
  @keyframes chamada {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--copper) 55%, transparent); }
    50% { box-shadow: 0 0 0 .55rem transparent; }
  }
}

/* ---- Time no card do lobby ---- */

.lobby-slot { position: relative; }
.lobby-slot.team-a { --time: var(--copper); }
.lobby-slot.team-b { --time: var(--cyan); }

.lobby-slot.team-a,
.lobby-slot.team-b {
  border-color: color-mix(in srgb, var(--time) 45%, var(--line));
  box-shadow: inset 0 3px 0 0 var(--time);
}

.lobby-slot.team-a span:last-child,
.lobby-slot.team-b span:last-child { color: var(--time); }

.slot-team {
  position: absolute;
  top: .5rem;
  left: .5rem;
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 6px;
  background: color-mix(in srgb, var(--time) 22%, transparent);
  border: 1px solid var(--time);
  color: var(--time);
  font-family: var(--display);
  font-weight: 700;
  font-size: .8rem;
}

/* ---- Chamada sobre o lobby ---- */

.lobby-stage { position: relative; }

.matchup-veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: .45rem;
  padding: 1.2rem;
  text-align: center;
  /* Escurece só o miolo: os cards continuam legíveis nas bordas, com o time à mostra. */
  background: radial-gradient(58% 72% at 50% 50%, rgba(8, 14, 17, .93) 35%, rgba(8, 14, 17, .55) 70%, transparent);
  border-radius: 12px;
}

.veil-kicker {
  margin: 0;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--copper);
}

.veil-maps {
  margin: 0 0 .5rem;
  font-family: var(--display);
  font-size: clamp(1.05rem, 2.4vw, 1.6rem);
  letter-spacing: .03em;
  color: var(--text);
}

.matchup-veil .button { font-size: 1.05rem; padding: .8rem 1.8rem; }
.veil-note { margin: 0; font-size: .8rem; color: var(--muted); }

/* ---- Cronômetro da jogada ---- */

.veto-call-row { display: flex; align-items: stretch; gap: .7rem; margin-bottom: 1.1rem; }
.veto-call-row .veto-call { flex: 1; margin: 0; }

.veto-clock {
  display: grid;
  place-items: center;
  min-width: 4.6rem;
  padding: 0 .9rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-deep);
  font-family: var(--display);
  font-size: 1.6rem;
  font-variant-numeric: tabular-nums;
  color: var(--cyan);
}

.veto-clock.urgente { color: #e07a6f; border-color: color-mix(in srgb, #e07a6f 55%, var(--line)); }

@media (prefers-reduced-motion: no-preference) {
  .veto-clock.urgente { animation: pulsa 1s steps(2, end) infinite; }
  @keyframes pulsa { 50% { opacity: .45; } }
}

/* ---- Ações do organizador ---- */

.admin-actions { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .4rem; }

.admin-chip {
  font: inherit;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .12rem .5rem;
  cursor: pointer;
}

.admin-chip:hover { color: var(--copper); border-color: var(--copper); }
.admin-chip:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }

.queue-item .admin-actions { grid-column: 1 / -1; margin-top: .3rem; }
.veto-squad .admin-chip { margin-left: auto; padding: 0 .35rem; }

/* ---- Mural da vergonha ---- */

.nav-shame { color: #e07a6f; }

.shame-section {
  border-top: 1px solid var(--line);
  padding-block: clamp(2.2rem, 5vw, 3.6rem);
}

/* Dois cartazes lado a lado: o pior de cada time. Abaixo de 46rem eles empilham. */
.shame-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
  gap: 1.2rem;
  align-items: start;
}

.shame-card {
  position: relative;
  display: grid;
  gap: .8rem;
  padding: 1.3rem 1.4rem;
  background: var(--panel-deep);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}

.shame-card.headline {
  border-color: color-mix(in srgb, #e07a6f 50%, var(--line));
  background:
    radial-gradient(90% 120% at 90% 0%, color-mix(in srgb, #e07a6f 14%, transparent), transparent 60%),
    var(--panel);
}

/* Faixa diagonal ao fundo: dá o ar de cartaz pregado na parede. */
.shame-card.headline::before {
  content: "";
  position: absolute;
  inset: -40% -10%;
  background: repeating-linear-gradient(
    -45deg, transparent 0 18px, color-mix(in srgb, #e07a6f 6%, transparent) 18px 36px);
  pointer-events: none;
}

.shame-card > * { position: relative; }

.shame-badge {
  position: absolute;
  top: .9rem;
  right: 1.1rem;
  font-size: 2.2rem;
  line-height: 1;
  filter: grayscale(.2);
}

.shame-rank {
  margin: 0;
  font-size: .68rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #e07a6f;
}

.shame-card:not(.headline) .shame-rank { color: var(--muted); }

.shame-who { display: flex; align-items: center; gap: .9rem; }
.shame-who .avatar { width: 3.4rem; height: 3.4rem; font-size: 1.05rem; }

.shame-name {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.5rem, 3.2vw, 2.1rem);
  letter-spacing: .02em;
  line-height: 1.1;
}

.shame-team { margin: .1rem 0 0; font-size: .78rem; color: var(--muted); }

.shame-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.4rem;
  margin: 0;
  padding: .7rem 0;
  border-block: 1px solid var(--line);
}

.shame-stats div { display: grid; gap: .15rem; }

.shame-stats dt {
  font-size: .66rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.shame-stats dd {
  margin: 0;
  font-family: var(--display);
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
}

.shame-stats .shame-rating { color: #e07a6f; }

.shame-summary { margin: 0; font-size: .88rem; color: var(--muted); line-height: 1.5; }

.shame-sins { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; }

.shame-sin {
  display: flex;
  gap: .7rem;
  padding-left: .7rem;
  border-left: 2px solid color-mix(in srgb, #e07a6f 55%, transparent);
}

.shame-sin-badge { font-size: 1.2rem; line-height: 1.3; filter: grayscale(.25); }

.shame-sin-title {
  margin: 0;
  font-weight: 600;
  font-size: .9rem;
}

.shame-sin-measure {
  margin-left: .35rem;
  font-weight: 400;
  font-size: .82rem;
  color: #e07a6f;
  font-variant-numeric: tabular-nums;
}

.shame-sin-verdict { margin: .1rem 0 0; font-size: .83rem; color: var(--muted); line-height: 1.45; }

.shame-note { margin: 1.2rem 0 0; font-size: .82rem; color: var(--muted); }