/* TriviaRound — os três modos de ecrã (do protótipo triviaround-web) e o
   que as páginas partilham. Cada página carrega este ficheiro antes do seu
   próprio <style>, por isso as cores vêm daqui e o resto continua na página.
   O tema é o atributo data-tema do <html>, posto pelo js/app.js. */

/* ---------- Temas (do protótipo) ---------- */
:root,
[data-tema="normal"] {
  --bg: #F3F5F1;
  --fg: #13201A;
  --sub: #46554C;
  --card: #FFFFFF;
  --card-line: 1px solid #DDE3DB;
  --bar: #FFFFFF;
  --bar-line: 1px solid #DDE3DB;
  --b1: #1F5FD6; --b1-t: #FFFFFF;
  --b2: #C2410C; --b2-t: #FFFFFF;
  --b3: #1B7F4B; --b3-t: #FFFFFF;
  --b4: #6B3FC4; --b4-t: #FFFFFF;
  --bord: 0;
  --outline: 2px solid #13201A;
  --field: #FFFFFF;
  --field-line: 2px solid #7B867D;
  --shade: rgba(19, 32, 26, 0.55);
  --chip: #E3E9E1; --chip-t: #13201A;
  --chip-line: 2px solid #7B867D;
  --accent: #1B7F4B;
  --dash: 2px dashed #7B867D;
  --off: #DDE3DB; --off-t: #5A675F; --off-line: 0;
  --sel: #1F5FD6; --sel-t: #FFFFFF; --sel-line: 2px solid #1F5FD6;
  --pill: #FFFFFF; --pill-t: #13201A; --pill-line: 0;
  --tab-on: #13201A; --tab-on-t: #FFFFFF; --tab-on-line: 0;
  --track: #E3E9E1; --track-line: 0;
  /* Extra, para as páginas que já existiam */
  --line: #C9D2C7;
  --gold: #A86B00;
  --warn: #B3261E;
  --ok: #1B7F4B;
  --link: #1F5FD6;
  color-scheme: light;
}

[data-tema="contraste"] {
  --bg: #000000;
  --fg: #FFFFFF;
  --sub: #FFFFFF;
  --card: #000000;
  --card-line: 3px solid #FFFFFF;
  --bar: #000000;
  --bar-line: 3px solid #FFFFFF;
  --b1: #FFE500; --b1-t: #000000;
  --b2: #00E0FF; --b2-t: #000000;
  --b3: #FFFFFF; --b3-t: #000000;
  --b4: #7CFF6B; --b4-t: #000000;
  --bord: 3px solid #FFFFFF;
  --outline: 3px solid #FFFFFF;
  --field: #000000;
  --field-line: 3px solid #FFFFFF;
  --shade: rgba(0, 0, 0, 0.85);
  --chip: #FFFFFF; --chip-t: #000000;
  --chip-line: 2px solid #FFFFFF;
  --accent: #FFE500;
  --dash: 3px dashed #FFFFFF;
  --off: #000000; --off-t: #FFFFFF; --off-line: 3px dashed #FFFFFF;
  --sel: #FFE500; --sel-t: #000000; --sel-line: 3px solid #FFFFFF;
  --pill: #000000; --pill-t: #FFFFFF; --pill-line: 3px solid #000000;
  --tab-on: #FFFFFF; --tab-on-t: #000000; --tab-on-line: 0;
  --track: #000000; --track-line: 3px solid #FFFFFF;
  --line: #FFFFFF;
  --gold: #FFE500;
  --warn: #FF8A80;
  --ok: #7CFF6B;
  --link: #00E0FF;
  color-scheme: dark;
}

/* Noturno: só vermelho sobre preto, para não perder a visão noturna */
[data-tema="noturno"] {
  --bg: #000000;
  --fg: #FF3B2F;
  --sub: #E8301F;
  --card: #0D0000;
  --card-line: 1px solid #7A140C;
  --bar: #000000;
  --bar-line: 1px solid #5A0E08;
  --b1: #2A0603; --b1-t: #FF3B2F;
  --b2: #1C0302; --b2-t: #FF3B2F;
  --b3: #3A0805; --b3-t: #FF3B2F;
  --b4: #240402; --b4-t: #FF3B2F;
  --bord: 2px solid #FF3B2F;
  --outline: 2px solid #FF3B2F;
  --field: #0D0000;
  --field-line: 2px solid #B3261A;
  --shade: rgba(0, 0, 0, 0.8);
  --chip: #2A0603; --chip-t: #FF3B2F;
  --chip-line: 1px solid #B3261A;
  --accent: #FF3B2F;
  --dash: 2px dashed #B3261A;
  --off: #000000; --off-t: #E8301F; --off-line: 2px dashed #B3261A;
  --sel: #3A0805; --sel-t: #FF3B2F; --sel-line: 2px solid #FF3B2F;
  --pill: #000000; --pill-t: #FF3B2F; --pill-line: 2px solid #FF3B2F;
  --tab-on: #3A0805; --tab-on-t: #FF3B2F; --tab-on-line: 2px solid #FF3B2F;
  --track: #0D0000; --track-line: 1px solid #7A140C;
  --line: #7A140C;
  --gold: #FF3B2F;
  --warn: #FF6A5F;
  --ok: #FF3B2F;
  --link: #FF6A5F;
  color-scheme: dark;
}

/* ---------- Comum ---------- */
body { font-family: 'Atkinson Hyperlegible', system-ui, -apple-system, "Segoe UI", sans-serif; }

/* Caixas, botões de escolha e barras do browser na cor do tema */
input, select, textarea, progress { accent-color: var(--accent); }

/* Botão de tema e outros ícones da barra do topo */
.icone-btn {
  width: 48px;
  height: 48px;
  min-height: 48px;
  flex: 0 0 48px;
  border: 0;
  border-radius: 24px;
  background: transparent;
  color: var(--fg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 24px;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
}
.icone-btn svg { width: 26px; height: 26px; }

/* Botão de tema das páginas que ainda não têm a barra do topo (topo.php):
   numa linha própria, à direita, para não tapar o cabeçalho da página. */
.tema-flutuante {
  display: flex;
  margin: max(8px, env(safe-area-inset-top)) 8px 0 auto;
  position: relative;
  z-index: 5;
  background: var(--card);
  border: var(--card-line);
}

/* Mapas: o OpenStreetMap é claro demais para os modos escuros.
   No noturno fica vermelho escuro, para não encandear. */
[data-tema="contraste"] .leaflet-tile-pane { filter: invert(1) hue-rotate(180deg) brightness(0.85) contrast(1.1); }
[data-tema="noturno"] .leaflet-tile-pane { filter: invert(1) grayscale(1) brightness(0.45) sepia(1) hue-rotate(-50deg) saturate(6); }
[data-tema="noturno"] .leaflet-container { background: #000000; }
[data-tema="contraste"] .leaflet-control-attribution, [data-tema="contraste"] .leaflet-bar a,
[data-tema="noturno"] .leaflet-control-attribution, [data-tema="noturno"] .leaflet-bar a {
  background: #000000;
  color: var(--fg);
  border-color: var(--line);
}
[data-tema="contraste"] .leaflet-control-attribution a, [data-tema="noturno"] .leaflet-control-attribution a { color: var(--fg); }
/* Zonas dos tesouros: o amarelo perde-se no mapa claro; lá ficam roxas.
   Nos modos escuros o mapa está invertido e o amarelo destaca-se. */
.leaflet-overlay-pane path.zona { stroke: #6B3FC4; fill: #6B3FC4; stroke-width: 3px; }
.leaflet-overlay-pane path.rota { stroke: #6B3FC4; }
[data-tema="contraste"] .leaflet-overlay-pane path.zona,
[data-tema="noturno"] .leaflet-overlay-pane path.zona { stroke: #f2c14e; fill: #f2c14e; }
[data-tema="contraste"] .leaflet-overlay-pane path.rota,
[data-tema="noturno"] .leaflet-overlay-pane path.rota { stroke: #f2c14e; }