/* Base visual dos jogos do Fliperama SequeLari: tema de fliperama, topo com a marca, placar e janela de início e fim. */
@import url("/dados/fontes.css?v=2");
@import url("/marca/marca-sequelari.css");
:root { --bg: #0a0820; --bg2: #160f3a; --ink: #f4f1ff; --muted: #b3a9d9; --line: rgba(255, 255, 255, .14); --amarelo: #ffd21f; --rosa: #ff3ba0; --ciano: #2fe0ff; --roxo: #8c5aff; --verde: #3cf29a; --display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif; --texto: "Figtree", system-ui, sans-serif; }
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: radial-gradient(circle at 50% -10%, #3b1d8f 0, var(--bg) 60%) fixed, var(--bg); color: var(--ink); font-family: var(--texto); -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
.fl-topo { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; background: rgba(10, 8, 32, .82); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.fl-topo .logo-sl { font-size: 1.35rem; --logo-jogo: #ff3ba0; }
.fl-voltar { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .06); font-weight: 700; font-size: .9rem; text-decoration: none; white-space: nowrap; }
.fl-voltar:hover { background: rgba(255, 255, 255, .12); }
.fl-jogo { width: min(100%, 720px); margin: 0 auto; padding: 16px; display: grid; gap: 12px; }
.fl-cabeca { display: flex; align-items: end; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.fl-cabeca h1 { margin: 0; font: 900 clamp(2rem, 7vw, 3.2rem)/.9 var(--display); text-transform: uppercase; letter-spacing: .02em; }
.fl-placar { display: flex; gap: 8px; }
.fl-placar div { min-width: 92px; padding: 8px 12px; border-radius: 14px; background: rgba(255, 255, 255, .07); border: 1px solid var(--line); text-align: center; }
.fl-placar b { display: block; font: 900 1.6rem/1 var(--display); color: var(--amarelo); font-variant-numeric: tabular-nums; }
.fl-placar span { font-size: .75rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.fl-palco { position: relative; border-radius: 22px; overflow: hidden; border: 2px solid rgba(255, 255, 255, .16); background: #120c30; box-shadow: 0 0 0 6px rgba(140, 90, 255, .12), 0 30px 70px rgba(0, 0, 0, .5); touch-action: none; user-select: none; -webkit-user-select: none; }
.fl-palco canvas { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.fl-janela { position: absolute; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(10, 8, 32, .78); backdrop-filter: blur(3px); text-align: center; }
.fl-janela[hidden] { display: none; }
.fl-janela h2 { margin: 0 0 8px; font: 900 clamp(1.8rem, 6vw, 2.8rem)/1 var(--display); text-transform: uppercase; color: var(--amarelo); }
.fl-janela p { margin: 0 auto 16px; max-width: 34ch; color: var(--muted); line-height: 1.5; }
.fl-botao { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border: 0; border-radius: 999px; background: var(--amarelo); color: #1a1033; font: 900 1.1rem var(--display); text-transform: uppercase; letter-spacing: .05em; cursor: pointer; box-shadow: 0 6px 0 #b8900a; transition: transform .1s, box-shadow .1s; }
.fl-botao:active { transform: translateY(4px); box-shadow: 0 2px 0 #b8900a; }
.fl-botao.sec { background: rgba(255, 255, 255, .12); color: var(--ink); box-shadow: 0 6px 0 rgba(0, 0, 0, .35); }
.fl-dica { margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.5; }
.fl-setas { display: none; grid-template-columns: repeat(3, 64px); grid-template-rows: repeat(2, 56px); gap: 8px; justify-content: center; }
.fl-setas button { border: 1px solid var(--line); border-radius: 14px; background: rgba(255, 255, 255, .08); color: var(--ink); font-size: 1.4rem; touch-action: manipulation; }
.fl-setas button:active { background: rgba(255, 255, 255, .2); }
.fl-setas [data-d="cima"] { grid-column: 2; } .fl-setas [data-d="esq"] { grid-column: 1; grid-row: 2; } .fl-setas [data-d="baixo"] { grid-column: 2; grid-row: 2; } .fl-setas [data-d="dir"] { grid-column: 3; grid-row: 2; }
@media (pointer: coarse) { .fl-setas { display: grid; } }
.fl-rodape { padding: 24px 16px 40px; text-align: center; color: var(--muted); font-size: .82rem; }
@media (max-width: 480px) {
  .fl-topo { padding: 10px 12px; gap: 8px; }
  .fl-topo .logo-sl { font-size: 1rem; min-width: 0; }
  .fl-voltar { padding: 7px 11px; font-size: .82rem; }
  .fl-voltar .longo { display: none; }
}
.fl-titulo { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fl-favorito { flex: none; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255, 255, 255, .06); color: var(--amarelo); font: 400 1.3rem/1 system-ui, sans-serif; cursor: pointer; }
.fl-favorito:hover, .fl-favorito:focus-visible { background: rgba(255, 210, 31, .16); }
.fl-aviso-controle { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 50; max-width: calc(100% - 32px); margin: 0; padding: 10px 16px; border-radius: 14px; background: #1a1340; border: 1px solid var(--amarelo); color: var(--ink); font: 600 .9rem var(--texto); text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.fl-compartilhar { display: block; margin: 12px auto 0; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255, 255, 255, .08); color: var(--ink); font: 700 .9rem var(--texto); cursor: pointer; }
.fl-compartilhar:hover, .fl-compartilhar:focus-visible { border-color: var(--amarelo); }
.fl-cartao { display: grid; gap: 10px; justify-items: center; margin-top: 12px; }
.fl-cartao img { width: min(100%, 420px); height: auto; border-radius: 12px; border: 1px solid var(--line); }
.fl-janela { overflow-y: auto; }
.fl-semana { margin: 26px 0 10px; padding: 18px; border-radius: 22px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); }
.fl-semana h2 { margin: 0 0 6px; font: 900 1.5rem var(--display); text-transform: uppercase; letter-spacing: .04em; }
.fl-semana-lista { list-style: none; margin: 10px 0; padding: 0; display: grid; gap: 6px; }
.fl-semana-lista li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 12px; border-radius: 12px; background: rgba(255, 255, 255, .05); }
.fl-semana-lista li.eu { outline: 2px solid var(--amarelo); }
.fl-semana-lista span { color: var(--muted); font-variant-numeric: tabular-nums; }
.fl-semana-lista b { overflow-wrap: anywhere; }
.fl-semana-lista i { font-style: normal; font-weight: 800; color: var(--amarelo); font-variant-numeric: tabular-nums; }
.fl-semana-meu { margin: 6px 0; font-weight: 700; }
.fl-semana-acoes { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; }
.fl-semana-acoes .fl-compartilhar { margin: 0; }
.fl-selo-torneio { display: inline-block; vertical-align: middle; margin-left: 8px; padding: 4px 10px; border-radius: 999px; background: var(--amarelo); color: #1a1033; font: 800 .75rem var(--texto); letter-spacing: .04em; }
.fl-desafio-fim { margin: 6px 0 12px; font-weight: 800; color: var(--amarelo); }
.fl-aviso-infantil { margin: 10px 0; padding: 12px 16px; border-radius: 14px; background: rgba(60, 242, 154, .12); border: 1px solid var(--verde); }
.fl-aviso-infantil a { color: var(--verde); font-weight: 700; }