/* Capa do jogo para quem ainda não entrou (#/entrar): logotipo sobre uma cena de estádio em pixel art, cartão de
   entrar / criar conta e os destaques do jogo. Classes com prefixo lg-; o HTML sai de public/js/views/login.js e a
   cena de public/js/components/landingScene.js (que pinta o canvas e põe a altura do céu em --lg-sky).
   Celular primeiro: cena de ponta a ponta, cartão logo embaixo (entra sem rolar), destaques e rodapé no fim.
   No computador: cena e destaques à esquerda, cartão à direita. */
:root {
  --lg-sky0: #0e182a;      /* céu antes do canvas pintar */
  --lg-tag: #dfe7ee;       /* slogan sobre o céu da noite */
  --lg-tag-drop: #1a1410;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --lg-sky0: #6bb2e1; --lg-tag: #0f2233; --lg-tag-drop: rgba(255, 255, 255, 0.45); }
}
:root[data-theme="light"] { --lg-sky0: #6bb2e1; --lg-tag: #0f2233; --lg-tag-drop: rgba(255, 255, 255, 0.45); }

.lg-page {
  --lg-gutter: 16px;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start;
  width: 100%; max-width: 560px; min-height: 100vh; min-height: 100dvh; margin: 0 auto;
  padding: 0 var(--lg-gutter) calc(12px + env(safe-area-inset-bottom));
}

/* ---- cena: canvas do estádio, jogador e bola por cima, logotipo no céu */
.lg-hero {
  position: relative; overflow: hidden; height: 216px;
  margin: 0 calc(var(--lg-gutter) * -1);
  background: var(--lg-sky0);
  border-bottom: 4px solid var(--shade);
}
.lg-scene-bg, .lg-scene-person, .lg-scene-ball {
  position: absolute; left: 0; top: 0; display: block; image-rendering: pixelated; pointer-events: none; user-select: none;
}
.lg-scene-bg { width: 100%; height: 100%; }
.lg-scene-person { width: 112px; height: 112px; transform: translate(-200px, 0); }
.lg-scene-ball[hidden], .lg-scene-person:not([src]), .lg-scene-ball:not([src]) { display: none; }
.lg-brand {
  position: absolute; left: 0; right: 0; top: 0; z-index: 1; height: var(--lg-sky, 45%);
  display: flex; align-items: center; justify-content: center; padding: 0 12px;
}
:root .lg-logo { margin: 0; font-size: inherit; text-transform: none; }
.lg-hero .logo-tag { color: var(--lg-tag); text-shadow: 0 2px 0 var(--lg-tag-drop); }

/* ---- cartão de entrar / criar conta */
.lg-card { margin: 0; padding: 14px 16px 12px; }
.lg-card-h {
  /* No celular o título é só para leitores de tela: as abas já dizem o que fazer. */
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; margin: 0;
}
.lg-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.lg-tab {
  min-height: 44px; padding: 8px 6px; border: 2px solid var(--edge); background: var(--panel2); color: var(--muted-strong);
  font: 400 16px/1 var(--font-pixel); letter-spacing: 0; cursor: pointer; box-shadow: 0 3px 0 var(--shade);
}
.lg-tab.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent-ink); }
@media (hover: hover) { .lg-tab:not(.on):hover { color: var(--text); background: var(--panel3); } }
.lg-form { display: flex; flex-direction: column; gap: 12px; }
.lg-field { display: flex; flex-direction: column; gap: 4px; font-size: 16px; line-height: 1.2; color: var(--muted-strong); }
.lg-field input {
  min-height: 44px; padding: 10px 12px; font: inherit; font-size: 16px; color: var(--text);
  background: var(--bg); border: 2px solid var(--line2); border-radius: 0;
}
.lg-field input::placeholder { color: var(--faint); opacity: 1; }
.lg-field input:focus { outline: none; border-color: var(--accent); }
.lg-page :focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }
.lg-field input:focus-visible { outline-offset: 0; }
.lg-error { margin: 0; padding: 8px 10px; font-size: 15px; line-height: 1.3; color: var(--danger-text); background: color-mix(in srgb, var(--danger) 14%, transparent); }
.lg-submit { min-height: 48px; }
.lg-submit:disabled { opacity: 1; cursor: progress; filter: saturate(0.6); }
.lg-wake {
  display: flex; gap: 8px; align-items: baseline; margin: -4px 0 0; padding: 8px 10px; font-size: 15px; line-height: 1.3;
  color: var(--warn-text); background: color-mix(in srgb, var(--warn) 12%, transparent);
}
.lg-wake[hidden] { display: none; }
/* Bloquinho piscando no lugar do "carregando". */
.lg-wake::before { content: ''; flex: none; width: 8px; height: 8px; background: currentColor; animation: lg-blink 1s steps(2, jump-none) infinite; }
@keyframes lg-blink { 50% { opacity: 0.2; } }
.lg-hint { margin: 0; font-size: 14px; line-height: 1.35; text-align: center; }

/* ---- destaques do jogo */
.lg-feat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lg-feat {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 10px 12px; background: var(--panel); box-shadow: inset 0 0 0 2px var(--line);
}
.lg-feat-ico, .lg-feat-ico .pxi { display: block; width: 24px; height: 24px; image-rendering: pixelated; }
.lg-feat-ico { margin-top: 2px; }
.lg-feat-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lg-feat-txt b { font-family: var(--font-pixel); font-weight: 400; font-size: 16px; line-height: 1.25; letter-spacing: 0; color: var(--text); }
.lg-feat-txt span { font-size: 15px; line-height: 1.35; color: var(--muted); }

/* ---- rodapé discreto */
.lg-foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 16px;
  padding: 10px 0 0; border-top: 2px solid var(--line); font-size: 14px; color: var(--muted);
}
.lg-foot a { display: inline-flex; align-items: center; min-height: 40px; color: var(--accent2); }

/* ---- celular baixinho (360×640 e parecidos): cena mais curta e logotipo menor, o cartão sobe */
@media (max-width: 599px) and (max-height: 700px) {
  .lg-hero { height: 184px; }
  .lg-hero .logo { --logo-size: 56px !important; gap: 12px; }
  .lg-hero .logo-emblem { --logo-size: 56px !important; }
}
/* Telefone estreito: o slogan precisa caber ao lado do emblema. */
@media (max-width: 374px) {
  .lg-hero .logo-tag { font-size: 12px; }
}

/* ---- tablet: a cena ganha moldura em vez de ir de ponta a ponta */
@media (min-width: 600px) {
  .lg-page { padding-top: 16px; gap: 20px; }
  .lg-hero {
    margin: 0; height: 240px; border-style: solid; border-width: 4px 4px 6px;
    border-image: var(--frame) 4 4 6 / 4px 4px 6px;
  }
}

/* ---- computador: arte e destaques à esquerda, cartão à direita */
@media (min-width: 900px) {
  .lg-page {
    max-width: 1180px; grid-template-columns: minmax(0, 1fr) 400px;
    grid-template-areas: "hero card" "feats card" "foot foot";
    column-gap: 40px; row-gap: 20px; align-content: center; padding: 32px 32px 16px;
  }
  .lg-hero { grid-area: hero; height: 372px; }
  .lg-hero .logo { --logo-size: 96px !important; --logo-text: 48px !important; --logo-tag-size: 24px !important; }
  .lg-hero .logo-emblem { --logo-size: 96px !important; }
  .lg-card { grid-area: card; align-self: center; padding: 20px 22px 16px; }
  .lg-card-h { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; margin: 0 0 14px; font-size: 16px; }
  .lg-feats { grid-area: feats; }
  .lg-feat-list { grid-template-columns: 1fr 1fr; gap: 12px; }
  .lg-feat { height: 100%; }
  .lg-foot { grid-area: foot; }
}

@media (prefers-reduced-motion: reduce) {
  .lg-wake::before { animation: none; }
}