/* =========================================================================
   Base de todo o site: paleta, tipos, barra de topo e a chapa dos painéis.
   Está aqui UMA vez — as páginas juntam só o que é delas por cima.

   A paleta vem do jogo: o turquesa manda (--accent), o creme quente é só
   para a acção principal (--action), o âmbar é destaque pontual (--gold) e
   o vermelho significa hostil (--rust). As cores dos esquadrões
   (--squad-*) são vocabulário do jogo e não se mexem.

   Escuro: consola de comando — azul-noite, painéis de canto cortado, arcos
   de HUD. Claro: creme do ecrã de entrada, com as cápsulas e as riscas de
   cor do mapa da província.
   ========================================================================= */
:root{
  --bg:#fdf8ee;
  --surface:#fffdf7;
  --surface-2:#f6efe0;
  --text:#1b2a30;
  --muted:#556870;          /* escuro o suficiente para ler sobre creme (5,5:1) */
  --line:#ddd2bb;

  --accent:#1f6e78;          /* turquesa: a cor da casa */
  --accent-soft:rgba(31,142,150,.10);
  --action:#1f6e78;          /* botão principal */
  --action-ink:#fffdf7;
  --cta:#9c4a1e;             /* "Abrir →" e afins */

  --gold:#b07d1e;            /* destaque pontual: MVP, medalhas */
  --cyan:#1f6e78;            /* mantido: muita coisa ainda lhe chama assim */
  --rust:#b4453c;            /* hostil: apagar, bloquear, erro */
  --green:#2f7a4f;
  --faction-2:#b4453c;       /* riscas de secção, como as facções no mapa */
  --faction-3:#7a57c0;

  --squad-yellow:#b8941f;
  --squad-red:#a13327;
  --squad-blue:#1f5f8b;
  /* as mesmas cores, escurecidas só para quando viram texto sobre creme */
  --squad-yellow-ink:#7d6310;
  --squad-red-ink:#93301f;
  --squad-blue-ink:#1b5680;

  --nebulosa:
    radial-gradient(115% 90% at 88% 2%, rgba(32,168,170,.34), transparent 62%),
    radial-gradient(70% 55% at 6% 0%, rgba(170,60,80,.10), transparent 58%);

  /* O HUD do canto (órbitas e buraco negro) só se vê no tema escuro: aqui
     fica tudo transparente, que é o mesmo que não existir. */
  --hud-anel:transparent;
  --hud-tracejado:transparent;
  --hud-nucleo:transparent;
  --hud-swirl-a:transparent;
  --hud-swirl-b:transparent;
  --hud-swirl-c:transparent;

  --chanfro:32px;           /* o corte do canto dos paineis */

  --font-display:'Oswald','Noto Sans KR','Noto Sans SC',system-ui,-apple-system,sans-serif;
  --font-body:'IBM Plex Sans','Noto Sans KR','Noto Sans SC',system-ui,-apple-system,sans-serif;
  --font-mono:'IBM Plex Mono','Noto Sans KR','Noto Sans SC',ui-monospace,'SF Mono',Menlo,monospace;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#07131c;
    --surface:#102430;
    --surface-2:#16303c;
    --text:#dff3f4;
    --muted:#8fb2b6;
    --line:#1d3f49;

    --accent:#49c6c9;
    --accent-soft:rgba(73,198,201,.12);
    --action:#f3e6c8;
    --action-ink:#8a3b1d;
    --cta:#f0d9a8;

    --gold:#e8c069;
    --cyan:#49c6c9;
    --rust:#e2695a;
    --green:#57d18f;
    --faction-2:#e2695a;
    --faction-3:#a98ae8;

    --squad-yellow:#f0d43a;
    --squad-red:#f0594a;
    --squad-blue:#5b9dee;
    --squad-yellow-ink:#f0d43a;
    --squad-red-ink:#f0594a;
    --squad-blue-ink:#5b9dee;

    --nebulosa:
      radial-gradient(120% 90% at 80% -12%, rgba(32,168,170,.30), transparent 60%),
      radial-gradient(70% 55% at 4% -5%, rgba(150,40,62,.16), transparent 58%);

    /* O HUD: as linhas são o turquesa esbatido; o buraco negro é mais
       escuro do que o fundo, com um anel de fotões dourado e um halo. */
    --hud-anel:rgba(73,198,201,.15);
    --hud-tracejado:rgba(73,198,201,.10);
    --hud-nucleo:#03080c;
    --hud-swirl-a:rgba(96,68,158,.58);    /* violeta */
    --hud-swirl-b:rgba(184,56,112,.52);   /* magenta */
    --hud-swirl-c:rgba(58,88,160,.44);    /* azul */
  }
}

:root[data-theme="dark"]{
  --bg:#07131c;
  --surface:#102430;
  --surface-2:#16303c;
  --text:#dff3f4;
  --muted:#8fb2b6;
  --line:#1d3f49;

  --accent:#49c6c9;
  --accent-soft:rgba(73,198,201,.12);
  --action:#f3e6c8;
  --action-ink:#8a3b1d;
  --cta:#f0d9a8;

  --gold:#e8c069;
  --cyan:#49c6c9;
  --rust:#e2695a;
  --green:#57d18f;
  --faction-2:#e2695a;
  --faction-3:#a98ae8;

  --squad-yellow:#f0d43a;
  --squad-red:#f0594a;
  --squad-blue:#5b9dee;
  --squad-yellow-ink:#f0d43a;
  --squad-red-ink:#f0594a;
  --squad-blue-ink:#5b9dee;

  --nebulosa:
    radial-gradient(120% 90% at 80% -12%, rgba(32,168,170,.30), transparent 60%),
    radial-gradient(70% 55% at 4% -5%, rgba(150,40,62,.16), transparent 58%);

  --hud-anel:rgba(73,198,201,.15);
  --hud-tracejado:rgba(73,198,201,.10);
  --hud-nucleo:#03080c;
  --hud-swirl-a:rgba(96,68,158,.58);
  --hud-swirl-b:rgba(184,56,112,.52);
  --hud-swirl-c:rgba(58,88,160,.44);
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--nebulosa), var(--bg);
  background-attachment:fixed;
  color:var(--text);
  font-family:var(--font-body);
  padding:0 20px;
  padding-block:28px 56px;
  line-height:1.5;
}
/* O z-index:0 faz do .wrap um contexto de empilhamento, para o HUD poder ir
   para tras do conteudo com z-index:-1 sem desaparecer atras do fundo. */
.wrap{max-width:1080px;margin:0 auto;position:relative;z-index:0;}

/* Órbitas de HUD atrás do cabeçalho, com o buraco negro no centro: discretas,
   como os anéis do mapa do sistema no jogo. Só no escuro, e atrás do conteúdo
   — o que antes era garantido pela opacidade quase nula das linhas e agora é
   garantido pelo z-index, que o núcleo do buraco negro é opaco.

   Os três anéis de dentro são desenhados no MESMO elemento, como círculos
   concêntricos de um gradiente: partilham o centro por construção, não por
   coincidência de posições. O quarto, tracejado, é o de fora, e vai buscar o
   centro à mesma conta (--hud-x, --hud-y, a partir do canto superior direito). */
.wrap::before,
.wrap::after{
  content:"";
  position:absolute;
  z-index:-1;          /* atras do conteudo: o nucleo e opaco */
  pointer-events:none;
  width:var(--hud-d);
  height:var(--hud-d);
  right:calc(var(--hud-x) - var(--hud-d) / 2);
  top:calc(var(--hud-y) - var(--hud-d) / 2);
}
.wrap{--hud-x:50px; --hud-y:65px;}

/* três anéis: raios 85, 140 e 210. A transparência está nas cores e não no
   opacity do elemento, para o remoinho lá no meio poder ter a sua. */
.wrap::before{
  --hud-d:420px;
  background:
    radial-gradient(circle at center, #0000 84.2px, var(--hud-anel) 84.2px 85.2px, #0000 85.2px),
    radial-gradient(circle at center, #0000 139.2px, var(--hud-anel) 139.2px 140.2px, #0000 140.2px),
    radial-gradient(circle at center, #0000 209.2px, var(--hud-anel) 209.2px 210.2px, #0000 210.2px);
}
/* o de fora, tracejado */
.wrap::after{
  --hud-d:620px;
  border:1px dashed var(--hud-tracejado);
  border-radius:50%;
}

/* O buraco negro no centro das órbitas, como o do jogo: um remoinho de
   violeta e magenta a rodar à volta de um núcleo escuro.

   Tem elemento próprio porque precisa de uma máscara circular para o
   conic-gradient não ficar quadrado, e a máscara aplica-se ao elemento
   inteiro -- posta no .wrap::before esbateria também as órbitas.

   O from 210deg é só para a parte mais clara do remoinho cair em baixo à
   esquerda, como na imagem do jogo. */
.buraco{
  --buraco-d:620px;   /* = o circulo tracejado, o de mais fora do HUD */
  position:absolute;
  z-index:-1;          /* atrás do conteúdo: o núcleo é opaco */
  pointer-events:none;
  width:var(--buraco-d);
  height:var(--buraco-d);
  right:calc(var(--hud-x) - var(--buraco-d) / 2);
  top:calc(var(--hud-y) - var(--buraco-d) / 2);
  border-radius:50%;
  background:
    /* o nucleo */
    radial-gradient(circle at center, var(--hud-nucleo) 16px, #0000 32px),
    /* os bracos: a mesma volta outra vez, com buracos, para dar a sensacao
       de rotacao em vez de uma nuvem de cor uniforme */
    conic-gradient(from 40deg,
      #0000 0deg,
      var(--hud-swirl-b) 55deg,
      #0000 130deg,
      var(--hud-swirl-a) 215deg,
      #0000 300deg,
      var(--hud-swirl-b) 350deg,
      #0000 360deg),
    conic-gradient(from 210deg,
      var(--hud-swirl-a) 0deg,
      var(--hud-swirl-b) 70deg,
      var(--hud-swirl-c) 150deg,
      var(--hud-swirl-b) 215deg,
      var(--hud-swirl-a) 290deg,
      var(--hud-swirl-c) 340deg,
      var(--hud-swirl-a) 360deg);
  -webkit-mask-image:radial-gradient(circle at center, #000 12%, #000d 26%, #0007 45%, #0002 60%, #0000 72%);
  mask-image:radial-gradient(circle at center, #000 12%, #000d 26%, #0007 45%, #0002 60%, #0000 72%);
}

/* ----------------------------------------------------------- barra de topo --
   Bandeiras, Entrar/Oficiais/Sair e o tema são todos a mesma chapa: mudar
   a altura ou a moldura aqui muda-os aos três, em todas as páginas.
   -------------------------------------------------------------------------- */
/* Duas filas: as bandeiras em cima, os botoes por baixo. Em coluna, por isso
   o que esta em baixo nao muda de sitio quando a fila das bandeiras passa de
   uma linha para duas. */
.topbar{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:10px;
  margin-bottom:22px;
}

.langbar{
  display:flex;
  flex-wrap:wrap;
  gap:var(--vao);
}

/* a barra dos botoes: hub, sessao e tema, sempre pela mesma ordem */
.actionbar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--vao);}

/* As duas barras assentam na mesma grelha: a bandeira ocupa uma coluna e os
   botoes de baixo ocupam duas, por isso caem nas mesmas linhas verticais que
   as chapas de cima. O --col tem de dar para a bandeira e as duas letras. */
/* Fora do .topbar tambem: a area de oficiais usa a mesma barra de bandeiras. */
:root{--col:68px;--vao:6px;}
.langbar .lang{width:var(--col);}

/* Duas colunas nao chegam para o texto em lingua nenhuma -- o espanhol
   "Iniciar sesion" e o frances "Portail de la Guilde" transbordavam e
   empurravam o botao seguinte para fora da grelha. As chapas com palavras
   ocupam tres colunas, a do tema, que so tem um emoji, ocupa duas.

   A barra dos oficiais segue a mesma regra: o texto mais comprido de la e o
   espanhol "Historial de Calamity", 188px, que cabe nas tres colunas. */
.actionbar .index-link,
.adminbar a{
  width:calc(var(--col) * 3 + var(--vao) * 2);
}

.actionbar .theme-toggle,
.adminbar .theme-toggle{
  width:calc(var(--col) * 2 + var(--vao));
  justify-content:center;
}

/* A cápsula do mapa da província: barrinha de cor à esquerda. */
.chip,
.langbar .lang,
.langbar button,
.index-link,
.theme-toggle{
  display:inline-flex;
  align-items:center;
  min-height:32px;
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.04em;
  line-height:1.2;
  background:var(--surface);
  color:var(--muted);
  border:1px solid var(--line);
  border-left:3px solid var(--accent);
  border-radius:5px;
  padding:7px 13px;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  flex:none;
}

.chip:hover,
.langbar .lang:hover,
.langbar button:hover,
.index-link:hover,
.theme-toggle:hover{color:var(--text);border-color:var(--accent);border-left-color:var(--gold);}

.chip:focus-visible,
.langbar .lang:focus-visible,
.langbar button:focus-visible,
.index-link:focus-visible,
.theme-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}

/* o idioma em uso fica em destaque: a chapa de acção */
.langbar .lang[aria-current="true"],
.langbar button[aria-selected="true"],
.langbar .lang[aria-selected="true"],
.index-link[aria-current]{
  background:var(--action);
  border-color:var(--action);
  border-left-color:var(--gold);
  color:var(--action-ink);
  font-weight:700;
}

/* bandeiras em SVG: o Windows não tem emoji de bandeira e escreveria "EN", "PT" */
.flag{
  width:1.25em;height:.84em;flex:none;
  border-radius:2px;vertical-align:-.09em;margin-right:.45em;
  box-shadow:0 0 0 1px rgba(0,0,0,.45);
}

/* ------------------------------------------------------------------ painéis --
   O canto cortado dos painéis do jogo. A risca de cor no topo diz de que
   secção é — como as cores das facções no mapa.
   -------------------------------------------------------------------------- */

/* A risca da diagonal do chanfro.

   Tem de ser declarada NOS PAINEIS, não no :root: o CSS substitui os var()
   no sítio onde a propriedade é declarada, por isso no :root a cor ficava
   cozida com o valor da raiz e o hover nunca lhe chegava. Aqui, --corte
   resolve-se em cada elemento, e as regras de hover que mudam
   --chanfro-line mudam a diagonal com a moldura. */
.chanfro,
.tactic-card,
details.guide,
.panel,
.card,
.star{
  --chanfro-line:var(--line);
  /* Duas riscas, nao uma: o lado de dentro do corte e oposto nos dois cantos.
     Em cima-direita o interior fica ABAIXO da diagonal; em baixo-esquerda fica
     ACIMA. Com uma so, a de baixo caia na parte que o corte deita fora -- e
     desaparecia. */
  /* A risca passa .75px ALEM da diagonal, de proposito: essa sobra e cortada
     pelo clip-path, mas garante que nao fica uma fresta quando a caixa calha
     num meio-pixel. As caixas tem alturas fraccionarias (58,47px, por exemplo),
     por isso a moldura e o corte podem arredondar para filas de pixeis
     diferentes -- era isso que desalinhava umas caixas e outras nao. */
  --corte-cima:linear-gradient(45deg, #0000 calc(50% - 1px), var(--chanfro-line) calc(50% - 1px) calc(50% + .75px), #0000 calc(50% + .75px));
  --corte-baixo:linear-gradient(45deg, #0000 calc(50% - .75px), var(--chanfro-line) calc(50% - .75px) calc(50% + 1px), #0000 calc(50% + 1px));
}

.chanfro{
  clip-path:polygon(0 0, calc(100% - var(--chanfro)) 0, 100% var(--chanfro), 100% 100%, var(--chanfro) 100%, 0 calc(100% - var(--chanfro)));
  background-image:var(--corte-cima), var(--corte-baixo);
  background-size:var(--chanfro) var(--chanfro);
  background-position:top right, bottom left;
  background-repeat:no-repeat;
  background-origin:border-box;   /* como o clip-path; o padrao mede pela caixa interior e desalinha 1px */
}
.seccao-1{border-top:3px solid var(--accent);}
.seccao-2{border-top:3px solid var(--faction-2);}
.seccao-3{border-top:3px solid var(--faction-3);}

/* hexágonos de acento, junto aos títulos */
.hexes{display:flex;gap:5px;align-items:center;}
.hexes i{
  width:14px;height:16px;display:block;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  background:var(--accent);opacity:.55;
}
.hexes i:nth-child(2){background:var(--faction-2);opacity:.45;}
.hexes i:nth-child(3){background:var(--faction-3);opacity:.45;}

footer{
  margin-top:44px;
  padding-top:16px;
  border-top:1px solid var(--line);
  font-size:.78rem;
  color:var(--muted);
}