/* Shell de /game (P-011, T50, P-037): canvas na janela toda, #boot centrado sobre
 * ele, barra #load indeterminada só em CSS e o link de volta ao site. Tokens e foco
 * vêm de site.css; #boot e o link ficam sem blur (fundo sólido #0F1630). */
body.page-game {
  display: block; margin: 0; overflow: hidden;
  height: 100vh; height: 100dvh;
  background:
    radial-gradient(rgba(160, 190, 255, 0.06) 1px, transparent 1.5px) 0 0 / var(--dot) var(--dot),
    radial-gradient(760px 520px at 50% 50%, rgba(88, 120, 255, 0.16), transparent 70%),
    radial-gradient(900px 600px at 50% 120%, rgba(138, 108, 255, 0.14), transparent 70%),
    var(--bg);
}
/* Sem width/height no HTML (300x150): o CSS estica; o tamanho de pixel é do M05. */
#view { position: fixed; inset: 0; z-index: 0; display: block; width: 100vw; height: 100vh; height: 100dvh; background: transparent; }
/* Cursor sobre o mapa (P-048, design aprovado): cruz do sistema só com o mundo
 * pronto (#view sem inert); o centro dela é o ponto do MOVE_DRONE. */
#view:not([inert]) { cursor: crosshair; }
/* Cursor durante o arraste com o botão direito (P-050, design aprovado): a mão
 * fechada do sistema só enquanto o botão está preso (classe posta por input.js);
 * soltar, cancelar ou cair a conexão devolve a cruz. */
#view.panning:not([inert]) { cursor: grabbing; }

.back {
  position: fixed; top: 16px; left: 16px; z-index: 3; height: 44px;
  display: flex; align-items: center; gap: 10px; padding: 0 18px 0 12px;
  border-radius: 999px; background: #0F1630; border: 1px solid rgba(150, 185, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 8px 28px rgba(0, 0, 0, 0.35);
  color: var(--text); font-size: 15px; font-weight: 600; text-decoration: none;
}
.back:hover { color: #FFFFFF; border-color: rgba(150, 185, 255, 0.40); }
.back:focus-visible { outline-offset: 3px; border-radius: 999px; }

#boot {
  position: fixed; left: 50%; top: 50%; z-index: 2; transform: translate(-50%, -50%);
  width: min(360px, calc(100vw - 32px)); padding: 36px 36px 34px; border-radius: 22px;
  background: linear-gradient(160deg, rgba(130, 160, 255, 0.10), rgba(130, 160, 255, 0.03)), #0F1630;
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 24px 64px rgba(0, 0, 0, 0.45);
  display: flex; flex-direction: column; align-items: center; gap: 20px; overflow: hidden;
}
/* Mundo pronto (P-045, design aprovado): o #boot some de vez, sem transição; o
 * display do #boot venceria o [hidden] do navegador, então a regra é explícita. */
#boot[hidden] { display: none; }
#boot::before {
  content: ""; width: 56px; height: 56px;
  background: url("/favicon.svg") center / contain no-repeat;
}
#boot::after {
  content: ""; position: absolute; top: 0; left: 36px; right: 36px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(108, 242, 224, 0.55), rgba(183, 156, 255, 0.45), transparent);
}
#conn {
  font-size: 19px; font-weight: 600; letter-spacing: 0.005em; color: var(--text);
  text-align: center; text-wrap: balance; line-height: 1.35;
}

/* Estados de sessão (T64, design aprovado P-018): a barra só anda quando algo
 * está andando — hold/blocked/error não têm polling nem retry, então #load
 * some e o #boot encolhe. Ponto antes do texto (#conn::before), a cor do
 * estado: violeta = em espera, coral = bloqueada, cinza apagado = servidor
 * desconhecido. Erro não muda a borda de #boot (estado incerto, não é um
 * veredito do servidor como hold/blocked). boot-fatal (P-043, design aprovado:
 * o jogo não pôde rodar) é o mesmo quadro cinza do error, só com outro texto,
 * e vale por cima de qualquer estado de conexão. */
#boot.boot-hold #load, #boot.boot-blocked #load, #boot.boot-error #load,
#boot.boot-fatal #load { display: none; }
#boot.boot-hold #conn::before, #boot.boot-blocked #conn::before, #boot.boot-error #conn::before, #boot.boot-fatal #conn::before {
  content: ""; display: inline-block; width: 10px; height: 10px;
  margin-right: 10px; border-radius: 3px; vertical-align: 1px;
}
#boot.boot-hold { border-color: rgba(183, 156, 255, 0.30); }
#boot.boot-hold::after { background: linear-gradient(90deg, transparent, rgba(183, 156, 255, 0.75), transparent); }
#boot.boot-hold #conn::before { background: #B79CFF; box-shadow: 0 0 0 3px rgba(183, 156, 255, 0.16), 0 0 14px rgba(183, 156, 255, 0.45); }
#boot.boot-blocked { border-color: rgba(255, 143, 128, 0.32); }
#boot.boot-blocked::after { background: linear-gradient(90deg, transparent, rgba(255, 143, 128, 0.75), transparent); }
#boot.boot-blocked::before { opacity: 0.55; filter: grayscale(0.6); }
#boot.boot-blocked #conn::before { background: #FF8F80; box-shadow: 0 0 0 3px rgba(255, 143, 128, 0.16), 0 0 14px rgba(255, 143, 128, 0.45); }
#boot.boot-error::after, #boot.boot-fatal::after { background: linear-gradient(90deg, transparent, rgba(147, 163, 200, 0.40), transparent); }
#boot.boot-error::before, #boot.boot-fatal::before { opacity: 0.45; filter: grayscale(1); }
#boot.boot-error #conn::before, #boot.boot-fatal #conn::before { background: #5B6788; box-shadow: 0 0 0 3px rgba(147, 163, 200, 0.14); }

/* Indicador de conexão (P-037, design aprovado): #conn-detail é a linha
 * secundária (latência, tentativa/contagem), aria-hidden, com altura reservada
 * para que o #boot não pule entre os estados vivos (connecting, waiting,
 * connected, reload); só hold/blocked/error o escondem e encolhem. Forma, não
 * só cor: círculo cheio plasma = conectado; anel azul vazado = reconectando
 * (também na connecting seguinte, que game.js chama de boot-waiting); quadrado
 * = veredito parado (P-018). Sem animação nova: o #load segue a única. */
#conn-detail {
  display: block; min-height: 18px; margin-top: 4px;
  font: 500 13px/18px ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  letter-spacing: 0.02em; color: #93A3C8; font-variant-numeric: tabular-nums;
}
#boot.boot-hold #conn-detail, #boot.boot-blocked #conn-detail, #boot.boot-error #conn-detail,
#boot.boot-fatal #conn-detail { display: none; }
#boot.boot-connected #load { visibility: hidden; animation: none; }
#boot.boot-connected #conn::before, #boot.boot-waiting #conn::before {
  content: ""; display: inline-block; box-sizing: border-box;
  width: 10px; height: 10px; margin-right: 10px; border-radius: 50%; vertical-align: 1px;
}
#boot.boot-connected { border-color: rgba(108, 242, 224, 0.30); }
#boot.boot-connected::after { background: linear-gradient(90deg, transparent, rgba(108, 242, 224, 0.75), transparent); }
#boot.boot-connected #conn::before { background: #6CF2E0; box-shadow: 0 0 0 3px rgba(108, 242, 224, 0.16), 0 0 14px rgba(108, 242, 224, 0.45); }
#boot.boot-waiting::after { background: linear-gradient(90deg, transparent, rgba(122, 168, 255, 0.60), transparent); }
#boot.boot-waiting #conn::before { border: 2px solid #7AA8FF; box-shadow: 0 0 0 3px rgba(122, 168, 255, 0.14); }

/* <progress> sem value: trilho de 6 px e um segmento plasma de 38% que desliza
 * em 1,6 s. background-position em % desloca (100% - 38%) da largura: -61% e
 * 161% põem o segmento fora do trilho nos dois lados. */
#load {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px;
  border: 0; border-radius: 999px; overflow: hidden; background-color: transparent;
}
#load::-webkit-progress-bar { background: transparent; }
#load::-moz-progress-bar { background: transparent; }
#load:indeterminate {
  background:
    linear-gradient(90deg, rgba(108, 242, 224, 0), #6CF2E0 45%, #7AA8FF) -61% 0 / 38% 100% no-repeat,
    linear-gradient(rgba(150, 185, 255, 0.14), rgba(150, 185, 255, 0.14));
  animation: load-slide 1.6s linear infinite;
}
@keyframes load-slide {
  from { background-position: -61% 0, 0 0; }
  to { background-position: 161% 0, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  #load:indeterminate { animation: none; background-position: 50% 0, 0 0; }
}

@media (max-width: 860px) {
  .back { top: 12px; left: 12px; gap: 8px; padding: 0 16px 0 12px; }
  .back-orb { display: none; }
  #boot { padding: 30px 24px 28px; border-radius: 18px; gap: 18px; }
  #boot::before { width: 48px; height: 48px; }
  #boot::after { left: 24px; right: 24px; }
  #conn { font-size: 18px; }
}