/* Visual comum das telas do Quiz Racer (página inicial e jogar.html): estilo 16 bits, com o jogo rodando ao fundo. */
html, body { margin: 0; height: 100%; background: #07031a; color: #fff; font-family: "Courier New", Courier, monospace; }

/* o jogo rodando sozinho ao fundo (body.com-demo) */
body.com-demo #game { position: fixed; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; image-rendering: crisp-edges; transition: opacity .7s; background: #07031a; }
body.com-demo #game.fora { opacity: 0; }
#veu { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(7,3,26,.72) 0%, rgba(7,3,26,.35) 45%, rgba(7,3,26,0) 75%); }
#legenda { position: fixed; z-index: 2; right: 12px; bottom: 10px; font-size: 12px; letter-spacing: 1px; color: #fff; text-shadow: 1px 1px 0 #000; background: rgba(7,3,26,.6); padding: 4px 8px; border: 1px solid rgba(255,255,255,.35); }
#legenda:empty { display: none; }
body:not(.com-demo) #veu, body:not(.com-demo) #legenda { display: none; }

/* cabeçalho: recordes à esquerda, acesso do professor à direita */
.topo { position: fixed; top: 0; left: 0; right: 0; z-index: 12; display: flex; justify-content: space-between; padding: 12px 16px; pointer-events: none; }
.topo[hidden] { display: none; }
.topo .prof { pointer-events: auto; display: block; padding: 8px 12px; text-decoration: none; font-weight: bold; font-size: 14px; letter-spacing: 2px;
  color: #fff; background: #1b0a4d; border: 3px solid #00e5ff; box-shadow: 3px 3px 0 #7a1fff; }
.topo .prof:hover, .topo .prof:focus { background: #ff2e93; outline: none; }

/* título e selo */
.selo { display: inline-block; font-size: 12px; letter-spacing: 3px; color: #00e5ff; border: 2px solid #00e5ff; padding: 3px 10px; background: rgba(0,0,0,.45); }
h1 { margin: 18px 0 4px; font-size: 56px; line-height: 1; letter-spacing: 4px; font-style: italic; color: #ffe600;
  text-shadow: 3px 3px 0 #ff2e93, 6px 6px 0 #7a1fff, 9px 9px 0 #1b0a4d; }
.lema { margin: 16px auto 0; max-width: 520px; font-size: 16px; color: #fff; text-shadow: 2px 2px 0 #000; }
@media (max-width: 520px) { h1 { font-size: 38px; } }

/* botões */
.menu { margin: 34px auto 0; width: 300px; max-width: 100%; }
.menu a, .opcao, button.grande { display: block; box-sizing: border-box; width: 100%; margin: 12px 0; padding: 14px 10px; text-align: center; text-decoration: none; font-family: inherit; font-weight: bold; font-size: 22px; letter-spacing: 3px;
  color: #fff; background: #1b0a4d; border: 4px solid #fff; box-shadow: 5px 5px 0 #ff2e93; border-radius: 0; cursor: pointer; }
.menu a:hover, .menu a:focus, .opcao:hover, .opcao:focus, button.grande:hover, button.grande:focus { background: #ff2e93; color: #fff; outline: none; }
.menu a:hover::before, .menu a:focus::before, .opcao:hover b::before, .opcao:focus b::before { content: "\25B6  "; }
.opcao b { display: block; }
.menu small, .opcao span { display: block; font-size: 12px; font-weight: normal; letter-spacing: 1px; color: #c9b8ff; margin-top: 4px; }
.opcao:hover span, .opcao:focus span { color: #fff; }
button.grande.sec { font-size: 16px; border-color: #00e5ff; box-shadow: 5px 5px 0 #7a1fff; }
button.grande:disabled { opacity: .55; cursor: default; }
button.grande[hidden] { display: none; }

/* seletor de idioma no topo (i18n.js), ao lado de PROFESSOR */
.topo [data-idioma] { pointer-events: auto; margin-left: auto; margin-right: 10px; align-self: center; }
select.idioma { font: inherit; font-weight: bold; font-size: 13px; letter-spacing: 1px; color: #fff; background: #1b0a4d; border: 3px solid #00e5ff;
  border-radius: 0; padding: 6px 6px; box-shadow: 3px 3px 0 #7a1fff; cursor: pointer; }
select.idioma:focus { outline: 2px solid #ffd60a; }
@media (max-width: 420px) { .topo .prof { padding: 6px 8px; font-size: 12px; letter-spacing: 1px; } select.idioma { font-size: 12px; padding: 4px; } .topo [data-idioma] { margin-right: 6px; } }

/* créditos (ferramenta gratuita do Planejamento Online) e aviso de cookies (aviso.js) */
.creditos { margin: 22px auto 0; max-width: 560px; font-size: 12px; line-height: 1.5; color: #e6dcff; text-shadow: 1px 1px 0 #000; text-align: center;
  background: rgba(7, 3, 26, 0.62); padding: 6px 10px; }
.creditos a { color: #ffd60a; }
#aviso-cookies { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; max-width: 760px; margin: 0 auto; display: flex; gap: 12px; align-items: center;
  background: #1b0a4d; color: #fff; border: 3px solid #00e5ff; box-shadow: 4px 4px 0 #7a1fff; padding: 10px 14px; font-size: 13px; line-height: 1.4; text-align: left; }
#aviso-cookies p { margin: 0; flex: 1; }
#aviso-cookies a { color: #ffd60a; }
#aviso-cookies button { font: inherit; font-weight: bold; letter-spacing: 1px; color: #1b0a4d; background: #ffd60a; border: 0; padding: 8px 14px; cursor: pointer; }
@media (max-width: 520px) { #aviso-cookies { flex-direction: column; align-items: stretch; } }