/* Koop: o Server está no ar.
   Mundo: gráficos de transmissão de e-sports (scorebug, chyron, selo "ao vivo").
   Contrato em .impeccable/surfaces/; o mundo empresta só tipo, paleta, densidade e o
   movimento de assinatura (o scorebug entra com uma cortina). Controles são os de sempre. */

@font-face { font-family: "Barlow"; src: url("/assets/barlow-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/assets/barlow-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/assets/barlow-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/assets/barlow-condensed-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("/assets/barlow-condensed-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  color-scheme: dark;

  /* Uma escala só, azul de cabine de transmissão. */
  --ink-0: #060a13;
  --ink-1: #0b1220;
  --ink-2: #111a2c;
  --ink-3: #18233a;
  --line: #22304b;
  --line-strong: #2e3f60;
  --text: #e9eef8;
  --text-2: #b0bdd4;
  --text-3: #8391ab;

  /* O time da casa. */
  --statum: #2f6bff;
  --statum-hi: #5b8cff;
  --statum-ink: #ffffff;
  --statum-wash: rgb(47 107 255 / 0.14);
  --statum-press: #2156e0;
  --hover-fill: #22304b;
  --hover-line: #3b4f76;

  /* Estados no ar. */
  --live: #2bd67b;
  --live-ink: #04140b;
  --wake: #ffb020;
  --wake-ink: #1d1300;
  --alert: #ff5466;
  --alert-ink: #1f0307;
  --idle: #50607d;

  --sans: "Barlow", system-ui, sans-serif;
  --cond: "Barlow Condensed", "Barlow", system-ui, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Liberation Mono", monospace;

  --s-1: 0.8125rem;
  --s0: 0.9375rem;
  --s1: 1.125rem;
  --s2: 1.5rem;
  --s3: 2rem;
  --s4: 3rem;

  --u: 8px;
  --radius: 4px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ink-0);
  color: var(--text);
  font: 400 var(--s0) / 1.5 var(--sans);
  font-variant-numeric: tabular-nums;
}

::selection { background: var(--statum); color: var(--statum-ink); }
:focus-visible { outline: 2px solid var(--statum-hi); outline-offset: 2px; }
a { color: var(--statum-hi); text-underline-offset: 3px; }
* { scrollbar-color: var(--line-strong) transparent; scrollbar-width: thin; }

.icon { width: 1.125em; height: 1.125em; flex: none; }
.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;
}

.wrap { width: min(100% - 2 * 16px, 76rem); margin-inline: auto; }

/* Barra do topo */
.top { background: var(--ink-1); border-bottom: 1px solid var(--line); }
.top .wrap { display: flex; align-items: center; gap: calc(var(--u) * 3); min-height: 56px; }
.wordmark {
  display: inline-flex; align-items: center; height: 32px; padding: 0 12px;
  background: var(--statum); color: var(--statum-ink); text-decoration: none;
  font: 700 1.375rem/1 var(--cond); letter-spacing: 0.02em; text-transform: uppercase;
}
.top nav { display: flex; gap: calc(var(--u) * 0.5); flex: 1; }
.top nav a {
  color: var(--text-2); text-decoration: none; font-weight: 500;
  padding: 6px 10px; border-radius: var(--radius);
}
.top nav a:hover { color: var(--text); background: var(--ink-3); }
.top nav a[aria-current="page"] { color: var(--text); box-shadow: inset 0 -2px 0 var(--statum); border-radius: 0; }
.who { color: var(--text-3); font-size: var(--s-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 16rem; }

main { padding-block: calc(var(--u) * 4) calc(var(--u) * 10); }

h1, h2, h3 { margin: 0; font-family: var(--cond); font-weight: 700; line-height: 1.05; letter-spacing: 0.005em; }
h1 { font-size: var(--s3); }
h2 { font-size: var(--s1); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-2); }
p { margin: 0; }
.muted { color: var(--text-3); }

.page-head { display: flex; align-items: end; justify-content: space-between; gap: calc(var(--u) * 2); flex-wrap: wrap; margin-bottom: calc(var(--u) * 3); }
.page-head p { margin-top: 6px; color: var(--text-3); }

/* Aviso das ações */
#aviso:empty { display: none; }
#aviso { margin-bottom: calc(var(--u) * 2); }
.notice {
  display: flex; gap: 10px; align-items: center; padding: 10px 14px;
  background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius);
  animation: notice-in 240ms var(--ease-out);
}
.notice::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--live); flex: none; }
.notice.error { background: rgb(255 84 102 / 0.1); border-color: rgb(255 84 102 / 0.45); }
.notice.error::before { background: var(--alert); }
@keyframes notice-in { from { opacity: 0; transform: translateY(-4px); } }

/* Botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 40px; padding: 0 16px; border-radius: var(--radius);
  font: 600 var(--s0) / 1 var(--sans); cursor: pointer; text-decoration: none;
  background: var(--ink-3); color: var(--text); border: 1px solid var(--line-strong);
  transition: background-color 140ms, border-color 140ms, color 140ms;
}
.btn:hover:not(:disabled) { background: var(--hover-fill); border-color: var(--hover-line); }
.btn.primary { background: var(--statum); border-color: var(--statum); color: var(--statum-ink); }
.btn.primary:hover:not(:disabled) { background: var(--statum-press); border-color: var(--statum-press); }
.btn.danger { background: transparent; border-color: rgb(255 84 102 / 0.55); color: #ff8a96; }
.btn.danger:hover:not(:disabled) { background: rgb(255 84 102 / 0.12); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--text-2); }
.btn.ghost:hover:not(:disabled) { background: var(--ink-3); color: var(--text); }
.btn.small { min-height: 32px; padding: 0 10px; font-size: var(--s-1); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; }
.btn.htmx-request { opacity: 0.6; cursor: progress; }

/* Selo de estado: o único corte diagonal do sistema */
.tag {
  display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 12px 0 10px;
  font: 700 0.8125rem/1 var(--cond); letter-spacing: 0.08em; text-transform: uppercase;
  clip-path: polygon(0 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  background: var(--idle); color: var(--text);
  animation: wipe 320ms var(--ease-out);
}
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
[data-state="online"] .tag { background: var(--live); color: var(--live-ink); }
[data-state="online"] .tag::before { animation: on-air 1.6s ease-in-out infinite; }
:is([data-state="waking"], [data-state="restarting"], [data-state="queued"], [data-state="preparing_machine"], [data-state="draining"]) .tag { background: var(--wake); color: var(--wake-ink); }
:is([data-state="locked"], [data-state="failed"]) .tag { background: var(--alert); color: var(--alert-ink); }

@keyframes wipe { from { clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); } }
@keyframes on-air { 50% { opacity: 0.25; } }

/* Scorebug: a placa do Server na página dele */
.bug {
  position: relative; display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: stretch; background: var(--ink-1); border: 1px solid var(--line);
  border-radius: var(--radius) var(--radius) 0 0; overflow: hidden;
}
.bug-team {
  display: flex; align-items: center; padding: 0 20px; min-width: 9rem;
  background: var(--statum); color: var(--statum-ink);
  font: 700 var(--s1)/1 var(--cond); letter-spacing: 0.06em; text-transform: uppercase;
  animation: wipe 420ms var(--ease-out);
}
.bug-main { display: grid; gap: 8px; align-content: center; padding: 16px 24px; min-width: 0; }
.bug-name {
  font: 700 clamp(2.25rem, 4vw, 3.25rem)/0.95 var(--cond); letter-spacing: 0.005em;
  overflow-wrap: anywhere; margin: 0;
}
.bug-meta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--text-3); font-size: var(--s-1); }
.bug-score {
  display: grid; place-items: center; align-content: center; gap: 6px; padding: 12px 28px;
  background: var(--ink-2); border-left: 1px solid var(--line-strong); min-width: 8.5rem;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.04);
}
.bug-score strong { font: 700 4rem/0.85 var(--cond); }
.bug-score span { color: var(--text-3); font: 700 0.75rem/1 var(--cond); letter-spacing: 0.12em; text-transform: uppercase; }
.bug-team { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18); }
.bug-actions { display: flex; align-items: center; gap: 8px; padding: 0 20px; border-left: 1px solid var(--line); }
.bug-progress { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 4px; background: transparent; }
:is([data-state="waking"], [data-state="restarting"], [data-state="preparing_machine"]) .bug-progress {
  /* Indeterminado: a central não informa quanto falta, então a borda pulsa em vez de encher. */
  background: var(--wake); animation: on-air 1.6s ease-in-out infinite;
}
[data-state="online"] .bug-progress { background: var(--live); }

/* Página do Server: a arte do jogo é o cenário atrás do placar e acompanha o estado:
   dormindo fica apagada, acordando ganha cor, no ar fica inteira. */
.hero-art {
  position: absolute; z-index: 0; top: 57px; left: 0; right: 0; height: 440px;
  overflow: hidden; pointer-events: none;
}
.hero-art img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%;
  filter: grayscale(0.85) brightness(0.42); transition: filter 1200ms cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-art img.art-cs2 { object-position: 80% 30%; }
.hero-art img.art-fivem { object-position: 70% 22%; }
.hero-art::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(0deg, var(--ink-0) 0%, rgb(6 10 19 / 0.75) 30%, rgb(6 10 19 / 0.15) 70%, rgb(6 10 19 / 0.35) 100%),
    linear-gradient(90deg, rgb(6 10 19 / 0.55) 0%, rgb(6 10 19 / 0) 40%);
}
main:has(.hero-art) .hero-plate { position: relative; z-index: 1; margin-top: 210px; }
main:has(.hero-art) .server-grid, main:has(.hero-art) .locked-note { position: relative; z-index: 1; }
main:has(.bug:is([data-state="waking"], [data-state="restarting"], [data-state="queued"], [data-state="preparing_machine"])) .hero-art img {
  filter: grayscale(0.35) brightness(0.65);
}
main:has(.bug[data-state="online"]) .hero-art img { filter: none; }
main:has(.bug[data-state="draining"]) .hero-art img { filter: grayscale(0.5) brightness(0.55); }
main:has(.bug:is([data-state="locked"], [data-state="failed"])) .hero-art img { filter: grayscale(1) brightness(0.35); }
.hero-plate .bug, .hero-plate .chyron { box-shadow: 0 18px 48px rgb(0 0 0 / 0.45); }
@media (prefers-reduced-motion: no-preference) {
  .hero-art { animation: art-in 900ms cubic-bezier(0.16, 1, 0.3, 1) both; }
  .hero-art img { animation: art-drift 9s cubic-bezier(0.16, 1, 0.3, 1) both; }
}
@media (prefers-reduced-motion: reduce) { .hero-art img { transition: none; } }

/* Chyron: o endereço embaixo do scorebug */
.chyron {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px 10px 20px; background: var(--ink-2);
  border: 1px solid var(--line); border-top: 0; border-radius: 0 0 var(--radius) var(--radius);
}
.chyron .label { color: var(--text-3); font-size: var(--s-1); margin-right: 4px; }
/* Em que jogo entrar: ao lado do endereço, que é o que se copia e se compartilha. */
.chyron-build { color: var(--text); font-weight: 600; font-size: var(--s-1); font-variant-numeric: tabular-nums; white-space: nowrap; padding-left: 10px; border-left: 1px solid var(--line-strong); }
.join-build { color: var(--text-2); }
.join-build strong { color: var(--text); font-variant-numeric: tabular-nums; }
.bug-build { color: var(--text-2); font-variant-numeric: tabular-nums; }
.row-build { color: var(--text-3); font-size: var(--s-1); font-variant-numeric: tabular-nums; }
.address { font: 600 1.375rem/1.2 var(--sans); font-variant-numeric: tabular-nums; color: var(--text); letter-spacing: 0.005em; overflow-wrap: anywhere; flex: 1 1 12rem; }

/* Página do Server */
.server-grid { display: grid; gap: calc(var(--u) * 3); margin-top: calc(var(--u) * 3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 60rem) { .server-grid { grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr); } }
.panel { background: var(--ink-1); border: 1px solid var(--line); border-top: 0; border-radius: var(--radius); overflow: hidden; }
/* Cabeçalho de painel como lower-third: faixa da casa no topo, título em caps condensado. */
.panel > header {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 48px; padding: 8px 8px 8px 16px; background: var(--ink-2);
  box-shadow: inset 0 2px 0 var(--statum);
}
.panel > header h2 { color: var(--text); font-size: var(--s1); letter-spacing: 0.06em; display: flex; align-items: center; gap: 10px; }
.panel > header h2::before { content: ""; width: 8px; height: 8px; background: var(--statum); flex: none; }
.panel > .body { padding: 16px; display: grid; gap: 14px; }
.stack { display: grid; gap: calc(var(--u) * 3); align-content: start; }
.locked-note { margin-top: calc(var(--u) * 2); }
.page-head + .notice { margin-bottom: calc(var(--u) * 2); }

.console-panel { display: flex; flex-direction: column; }
@media (min-width: 60rem) { .console-panel { position: sticky; top: 16px; align-self: start; } }
.console { display: flex; gap: 8px; padding: 12px; border-bottom: 1px solid var(--line); }
.console input { font-family: var(--mono); }
.logs {
  height: clamp(14rem, 42vh, 30rem); overflow: auto; padding: 12px 16px; margin: 0;
  background: #04070d; color: #c9d3e6; font: 400 0.8125rem/1.55 var(--mono);
  border-top: 1px solid var(--line);
  white-space: pre-wrap; overflow-wrap: anywhere; border-radius: 0 0 var(--radius) var(--radius);
}
.logs:empty { display: grid; place-items: center; }
.logs:empty::before { content: attr(data-empty); color: var(--text-3); font: 600 var(--s1)/1.2 var(--cond); letter-spacing: 0.04em; text-transform: uppercase; text-align: center; max-width: 24ch; }

/* Formulários */
label { display: grid; gap: 6px; font-weight: 500; color: var(--text-2); font-size: var(--s-1); }
.help { font-weight: 400; color: var(--text-3); font-size: var(--s-1); }
input, select {
  width: 100%; min-height: 40px; padding: 0 12px; border-radius: var(--radius);
  font: 400 var(--s0) var(--sans); color: var(--text);
  background: var(--ink-0); border: 1px solid var(--line-strong);
}
input::placeholder { color: var(--text-3); }
select {
  appearance: none; padding-right: 40px; cursor: pointer;
  background: var(--ink-0) url("/assets/chevron-down.svg") no-repeat right 12px center / 18px;
}
select option { background: var(--ink-1); color: var(--text); }
input:hover, select:hover { border-color: var(--hover-line); }
input:focus-visible, select:focus-visible { outline: none; border-color: var(--statum-hi); box-shadow: 0 0 0 3px var(--statum-wash); }
.check { display: flex; align-items: center; gap: 10px; color: var(--text); font-size: var(--s0); font-weight: 400; }
.check input { width: 18px; min-height: 18px; height: 18px; accent-color: var(--statum); }
.row-form { display: flex; gap: 8px; align-items: end; }
.row-form > label { flex: 1; }
fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 14px; }
fieldset[hidden] { display: none; }
legend { padding: 0; margin-bottom: 10px; font: 700 var(--s-1) var(--sans); color: var(--text-2); text-transform: uppercase; letter-spacing: 0.06em; }

/* Lista: cada Server é uma faixa de placar */
.board { display: grid; gap: 8px; }
.row {
  display: grid; grid-template-columns: 11rem minmax(0, 1fr) auto 5rem auto;
  align-items: center; min-height: 72px; background: var(--ink-1);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  transition: border-color 140ms, background-color 140ms;
}
.row:hover { border-color: var(--line-strong); background: var(--ink-2); }
.row-team {
  align-self: stretch; display: flex; align-items: center; padding: 0 16px;
  background: var(--statum-wash); color: var(--statum-hi);
  font: 700 var(--s0)/1 var(--cond); letter-spacing: 0.06em; text-transform: uppercase;
  border-right: 1px solid var(--line);
}
.row-main { display: grid; gap: 4px; padding: 12px 16px; min-width: 0; }
.row-name { font: 700 var(--s2)/1 var(--cond); color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.row-name:hover { color: var(--statum-hi); }
.row-address { display: flex; align-items: center; gap: 4px; min-width: 0; }
.row-address code { font: 500 var(--s0)/1.2 var(--sans); font-variant-numeric: tabular-nums; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-state { padding: 0 12px; }
.row-score { text-align: center; }
.row-score strong { display: block; font: 700 var(--s2)/1 var(--cond); }
.row-score span { color: var(--text-3); font-size: 0.75rem; }
.row-actions { display: flex; gap: 4px; padding: 0 12px; }

.empty {
  display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) auto; align-items: center; min-height: 88px;
  border: 1px dashed var(--line-strong); border-radius: var(--radius); overflow: hidden;
}
.empty .row-team { color: var(--text-3); background: transparent; border-right: 1px dashed var(--line-strong); }
.empty .row-main p { color: var(--text-2); }
.empty .row-main .row-name { color: var(--text-3); }
.empty > .btn { margin: 0 16px; }

/* Criar Server: a arte do jogo escolhido toma o fundo, como a tela de apresentação de
   uma transmissão; o formulário fica no lado escuro. A troca de jogo entra com a cortina
   da casa (a mesma do scorebug). */
.create { position: relative; z-index: 1; display: grid; gap: calc(var(--u) * 3); max-width: 44rem; }
main:has(.stage) .page-head { position: relative; z-index: 1; }
.stage {
  position: fixed; z-index: 0; top: 57px; right: 0; bottom: 0; width: min(68vw, 1400px);
  overflow: hidden; pointer-events: none; background: var(--ink-0);
}
.stage-art { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity 300ms ease 350ms; }
.stage-art[data-on] { opacity: 1; z-index: 1; transition: none; }
.stage-art img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  filter: saturate(1.08) contrast(1.04);
}
.art-cs2 img { object-position: 82% 40%; }
.art-fivem img { object-position: 70% 30%; }
.art-minecraft-java img { object-position: 50% 40%; }
/* O lado do formulário escurece até o fundo da página; a base também, para o título. */
.stage-art::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, var(--ink-0) 0%, rgb(6 10 19 / 0.88) 18%, rgb(6 10 19 / 0.35) 48%, rgb(6 10 19 / 0) 70%),
    linear-gradient(0deg, var(--ink-0) 0%, rgb(6 10 19 / 0.7) 22%, rgb(6 10 19 / 0) 50%),
    linear-gradient(180deg, rgb(6 10 19 / 0.6) 0%, rgb(6 10 19 / 0) 18%);
}
.stage-art figcaption {
  position: absolute; z-index: 1; right: clamp(24px, 4vw, 64px); bottom: clamp(32px, 7vh, 72px);
  display: grid; justify-items: end; gap: 10px; max-width: 34rem; text-align: right;
}
.stage-art figcaption strong {
  font: 700 clamp(2.75rem, 5.2vw, 5.5rem)/0.9 var(--cond); letter-spacing: -0.01em; text-transform: uppercase;
  color: #fff; text-wrap: balance; text-shadow: 0 2px 24px rgb(0 0 0 / 0.45);
}
@media (prefers-reduced-motion: no-preference) {
  .stage-art[data-on] img { animation: art-in 900ms cubic-bezier(0.16, 1, 0.3, 1) both, art-drift 9s cubic-bezier(0.16, 1, 0.3, 1) both; }
  .stage-art[data-on] figcaption strong { animation: curtain 650ms cubic-bezier(0.16, 1, 0.3, 1) 180ms both; }
}
@keyframes art-in { from { clip-path: inset(0 0 0 100%); } to { clip-path: inset(0 0 0 0); } }
@keyframes art-drift { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes curtain { from { clip-path: inset(0 0 0 100%); opacity: 0.4; } to { clip-path: inset(0 0 0 0); opacity: 1; } }

/* Os jogos como cartazes: a arte de cada um, apagada até ser escolhida. */
.games { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); }
.game {
  position: relative; display: grid; gap: 4px; align-content: end; min-height: 72px; padding: 14px 16px; cursor: pointer;
  background: var(--ink-1); border: 1px solid var(--line-strong); border-radius: var(--radius);
  color: var(--text); font-size: var(--s0); overflow: hidden; isolation: isolate;
  transition: border-color 150ms ease, transform 150ms cubic-bezier(0.16, 1, 0.3, 1);
}
.game.has-art { min-height: 116px; }
.game-thumb {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(0.7) brightness(0.5); transition: filter 250ms ease, transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}
.game.art-cs2 .game-thumb { object-position: 88% 35%; }
.game.art-fivem .game-thumb { object-position: 72% 30%; }
.game.has-art::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgb(6 10 19 / 0.92) 0%, rgb(6 10 19 / 0.25) 70%);
}
.game input { position: absolute; opacity: 0; pointer-events: none; }
.game strong { font: 700 var(--s1)/1.1 var(--cond); letter-spacing: 0.02em; text-transform: uppercase; text-shadow: 0 1px 8px rgb(0 0 0 / 0.5); }
.game .help { color: var(--text-2); }
.game:hover .game-thumb { filter: grayscale(0.2) brightness(0.7); }
.game:has(input:checked) { border-color: var(--statum); box-shadow: inset 0 0 0 1px var(--statum), 0 8px 24px rgb(47 107 255 / 0.25); }
.game:has(input:checked) .game-thumb { filter: none; transform: scale(1.04); }
.game:has(input:checked)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--statum);
}
.game:has(input:focus-visible) { outline: 2px solid var(--statum-hi); outline-offset: 2px; }
.game[aria-disabled="true"] { cursor: not-allowed; opacity: 0.55; }
.game[aria-disabled="true"] .game-thumb { filter: grayscale(1) brightness(0.4); }
@media (prefers-reduced-motion: reduce) { .game, .game-thumb { transition: none; } }
.two { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }

/* Celular e tablet: a arte vira uma faixa no topo, atrás do título. */
@media (max-width: 960px) {
  .stage { position: absolute; top: 57px; left: 0; right: 0; bottom: auto; width: auto; height: 300px; }
  .stage-art::after {
    background: linear-gradient(0deg, var(--ink-0) 0%, rgb(6 10 19 / 0.55) 45%, rgb(6 10 19 / 0.15) 100%);
  }
  .stage { height: 240px; }
  .stage-art figcaption { display: none; }
  main:has(.stage) .page-head { margin-top: 120px; }
  main:has(.stage) .page-head h1 { font-size: 2.25rem; text-shadow: 0 2px 16px rgb(0 0 0 / 0.6); }
  .games { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .game { padding: 10px; }
  .game.has-art { min-height: 92px; }
  .game strong { font-size: 0.95rem; }
}

.game-options { border: 1px solid var(--line); border-radius: var(--radius); background: var(--ink-1); }
.game-options summary { padding: 12px 14px; cursor: pointer; color: var(--text-2); font-weight: 600; }
.game-options[open] summary { border-bottom: 1px solid var(--line); }
.game-options > .two { padding: 14px; }
.notice-action { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: space-between; }

/* Admin */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: calc(var(--u) * 3); overflow-x: auto; }
.tabs a { padding: 10px 14px; color: var(--text-2); text-decoration: none; font-weight: 500; white-space: nowrap; }
.tabs a:hover { color: var(--text); }
.tabs a[aria-current="page"] { color: var(--text); box-shadow: inset 0 -2px 0 var(--statum); }
.table-wrap { overflow-x: auto; background: var(--ink-1); border: 1px solid var(--line); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: var(--s-1); }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tr:last-child td { border-bottom: 0; }
th { color: var(--text-3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.75rem; background: var(--ink-2); }
td .row-form input { min-height: 32px; width: 6.5rem; }
.cell-name { font-weight: 600; color: var(--text); }
.pill { display: inline-block; padding: 2px 8px; border-radius: 2px; font-size: 0.75rem; font-weight: 600; background: var(--ink-3); color: var(--text-2); }
.pill.alert { background: rgb(255 84 102 / 0.15); color: #ff8a96; }
.pill.blue { background: var(--statum-wash); color: var(--statum-hi); }

/* Entrada: abre como a vinheta de uma transmissão. As artes dos jogos se revezam com a
   cortina da casa e a barra de progresso; depois o letreiro dos jogos passa, e o placar
   de exemplo mostra o que só o Koop faz: dormir, acordar e entrar no ar sozinho. */
.intro { min-height: calc(100svh - 57px - var(--u) * 4); display: grid; align-items: center; }
.intro-reel { position: absolute; z-index: 0; top: 57px; left: 0; right: 0; height: calc(100svh - 57px); overflow: hidden; background: var(--ink-0); }
.reel-slide { position: absolute; inset: 0; margin: 0; }
.reel-slide img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.reel-slide.art-cs2 img { object-position: 80% 30%; }
.reel-slide.art-fivem img { object-position: 72% 25%; }
.reel-slide::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, var(--ink-0) 0%, rgb(6 10 19 / 0.86) 26%, rgb(6 10 19 / 0.3) 58%, rgb(6 10 19 / 0.05) 80%),
    linear-gradient(0deg, var(--ink-0) 0%, rgb(6 10 19 / 0) 30%);
}
.reel-slide figcaption {
  position: absolute; z-index: 5; right: clamp(24px, 4vw, 64px); bottom: clamp(56px, 10vh, 96px);
  display: grid; justify-items: end; gap: 8px; text-align: right;
}
.reel-slide figcaption span { padding: 6px 12px; background: var(--statum); color: var(--statum-ink); font: 700 var(--s-1)/1 var(--cond); letter-spacing: 0.08em; text-transform: uppercase; }
.reel-slide figcaption strong { font: 700 clamp(3rem, 6vw, 6rem)/0.9 var(--cond); text-transform: uppercase; color: #fff; text-shadow: 0 2px 24px rgb(0 0 0 / 0.5); }
.reel-bars { position: absolute; z-index: 6; right: clamp(24px, 4vw, 64px); bottom: clamp(28px, 5vh, 48px); display: flex; gap: 6px; }
.reel-bar { display: block; width: 56px; height: 3px; background: rgb(255 255 255 / 0.22); overflow: hidden; }
.reel-bar::after { content: ""; display: block; height: 100%; background: #fff; transform: scaleX(0); transform-origin: left; }
/* Sem animação: o primeiro jogo fica, parado. */
.reel-slide { opacity: 0; }
.reel-slide.reel-1 { opacity: 1; }
.reel-bar.reel-1::after { transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .reel-slide { animation: reel 18s linear infinite both; }
  .reel-slide img { animation: reel-drift 18s linear infinite both; }
  .reel-slide figcaption { animation: reel-caption 18s linear infinite both; }
  .reel-bar::after { animation: reel-bar 18s linear infinite both; }
  .reel-bar.reel-1::after { transform: scaleX(0); }
  .reel-2, .reel-2 img, .reel-2 figcaption, .reel-bar.reel-2::after { animation-delay: 6s; }
  .reel-3, .reel-3 img, .reel-3 figcaption, .reel-bar.reel-3::after { animation-delay: 12s; }
}
/* Cada jogo: entra pela cortina (0–4%), fica (até 33%), some por baixo do próximo. */
@keyframes reel {
  0% { opacity: 1; z-index: 3; clip-path: inset(0 0 0 100%); }
  4% { clip-path: inset(0 0 0 0); }
  33% { opacity: 1; z-index: 3; }
  34% { z-index: 1; }
  38%, 100% { opacity: 0; z-index: 1; clip-path: inset(0 0 0 0); }
}
@keyframes reel-drift { 0% { transform: scale(1.1); } 38%, 100% { transform: scale(1); } }
@keyframes reel-caption {
  0%, 3% { clip-path: inset(0 0 0 100%); }
  7%, 30% { clip-path: inset(0 0 0 0); }
  33%, 100% { clip-path: inset(0 0 0 100%); }
}
@keyframes reel-bar { 0% { transform: scaleX(0); } 33.3% { transform: scaleX(1); } 33.4%, 100% { transform: scaleX(0); } }

.intro-copy { position: relative; z-index: 1; display: grid; justify-items: start; gap: 0; padding-block: calc(var(--u) * 8); }
.intro-copy h1 .line { display: block; }
.intro-copy h1 { font-size: clamp(3.25rem, 7.5vw, 6rem); line-height: 0.9; max-width: 13ch; text-transform: uppercase; text-wrap: balance; text-shadow: 0 2px 24px rgb(0 0 0 / 0.5); }
.intro-copy .lede { margin-top: 20px; color: var(--text); font-size: var(--s1); max-width: 38ch; text-shadow: 0 1px 12px rgb(0 0 0 / 0.6); }
.intro-copy .btn, .closing .btn { margin-top: 32px; min-height: 52px; padding: 0 26px; font-size: var(--s1); box-shadow: 0 12px 32px rgb(47 107 255 / 0.35); }
@media (prefers-reduced-motion: no-preference) {
  .intro-copy > * { animation: rise-in 700ms cubic-bezier(0.16, 1, 0.3, 1) both; }
  .intro-copy .lede { animation-delay: 120ms; }
  .intro-copy .btn { animation-delay: 220ms; }
}
@keyframes rise-in { from { opacity: 0; transform: translateY(12px); } }

/* Letreiro: os jogos passando, de ponta a ponta da tela. */
.ticker {
  position: relative; z-index: 1; width: 100vw; margin-left: calc(50% - 50vw); overflow: hidden;
  border-block: 1px solid var(--line); background: var(--ink-1);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ticker-track { display: flex; gap: 12px; width: max-content; margin: 0; padding: 14px 0; list-style: none; }
.ticker-item {
  position: relative; isolation: isolate; display: flex; align-items: end; width: 22rem; height: 8.5rem; padding: 14px 16px;
  border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; flex: none;
}
.ticker-item img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.ticker-item.art-cs2 img { object-position: 88% 35%; }
.ticker-item.art-fivem img { object-position: 72% 30%; }
.ticker-item::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgb(6 10 19 / 0.92), rgb(6 10 19 / 0.1) 75%); }
.ticker-item div { display: grid; gap: 4px; }
.ticker-item strong { font: 700 var(--s2)/1 var(--cond); text-transform: uppercase; color: #fff; }
.ticker-item span { font-size: 0.8125rem; line-height: 1.35; color: var(--text-2); }
@media (prefers-reduced-motion: no-preference) {
  .ticker-track { animation: ticker 48s linear infinite; }
  .ticker:hover .ticker-track { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) { .ticker-track { flex-wrap: wrap; justify-content: center; width: auto; } .ticker-item[aria-hidden] { display: none; } }
/* Quatro voltas na faixa: andar uma volta (um quarto) emenda sem salto. */
@keyframes ticker { to { transform: translateX(calc(-25% - 3px)); } }

/* Prova: o placar de exemplo dorme, acorda e entra no ar; a arte ganha cor junto. */
.proof {
  display: grid; gap: calc(var(--u) * 6); align-items: center; padding-block: calc(var(--u) * 14);
}
@media (min-width: 60rem) { .proof { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
.proof h2, .closing h2 { color: var(--text); }
.proof h2 { font-size: clamp(2.25rem, 4vw, 3.5rem); line-height: 0.95; text-transform: uppercase; max-width: 14ch; text-wrap: balance; }
.steps { margin: 32px 0 0; padding: 0; list-style: none; display: grid; gap: 20px; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: 2px 14px; counter-increment: step; }
.steps li::before {
  content: counter(step); grid-row: span 2; display: grid; place-items: center; width: 2.5rem; height: 2.5rem;
  background: var(--statum); color: var(--statum-ink); font: 700 var(--s1)/1 var(--cond);
}
.steps strong { font: 700 var(--s1)/1.2 var(--cond); text-transform: uppercase; letter-spacing: 0.02em; }
.steps span { color: var(--text-2); max-width: 44ch; }
.proof-demo { position: relative; display: grid; gap: 0; padding: clamp(80px, 12vw, 160px) clamp(16px, 3vw, 32px) 20px; border-radius: var(--radius); overflow: hidden; isolation: isolate; border: 1px solid var(--line); }
.proof-art { position: absolute; inset: 0; z-index: -1; }
.proof-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: grayscale(0.85) brightness(0.42); }
.proof-art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(6 10 19 / 0.9), rgb(6 10 19 / 0.1) 70%); }
.proof-demo .bug, .proof-demo .chyron { box-shadow: 0 18px 48px rgb(0 0 0 / 0.45); }
.proof-demo .note { margin-top: 10px; color: var(--text-2); font-size: 0.75rem; }
.demo-states { position: relative; }
.demo-states .tag { display: none; }
.demo-states .demo-live { display: inline-flex; }
.demo-score strong { display: inline-grid; }
.demo-score strong > span { grid-area: 1 / 1; font: inherit; color: inherit; letter-spacing: inherit; text-transform: none; }
.demo-score .demo-zero { visibility: hidden; }
.demo-bug .demo-progress { background: var(--live); }
.demo-states .demo-live::before { animation: on-air 1.6s ease-in-out infinite; }
.demo-sleep { background: var(--idle); color: var(--text); }
.demo-wake { background: var(--wake); color: var(--wake-ink); }
.demo-live { background: var(--live); color: var(--live-ink); }
.proof-art img { filter: none; }
@media (prefers-reduced-motion: no-preference) {
  .demo-states .tag { display: inline-flex; position: absolute; left: 0; top: 50%; translate: 0 -50%; }
  .demo-states { min-height: 26px; min-width: 9rem; }
  .demo-sleep { animation: demo-sleep 12s step-end infinite; }
  .demo-wake { animation: demo-wake 12s step-end infinite; }
  .demo-live { animation: demo-live 12s step-end infinite; }
  .demo-score .demo-zero { animation: demo-zero 12s step-end infinite; }
  .demo-score .demo-three { animation: demo-three 12s step-end infinite; }
  .proof-art img { animation: demo-art 12s cubic-bezier(0.16, 1, 0.3, 1) infinite; }
  .demo-bug .demo-progress { animation: demo-progress 12s step-end infinite; }
}
@keyframes demo-sleep { 0% { visibility: visible; } 35%, 100% { visibility: hidden; } }
@keyframes demo-wake { 0% { visibility: hidden; } 35% { visibility: visible; } 55%, 100% { visibility: hidden; } }
@keyframes demo-live { 0% { visibility: hidden; } 55% { visibility: visible; } 100% { visibility: visible; } }
@keyframes demo-zero { 0% { visibility: visible; } 62%, 100% { visibility: hidden; } }
@keyframes demo-three { 0% { visibility: hidden; } 62%, 100% { visibility: visible; } }
@keyframes demo-progress { 0% { background: transparent; opacity: 1; } 35% { background: var(--wake); } 55%, 100% { background: var(--live); } }
@keyframes demo-art {
  0%, 30% { filter: grayscale(0.85) brightness(0.42); }
  45% { filter: grayscale(0.35) brightness(0.65); }
  60%, 96% { filter: none; }
  100% { filter: grayscale(0.85) brightness(0.42); }
}

.closing {
  display: grid; justify-items: center; gap: 0; padding: calc(var(--u) * 12) 0 calc(var(--u) * 16); text-align: center;
  border-top: 1px solid var(--line);
}
.closing h2 { font-size: clamp(2rem, 3.5vw, 3rem); text-transform: uppercase; text-wrap: balance; }

@media (max-width: 47.99rem) {
  .intro { min-height: calc(78svh - var(--u) * 4); }
  .intro-reel { height: 78svh; }
  .reel-slide::after { background: linear-gradient(0deg, var(--ink-0) 5%, rgb(6 10 19 / 0.75) 45%, rgb(6 10 19 / 0.25) 100%); }
  .reel-slide figcaption { top: 20px; bottom: auto; right: 16px; }
  .reel-slide figcaption strong { font-size: 2rem; }
  .reel-bars { top: 20px; bottom: auto; left: 16px; right: auto; }
  .reel-bar { width: 32px; }
  .intro-copy { align-self: end; padding-block: 0 calc(var(--u) * 6); }
  .ticker-item { width: 16rem; height: 7rem; }
  .proof { padding-block: calc(var(--u) * 8); }
}

.message { max-width: 36rem; display: grid; gap: 16px; padding-block: calc(var(--u) * 10); }

/* Lista com arte: cada Server é um cartaz do jogo (a conta tem poucos), com a arte
   apagada enquanto dorme e inteira no ar, como na página do Server. */
.board:has(.row.has-art) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 30rem), 1fr)); gap: 16px; }
.row.has-art {
  position: relative; isolation: isolate; min-height: 260px; padding: 18px 20px; gap: 0 16px;
  grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto auto;
  grid-template-areas: "team state" ". ." "main score" "main actions";
  align-items: end; background: var(--ink-0); border-color: var(--line-strong);
  transition: border-color 150ms ease, transform 200ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 200ms ease;
}
.row.has-art:hover { border-color: var(--statum); transform: translateY(-2px); box-shadow: 0 16px 40px rgb(0 0 0 / 0.45); background: var(--ink-0); }
.row-art {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%;
  filter: grayscale(0.85) brightness(0.42); transition: filter 900ms cubic-bezier(0.16, 1, 0.3, 1), transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}
.row-art.art-cs2 { object-position: 82% 30%; }
.row-art.art-fivem { object-position: 70% 22%; }
.row.has-art::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgb(6 10 19 / 0.95) 0%, rgb(6 10 19 / 0.55) 40%, rgb(6 10 19 / 0.1) 75%, rgb(6 10 19 / 0.4) 100%);
}
.row.has-art:is([data-state="waking"], [data-state="restarting"], [data-state="queued"], [data-state="preparing_machine"]) .row-art { filter: grayscale(0.35) brightness(0.65); }
.row.has-art[data-state="online"] .row-art { filter: none; }
.row.has-art:hover .row-art { transform: scale(1.03); }
.row.has-art[data-state="online"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--live); }
.row.has-art .row-team {
  grid-area: team; align-self: start; justify-self: start; min-height: 0; padding: 6px 10px;
  background: var(--statum); color: var(--statum-ink); border: 0; font-size: var(--s-1);
}
.row.has-art .row-state { grid-area: state; align-self: start; padding: 0; }
.row.has-art .row-main { grid-area: main; padding: 0; }
.row.has-art .row-name { font-size: clamp(2rem, 3.2vw, 2.75rem); text-shadow: 0 2px 16px rgb(0 0 0 / 0.6); }
.row.has-art .row-address code { color: var(--text); }
.row.has-art .row-score { grid-area: score; text-align: right; }
.row.has-art .row-score strong { font-size: var(--s3); }
.row.has-art .row-score span { color: var(--text-2); }
.row.has-art .row-actions { grid-area: actions; padding: 8px 0 0; justify-content: end; }
@media (prefers-reduced-motion: reduce) { .row.has-art, .row-art { transition: none; } .row.has-art:hover { transform: none; } }
.slot { display: none; }
.board:has(.row.has-art) .slot {
  display: grid; place-content: center; justify-items: center; gap: 8px; min-height: 260px; padding: 24px;
  border: 1px dashed var(--line-strong); border-radius: var(--radius); color: var(--text-2); text-decoration: none; text-align: center;
  transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease;
}
.slot .icon { width: 28px; height: 28px; color: var(--statum-hi); }
.slot strong { font: 700 var(--s2)/1 var(--cond); text-transform: uppercase; letter-spacing: 0.02em; color: var(--text); }
.slot span { font-size: var(--s-1); }
.slot:hover { border-color: var(--statum); background: var(--statum-wash); color: var(--text); }
.slot:focus-visible { outline: 2px solid var(--statum-hi); outline-offset: 2px; }
@media (max-width: 47.99rem) { .board:has(.row.has-art) .slot { min-height: 120px; } }

/* Celular */
@media (max-width: 47.99rem) {
  .who { display: none; }
  .bug { grid-template-columns: minmax(0, 1fr) auto; }
  .bug-team { grid-column: 1 / -1; min-height: 32px; padding: 0 16px; font-size: var(--s0); }
  .bug-main { padding: 14px 16px; }
  .bug-score { border-left: 1px solid var(--line); padding: 0 16px; min-width: 5.5rem; }
  .bug-score strong { font-size: var(--s3); }
  .bug-actions { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--line); padding: 10px 12px; flex-wrap: wrap; }
  .bug-actions .btn { flex: 1; }
  .chyron { padding: 10px 12px; }
  .chyron .label { display: none; }
  .address { font-size: var(--s0); flex-basis: 100%; }
  .logs { height: 16rem; }
  .empty { grid-template-columns: minmax(0, 1fr); }
  .empty .row-team { min-height: 28px; border-right: 0; border-bottom: 1px dashed var(--line-strong); }
  .empty > .btn { margin: 0 16px 16px; }
  .bug-score strong { font-size: var(--s4); }
  .row:not(.has-art) { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "team team" "main score" "state actions"; }
  .row.has-art { min-height: 220px; padding: 14px 16px; }
  .row:not(.has-art) .row-team { grid-area: team; min-height: 28px; border-right: 0; border-bottom: 1px solid var(--line); font-size: var(--s-1); }
  .hero-art { height: 300px; }
  main:has(.hero-art) .hero-plate { margin-top: 120px; }
  .row:not(.has-art) .row-main { grid-area: main; }
  .row:not(.has-art) .row-score { grid-area: score; padding-right: 16px; }
  .row:not(.has-art) .row-state { grid-area: state; padding: 0 16px 12px; }
  .row:not(.has-art) .row-actions { grid-area: actions; padding: 0 12px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  :is([data-state="waking"], [data-state="restarting"], [data-state="preparing_machine"]) .bug-progress { opacity: 0.6; }
}
.more { margin-top: 16px; }

/* Mods e plugins (Add-ons): lista do que está no Server, rascunho e busca no Modrinth. */
#mods > .body { padding: 16px; display: grid; gap: 14px; }
.addons-search { border-top: 1px solid var(--line); }
/* Com o painel de mods embaixo, o console deixa de grudar no topo ao rolar. */
.main-col:has(#mods) .console-panel { position: static; }
/* Rascunho: a decisão do painel, na cor da casa (lavada), sem barra lateral. */
.addons-draft {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; background: var(--statum-wash); border: 1px solid var(--statum);
  border-radius: var(--radius);
}
.addons-draft-text { display: grid; gap: 2px; }
.addons-draft-text strong { font: 700 var(--s1)/1.1 var(--cond); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text); }
.addons-summary { color: var(--statum-hi); font-weight: 600; font-variant-numeric: tabular-nums; }
.addons-memory {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  padding: 10px 12px; background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius);
  font-size: var(--s-1); color: var(--text-2);
}
.addons-memory span { flex: 1 1 16rem; }
.addons-memory .icon { color: var(--text-3); }
.addons-trying { font-size: var(--s-1); color: var(--text-2); }
.addons-row-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.addon-list, .found-list { list-style: none; margin: 0; padding: 0; display: grid; border: 1px solid var(--line); border-radius: var(--radius); }
.addon, .found {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border-bottom: 1px solid var(--line);
}
.addon:last-child, .found:last-child { border-bottom: 0; }
.addon-main, .found-main { display: grid; gap: 2px; min-width: 0; }
.addon-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; color: var(--text); }
/* "entra", "sai", "modpack": um rótulo de placar, sem caixa. */
.addon-change { font: 700 0.75rem/1 var(--cond); letter-spacing: 0.08em; text-transform: uppercase; color: var(--statum-hi); }
.addon-version { font-size: var(--s-1); color: var(--text-2); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.addon-newer { color: var(--statum-hi); font-variant-numeric: tabular-nums; }
.addon.is-removed .addon-title strong, .addon.is-removed .addon-version { text-decoration: line-through; color: var(--text-3); }
.addon.is-removed .addon-change { color: var(--text-3); }
.addon-pack { background: var(--ink-2); }
/* Abas Modpack / Mods sem script: rádios escondidos e rótulos como abas. */
.mod-tab-bar { margin: 0; padding: 0 16px; }
.mod-tab-bar label { padding: 12px 14px; color: var(--text-2); font-weight: 500; cursor: pointer; white-space: nowrap; }
.mod-tab-bar label:hover { color: var(--text); }
.mod-tabs:has(#tab-pack:checked) label[for="tab-pack"],
.mod-tabs:has(#tab-mods:checked) label[for="tab-mods"] { color: var(--text); box-shadow: inset 0 -2px 0 var(--statum); }
.mod-tabs:has(#tab-pack:focus-visible) label[for="tab-pack"],
.mod-tabs:has(#tab-mods:focus-visible) label[for="tab-mods"] { outline: 2px solid var(--statum-hi); outline-offset: -2px; }
.mod-tabs:has(#tab-pack:checked) .tab-mods-panel,
.mod-tabs:has(#tab-mods:checked) .tab-pack-panel { display: none; }
.tab-pack-panel { padding: 16px; display: grid; gap: 12px; }
.pack-head { display: grid; gap: 4px; }
.pack-mods { max-height: 28rem; overflow: auto; }
.addons-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.addons-foot { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--line); }
.addons-updates { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.addons-foot-title { font: 700 var(--s-1)/1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); }
.found-icon { width: 40px; height: 40px; flex: none; border-radius: var(--radius); background: var(--ink-3); object-fit: cover; }
.found { justify-content: flex-start; }
.found-main { flex: 1 1 0; }
.found > form, .found > .pill { margin-left: auto; }
.found-main .help { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pack-choice { grid-template-columns: none; cursor: pointer; font-weight: 400; }
.pack-choice input { width: 18px; min-height: 18px; height: 18px; flex: none; accent-color: var(--statum); }
.pack-choice:has(input:checked) { background: var(--statum-wash); }
.minecraft-extra { display: grid; gap: 14px; }
.minecraft-extra:empty { display: none; }
/* Criar: abas Modpack / Mods (ou só Plugins) e os mods escolhidos. */
.create-addons { border: 1px solid var(--line); border-radius: var(--radius); background: var(--ink-1); }
.create-addons .tab-mods-panel, .create-plugins { padding: 16px; display: grid; gap: 12px; }
.create-plugins h3 { font: 700 var(--s-1)/1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); }
.create-addons #modpacks, .create-addons #new-mods { max-height: 22rem; overflow: auto; }
.create-addons #modpacks:empty, .create-addons #new-mods:empty { display: none; }
.found > button { margin-left: auto; }
.chosen { display: flex; flex-wrap: wrap; gap: 8px; }
.chosen:empty { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px;
  border: 1px solid var(--statum); border-radius: var(--radius); background: var(--statum-wash);
  color: var(--text); font-size: var(--s-1); font-weight: 600; cursor: pointer;
}
.chip input { width: 16px; min-height: 16px; height: 16px; accent-color: var(--statum); }
.chip:has(input:not(:checked)) { border-color: var(--line); background: transparent; color: var(--text-3); text-decoration: line-through; }
/* Resumo "Vamos criar": o que vai ser criado, logo acima do Criar. */
.create-summary { padding: 16px 18px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--ink-2); }
.create-summary h2 { margin-bottom: 4px; font: 700 var(--s2)/1 var(--cond); color: var(--text); }
.summary-list { display: grid; margin: 0; }
.summary-list > div { display: grid; grid-template-columns: 8rem 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.summary-list dt { color: var(--text-3); }
.summary-list dd { margin: 0; color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.summary-needs { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; color: var(--text); font-weight: 600; }
.summary-needs .icon { flex: none; margin-top: 3px; color: var(--statum-hi); }
.create-summary .notice { margin-top: 12px; }
.notice.warn { background: rgb(255 176 32 / 0.08); border-color: rgb(255 176 32 / 0.4); }
.notice.warn::before { background: var(--wake); }
#resumo:empty { display: none; }
.create-summary:has(#resumo:empty) { display: none; }
@media (max-width: 40rem) {
  .addon { flex-wrap: wrap; }
  .addon .addons-row-actions { width: 100%; justify-content: flex-end; }
  .found { flex-wrap: wrap; }
  .found > form { width: 100%; display: flex; justify-content: flex-end; }
  .found > .pill { margin-left: auto; }
  .found > button { margin-left: auto; }
  .summary-list > div { grid-template-columns: 1fr; gap: 2px; }
}

/* Como entrar (página pública): o que fazer, na ordem, sem login. */
.join { display: grid; gap: calc(var(--u) * 3); }
.join-head { display: grid; gap: 6px; }
.join-head h1 { overflow-wrap: anywhere; }
.join-head .join-build { font: 700 var(--s2)/1.1 var(--cond); letter-spacing: 0.02em; color: var(--statum-hi); }
.join-grid { display: grid; gap: calc(var(--u) * 3); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 60rem) { .join-grid { grid-template-columns: minmax(0, 1fr) 24rem; } }
.join-steps { display: grid; gap: calc(var(--u) * 3); }
.join-steps > section { display: grid; gap: 10px; justify-items: start; }
.join-steps h2 { color: var(--text); }
.join-steps p { max-width: 62ch; color: var(--text-2); }
.join-install { padding: 18px; border: 1px solid var(--statum); border-radius: var(--radius); background: var(--statum-wash); }
.btn.big { min-height: 48px; padding: 0 20px; font-size: var(--s1); }
.join-other-os { display: flex; flex-wrap: wrap; gap: 16px; }
.join-other-os a, .join-mods a, .join-manual a { color: var(--statum-hi); text-underline-offset: 3px; }
.join-address-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.join-address-row code { padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--ink-2); color: var(--text); font-size: var(--s1); overflow-wrap: anywhere; }
.join-manual ol { margin: 0; padding: 14px 14px 14px 34px; display: grid; gap: 8px; color: var(--text-2); }
.join-mods .addon-list { max-height: 32rem; overflow: auto; }
.join-path { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.join-path a { color: var(--statum-hi); overflow-wrap: anywhere; }