/* CRICRI BR - páginas de instalação (/jogar, /jogar/aviso, /jogar/iphone, /jogar/pc, /jogar/abrir). Ligado só nelas.
   Cores chapadas (nenhum gradiente), claro e escuro automáticos, celular primeiro, toques de 44 px, foco visível.
   Classes com o prefixo "i-" para não colidir com as do site.css. Desenhos próprios: nada da Innersloth. */
:root {
  --i-fundo: #f4f5f7;
  --i-superficie: #ffffff;
  --i-superficie-2: #eef0f3;
  --i-texto: #15171c;
  --i-suave: #4b5160;
  --i-borda: #d8dbe2;
  --i-borda-forte: #aeb3bf;
  --i-marca: #d4232b;
  --i-marca-forte: #b11c23;
  --i-marca-texto: #b81e25;
  --i-destaque: #fdeced;
  --i-link: #1d4fd8;
  --i-foco: #1d4fd8;
  --i-ok-fundo: #e5f6ec;
  --i-ok-texto: #0f5c30;
  --i-calmo-fundo: #eef3ff;
  --i-calmo-texto: #1e3a7b;
  --i-alerta-fundo: #fff6df;
  --i-alerta-borda: #e3c063;
  --i-alerta-texto: #5a4200;
  --i-sombra: 0 1px 2px rgba(16, 18, 24, .06), 0 4px 14px rgba(16, 18, 24, .05);
}

@media (prefers-color-scheme: dark) {
  :root {
    --i-fundo: #0f1115;
    --i-superficie: #181b21;
    --i-superficie-2: #22262e;
    --i-texto: #f1f2f5;
    --i-suave: #aab0bd;
    --i-borda: #2f343e;
    --i-borda-forte: #4a505d;
    --i-marca: #d4232b;
    --i-marca-forte: #e02a32;
    --i-marca-texto: #ff7a80;
    --i-destaque: #2a1719;
    --i-link: #8db4ff;
    --i-foco: #8db4ff;
    --i-ok-fundo: #12291c;
    --i-ok-texto: #86e3ab;
    --i-calmo-fundo: #18223a;
    --i-calmo-texto: #c3d4ff;
    --i-alerta-fundo: #2a2410;
    --i-alerta-borda: #6b5719;
    --i-alerta-texto: #f2d98c;
    --i-sombra: 0 1px 2px rgba(0, 0, 0, .3);
  }
}

/* ---------- compatibilidade com a Moldura antiga (site.css de 1826b07), só nestas páginas ----------
   O site.css de hoje é só escuro, com céu e gradiente. APAGAR este bloco na junção com a feat/site-novo. */
/* Navegador sem :has() (Firefox antes do 121, Safari antes do 15.4): o fundo antigo continua escuro, então estas páginas
   ficam no tema escuro também (senão o texto escuro do tema claro cairia no fundo escuro). */
@supports not selector(:has(*)) {
  :root {
    --i-fundo: #0f1115; --i-superficie: #181b21; --i-superficie-2: #22262e; --i-texto: #f1f2f5; --i-suave: #aab0bd;
    --i-borda: #2f343e; --i-borda-forte: #4a505d; --i-marca-forte: #e02a32; --i-marca-texto: #ff7a80; --i-destaque: #2a1719;
    --i-link: #8db4ff; --i-foco: #8db4ff; --i-ok-fundo: #12291c; --i-ok-texto: #86e3ab; --i-calmo-fundo: #18223a;
    --i-calmo-texto: #c3d4ff; --i-alerta-fundo: #2a2410; --i-alerta-borda: #6b5719; --i-alerta-texto: #f2d98c;
    --i-sombra: 0 1px 2px rgba(0, 0, 0, .3);
  }
}
html:has(.inst) { color-scheme: light dark; }
body:has(.inst) { background: var(--i-fundo); color: var(--i-texto); overflow-x: hidden; }
body:has(.inst) .ceu { display: none; }
body:has(.inst) .topo,
body:has(.inst) main,
body:has(.inst) .rodape { max-width: 1040px; }
body:has(.inst) .topo { flex-wrap: wrap; gap: 6px 12px; padding: 10px 16px; }
body:has(.inst) .marca { color: var(--i-texto); min-height: 44px; }
body:has(.inst) .marca b { color: var(--i-marca-texto); }
body:has(.inst) .ponto { background: var(--i-marca); box-shadow: none; animation: none; }
body:has(.inst) .menu { flex-wrap: wrap; gap: 4px; }
body:has(.inst) .menu a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; color: var(--i-texto); border-color: var(--i-borda); font-size: .9rem; }
body:has(.inst) .menu a:hover { background: var(--i-superficie-2); }
body:has(.inst) .menu a[href="/jogar"] { border-color: var(--i-marca); }
body:has(.inst) .rodape { color: var(--i-suave); font-size: .85rem; }
body:has(.inst) .rodape a { color: var(--i-link); }
body:has(.inst) :focus-visible { outline: 3px solid var(--i-foco); outline-offset: 2px; }
body:has(dialog.i-janela[open]) { overflow: hidden; }

/* ---------- base ---------- */
.inst { max-width: 1040px; margin: 0 auto; padding: 4px 0 24px; color: var(--i-texto); }
.inst [hidden] { display: none !important; }
.inst a { color: var(--i-link); }
.inst h1 { font-size: clamp(1.8rem, 6vw, 2.6rem); line-height: 1.12; letter-spacing: -.02em; margin: 2px 0 14px; }
:where(.inst) h2 { font-size: 1.3rem; line-height: 1.2; margin: 0; }
:where(.inst) p { margin: 0; }
.inst b { font-weight: 800; }
.inst code { font: .9em/1.4 ui-monospace, "Cascadia Mono", Consolas, monospace; background: var(--i-superficie-2); border: 1px solid var(--i-borda); border-radius: 6px; padding: 1px 5px; color: var(--i-texto); overflow-wrap: anywhere; }
.i-sobre { font-size: .85rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--i-marca-texto); margin-top: 8px; }
.i-voltar { margin: 6px 0 2px; }
.i-voltar a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; text-decoration: none; }
.i-voltar a:hover { text-decoration: underline; }

/* ---------- a frase do dono: 3 marcas ---------- */
.i-marcas { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.i-marcas li { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 12px; background: var(--i-destaque); font-weight: 800; font-size: 1.02rem; line-height: 1.3; }
.i-marcas svg { width: 26px; height: 26px; flex: none; color: var(--i-marca-texto); }
.i-marcas small { display: block; font-size: .88rem; font-weight: 600; color: var(--i-suave); }
.i-marcas-curtas { gap: 6px; margin-bottom: 14px; padding: 10px 14px; border-radius: 12px; background: var(--i-destaque); }
.i-marcas-curtas li { padding: 0; background: none; font-size: .95rem; }
.i-marcas-curtas svg { width: 22px; height: 22px; }
@media (min-width: 760px) {
  .i-marcas:not(.i-marcas-curtas) { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- os 3 cartões ---------- */
.i-aparelhos { display: grid; gap: 12px; margin: 0 0 24px; }
@media (min-width: 760px) { .i-aparelhos { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
.i-aparelho { position: relative; display: grid; grid-template-columns: 52px 1fr; gap: 4px 14px; align-items: center; padding: 16px; background: var(--i-superficie); border: 1px solid var(--i-borda); border-radius: 16px; box-shadow: var(--i-sombra); }
.i-aparelho .i-icone { grid-row: span 2; width: 52px; height: 52px; border-radius: 14px; background: var(--i-superficie-2); color: var(--i-texto); display: grid; place-items: center; }
.i-aparelho .i-icone svg { width: 30px; height: 30px; }
.i-aparelho h2 { font-size: 1.4rem; }
.i-aparelho .i-desc { color: var(--i-suave); }
.i-aparelho .i-botao { grid-column: 1 / -1; margin-top: 10px; }
.i-aparelho.i-este { border: 2px solid var(--i-marca); padding: 15px; }
/* achado o aparelho de quem visita, os outros cartões ficam com o botão secundário */
.i-aparelhos.i-achou .i-aparelho:not(.i-este) .i-botao { background: transparent; color: var(--i-texto); border-color: var(--i-borda-forte); }
.i-aparelhos.i-achou .i-aparelho:not(.i-este) .i-botao:hover { background: var(--i-superficie-2); }
.i-este-selo { position: absolute; top: 12px; right: 12px; font-size: .78rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: var(--i-marca); color: #fff; }
@media (min-width: 760px) {
  .i-aparelho { grid-template-columns: 1fr; align-content: start; padding: 22px; }
  .i-aparelho.i-este { padding: 21px; }
  .i-aparelho .i-icone { grid-row: auto; margin-bottom: 8px; }
  .i-aparelho .i-botao { margin-top: 14px; }
}

/* ---------- botões ---------- */
.i-botao { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 50px; padding: 12px 18px; border: 2px solid var(--i-marca); border-radius: 12px; background: var(--i-marca); color: #fff; font: inherit; font-size: 1.05rem; font-weight: 800; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; }
.inst a.i-botao { color: #fff; }
.i-botao:hover { background: var(--i-marca-forte); border-color: var(--i-marca-forte); }
.i-botao svg { width: 22px; height: 22px; flex: none; }
.i-botao:disabled { opacity: .55; cursor: not-allowed; }
.i-botao-2, .inst a.i-botao-2 { background: transparent; color: var(--i-texto); border-color: var(--i-borda-forte); }
.i-botao-2:hover { background: var(--i-superficie-2); border-color: var(--i-borda-forte); }
.i-botao-grande { min-height: 58px; font-size: 1.15rem; }
.i-botao-linha { display: inline-flex; width: auto; min-height: 44px; margin: 6px 0 2px; padding: 8px 14px; font-size: .95rem; }
.i-botao.i-botao-feito, .i-botao.i-botao-feito:hover { background: var(--i-ok-fundo); border-color: var(--i-ok-fundo); color: var(--i-ok-texto); opacity: 1; cursor: default; }
.inst :focus-visible { outline: 3px solid var(--i-foco); outline-offset: 3px; }

/* ---------- blocos de baixo ---------- */
.i-bloco { padding: 18px; background: var(--i-superficie); border: 1px solid var(--i-borda); border-radius: 16px; margin: 0 0 12px; }
.i-bloco h2 { margin-bottom: 10px; }
.i-lista-curta { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.i-mais { border: 1px solid var(--i-borda); border-radius: 16px; background: var(--i-superficie); margin: 0 0 12px; }
.i-mais > summary { display: flex; align-items: center; min-height: 52px; padding: 0 18px; font-weight: 800; cursor: pointer; }
.i-mais[open] > summary { border-bottom: 1px solid var(--i-borda); }
.i-comandos { margin: 0; padding: 12px 18px 16px 38px; display: grid; gap: 6px; color: var(--i-suave); }
.i-comandos b { color: var(--i-texto); }
.i-links { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.i-links a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }

/* ---------- janela (<dialog>) ---------- */
.i-janela { width: min(620px, calc(100vw - 24px)); max-width: none; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); padding: 0; border: 1px solid var(--i-borda); border-radius: 18px; background: var(--i-superficie); color: var(--i-texto); box-shadow: 0 24px 64px rgba(0, 0, 0, .35); overflow: auto; overscroll-behavior: contain; }
.i-janela-larga { width: min(940px, calc(100vw - 24px)); }
.i-janela::backdrop { background: rgba(8, 10, 14, .62); }
.i-janela-topo { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 20px; background: var(--i-superficie); border-bottom: 1px solid var(--i-borda); }
.i-janela-topo h2 { font-size: 1.25rem; }
.i-fechar { flex: none; width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--i-borda); border-radius: 12px; background: transparent; color: var(--i-texto); cursor: pointer; }
.i-fechar:hover { background: var(--i-superficie-2); }
.i-fechar svg { width: 22px; height: 22px; }
.i-janela-corpo { padding: 16px 20px 22px; }
@media (max-width: 600px) {
  .i-janela, .i-janela-larga { width: 100vw; height: 100vh; height: 100dvh; max-height: none; margin: 0; border: 0; border-radius: 0; }
  .i-janela-corpo { padding: 14px 16px 28px; }
}
.i-pagina .i-android, .i-pagina .i-iphone, .i-pagina .i-pc { max-width: 620px; }
.i-pagina .i-pc { max-width: 940px; }

/* ---------- avisos curtos ---------- */
.i-alerta { margin: 0 0 14px; padding: 10px 14px; border-radius: 12px; background: var(--i-alerta-fundo); border: 1px solid var(--i-alerta-borda); color: var(--i-alerta-texto); font-size: .95rem; }
.i-estado, .i-calmo { margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; font-weight: 700; }
.i-estado { background: var(--i-ok-fundo); color: var(--i-ok-texto); }
.i-calmo { margin: 0 0 12px; background: var(--i-calmo-fundo); color: var(--i-calmo-texto); }
.i-nota { margin: 12px 0 0; color: var(--i-suave); font-size: .95rem; }
.i-nota b { color: var(--i-texto); }
.i-espaco { margin: 14px 0 0; }
.i-abrir h1 { margin-top: 16px; }
.i-abrir .i-ilus { margin-top: 18px; }

/* ---------- ilustração ---------- */
.i-ilus { margin: 0 0 14px; }
.i-ilus svg { display: block; width: 100%; height: auto; }
.i-ilus-android svg { max-height: 230px; }
.i-ilus-iphone svg { max-height: 210px; }
.i-ilus-regiao svg { max-width: 340px; margin: 0 auto; }
/* o menu Região desenhado (Recursos/regiao.svg): pequeno ao lado da marca e um pouco maior no passo */
.i-marcas .i-marca-regiao .i-regiao-img { width: 100px; height: auto; flex: none; margin-left: auto; border-radius: 6px; }
.i-passos .i-regiao-img { display: block; width: 150px; height: auto; border-radius: 8px; }

/* ---------- com aviso / sem aviso ---------- */
.i-caminhos { border: 0; margin: 0 0 14px; padding: 0; min-width: 0; }
.i-caminhos legend { font-weight: 800; font-size: 1.05rem; padding: 0; margin-bottom: 8px; }
.i-caminhos-opcoes { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.i-caminho { position: relative; display: block; cursor: pointer; }
.i-caminho input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.i-caminho span { display: flex; flex-direction: column; justify-content: center; gap: 2px; height: 100%; min-height: 72px; padding: 10px; border: 2px solid var(--i-borda-forte); border-radius: 12px; background: var(--i-superficie); }
.i-caminho b { font-size: .98rem; }
.i-caminho small { font-size: .85rem; line-height: 1.3; color: var(--i-suave); }
.i-caminho input:checked + span { border-color: var(--i-marca); background: var(--i-destaque); }
.i-caminho input:checked + span b::before { content: "✓ "; color: var(--i-marca-texto); }
.i-caminho input:focus-visible + span { outline: 3px solid var(--i-foco); outline-offset: 2px; }
.i-caminho input:disabled + span { opacity: .5; cursor: not-allowed; }
.i-android:not([data-sem-js]):has(input[value="direto"]:checked) [data-painel="aviso"] { display: none; }
.i-android:not([data-sem-js]):has(input[value="aviso"]:checked) [data-painel="direto"] { display: none; }
.i-android[data-sem-js] .i-caminhos,
.i-android[data-sem-js] [data-painel="aviso"] { display: none; }

/* ---------- passos ---------- */
.i-passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.i-passos > li { display: grid; grid-template-columns: 36px 1fr; gap: 12px; align-items: start; }
.i-passos > li > div { display: grid; gap: 8px; padding-top: 5px; min-width: 0; }
.i-passos p { font-size: 1.05rem; line-height: 1.35; }
.i-n { width: 36px; height: 36px; flex: none; border-radius: 50%; background: var(--i-marca); color: #fff; font-weight: 900; display: grid; place-items: center; }
.i-passos > li.i-feito .i-n { background: var(--i-ok-texto); color: var(--i-superficie); }
.i-contagem { display: inline-block; min-width: 3.2em; padding: 1px 8px; border-radius: 999px; background: var(--i-superficie-2); font-weight: 800; font-variant-numeric: tabular-nums; text-align: center; }

/* ---------- PC: 3 passos com desenho ---------- */
.i-passos-pc { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 12px; }
@media (min-width: 720px) { .i-passos-pc { grid-template-columns: repeat(3, 1fr); } }
.i-passo-pc { display: grid; gap: 10px; align-content: start; padding: 12px; border: 1px solid var(--i-borda); border-radius: 14px; background: var(--i-superficie-2); }
.i-passo-pc svg { display: block; width: 100%; height: auto; border-radius: 10px; background: var(--i-superficie); }
.i-passo-pc p { display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: center; font-size: 1.02rem; font-weight: 700; line-height: 1.3; }

/* ---------- dicas recolhidas ---------- */
.i-dica { margin-top: 14px; border-top: 1px solid var(--i-borda); }
.i-dica > summary { display: flex; align-items: center; min-height: 48px; font-weight: 700; color: var(--i-link); cursor: pointer; }
.i-dica > p, .i-dica > ol { margin: 4px 0 6px; }
.i-dica > p + p { margin-top: 8px; }

/* ---------- desenhos (SVG próprio; a tela do jogo fica escura nos dois temas) ---------- */
.i-svg text { font-family: "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; }
.i-svg .t-fone { fill: #1b1e25; stroke: #444a57; stroke-width: 2; }
.i-svg .t-camera { fill: #444a57; }
.i-svg .t-tela { fill: #0e1527; }
.i-svg .t-estrelas circle { fill: #ffffff; opacity: .5; }
.i-svg .t-botao { fill: #22304f; stroke: #51648f; stroke-width: 1.5; }
.i-svg .t-botao-p { fill: #1a2540; stroke: #51648f; stroke-width: 1.2; }
.i-svg .t-rotulo { fill: #ffffff; font-size: 12px; font-weight: 800; }
.i-svg .t-rotulo-p { fill: #ffffff; font-size: 10.5px; font-weight: 700; }
.i-svg .t-titulo-tela { fill: #ffffff; font-size: 12px; font-weight: 800; letter-spacing: .06em; }
.i-svg .t-titulo-menor { font-size: 9.5px; }
.i-svg .t-rotulo-linha { fill: #b9c4de; font-size: 10.5px; font-weight: 700; }
.i-svg .t-rotulo-regiao { fill: #ffffff; font-size: 10.5px; font-weight: 800; }
.i-svg .t-caixa { fill: #1a2540; stroke: #51648f; stroke-width: 1.3; }
.i-svg .t-caixa-linha { fill: #ffffff; opacity: .3; }
.i-svg .t-anel { fill: none; stroke: #ff4a52; stroke-width: 3; }
.i-svg .t-lista-fundo { fill: #16203a; stroke: #51648f; stroke-width: 1.5; }
.i-svg .t-item { fill: #ffffff; font-size: 10px; font-weight: 600; }
.i-svg .t-escolhido { fill: rgba(47, 224, 200, .32); }
.i-svg .t-caixa-regiao { fill: #071010; stroke: #2fe0c8; stroke-width: 2; }
.i-svg .t-rotulo-caixa { fill: #ffffff; font-size: 10.5px; font-weight: 800; }
.i-svg .t-triangulo { fill: #ffffff; }
.i-svg .t-aviso-fundo { fill: #ffffff; stroke: #d4d7de; stroke-width: 1; }
.i-svg .t-aviso-titulo { fill: #15171c; font-size: 9.6px; font-weight: 800; }
.i-svg .t-aviso-sub { fill: #4b5160; font-size: 8.4px; font-weight: 600; }
.i-svg .t-marca { fill: #d4232b; }
.i-svg .t-marca-arco { fill: none; stroke: #ffffff; stroke-linecap: round; }
.i-svg .t-dedo-forma { fill: #ffffff; stroke: #15171c; stroke-width: 2.4; stroke-linejoin: round; }
.i-svg .t-toque { fill: none; stroke: #ffffff; stroke-width: 2.5; }
.i-svg .t-rotulo-menor { font-size: 9.5px; }
.i-svg .t-seta { fill: none; stroke: #ff4a52; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.i-svg .t-ilha { fill: #0b0b0d; }
.i-svg .t-safari { fill: #e9ebef; }
.i-svg .t-ios-abrir { font-weight: 800; }
.i-ilus-iphone .t-toque { stroke: #0a62d0; opacity: .45; }
.i-svg .t-barra-safari { fill: #ffffff; stroke: #c9ccd4; }
.i-svg .t-alerta-ios { fill: #f7f7f9; stroke: #c9ccd4; }
.i-svg .t-ios-titulo { fill: #15171c; font-size: 10px; font-weight: 800; }
.i-svg .t-ios-botao { fill: #0a62d0; font-size: 10.5px; font-weight: 600; }
.i-svg .t-ios-linha { stroke: #c9ccd4; stroke-width: 1; }
/* PC (fica sobre o cartão do passo: as setas usam a cor da marca) */
.i-svg .p-janela { fill: #0e1527; }
.i-svg .p-barra { fill: #2a2f3a; }
.i-svg .p-titulo { fill: #dfe3ec; font-size: 9px; font-weight: 700; }
.i-svg .p-ctl { fill: none; stroke: #dfe3ec; stroke-width: 1.6; }
.i-svg .p-x { fill: none; stroke: #ffffff; stroke-width: 2.2; stroke-linecap: round; }
.i-svg .p-botao { fill: #22304f; stroke: #51648f; stroke-width: 1.2; }
.i-svg .p-anel { fill: none; stroke: #ff4a52; stroke-width: 3; }
.i-svg .p-seta { fill: none; stroke: var(--i-marca-texto); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.i-svg .p-chip { fill: var(--i-superficie-2); stroke: var(--i-borda-forte); stroke-width: 1.2; }
.i-svg .p-chip-texto { fill: var(--i-texto); font-size: 8.4px; font-weight: 700; }
.i-svg .p-arquivo { fill: var(--i-superficie); stroke: var(--i-texto); stroke-width: 1.4; stroke-linejoin: round; }
.i-svg .p-console { fill: #0c0c0c; stroke: #3a3a3a; }
.i-svg .p-console-t { fill: #f2f2f2; font-family: ui-monospace, Consolas, monospace; font-size: 9.5px; font-weight: 700; }
.i-svg .p-console-s { fill: #9a9a9a; font-family: ui-monospace, Consolas, monospace; font-size: 9.5px; }
.i-svg .p-escolha { fill: none; stroke: #ff4a52; stroke-width: 2.4; }
.i-svg .p-console-t, .i-svg .p-console-s { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }

/* ---------- animação do celular (10 s): a notificação desce e o dedo toca nela; depois JOGAR, a tela "Criar partida",
   o menu suspenso "Região" abre e CriCri-BR fica escolhido (o jogo de hoje não tem globo) ---------- */
.i-ilus-android .t-aviso { transform: translateY(-74px); animation: i-aviso 10s ease-in-out infinite; }
.i-ilus-android .t-dedo { transform: translate(400px, 260px); animation: i-dedo 10s ease-in-out infinite; }
.i-ilus-android .t-toque { opacity: 0; animation: i-toque 10s linear infinite; }
.i-ilus-android .t-criar { opacity: 0; animation: i-criar 10s linear infinite; }
.i-ilus-android .t-lista { opacity: 0; animation: i-lista 10s linear infinite; }
.i-ilus-android .t-escolha { opacity: 0; animation: i-escolha 10s linear infinite; }
.i-ilus-android .t-regiao-antes { animation: i-antes 10s linear infinite; }
.i-ilus-android .t-regiao-depois { opacity: 0; animation: i-depois 10s linear infinite; }
@keyframes i-aviso { 0%, 8% { transform: translateY(-74px); } 13%, 29% { transform: translateY(0); } 34%, 100% { transform: translateY(-74px); } }
@keyframes i-dedo {
  0%, 13% { transform: translate(400px, 260px); }
  20%, 28% { transform: translate(278px, 60px); }
  33%, 39% { transform: translate(150px, 54px); }
  45%, 51% { transform: translate(252px, 125px); }
  56%, 62% { transform: translate(240px, 146px); }
  70%, 100% { transform: translate(400px, 260px); }
}
@keyframes i-toque {
  0%, 22% { opacity: 0; transform: scale(.3); }
  24% { opacity: .95; transform: scale(.5); }
  29% { opacity: 0; transform: scale(1.5); }
  30%, 35% { opacity: 0; transform: scale(.3); }
  37% { opacity: .95; transform: scale(.5); }
  42% { opacity: 0; transform: scale(1.5); }
  43%, 47% { opacity: 0; transform: scale(.3); }
  49% { opacity: .95; transform: scale(.5); }
  54% { opacity: 0; transform: scale(1.5); }
  55%, 57% { opacity: 0; transform: scale(.3); }
  59% { opacity: .95; transform: scale(.5); }
  64% { opacity: 0; transform: scale(1.5); }
  65%, 100% { opacity: 0; transform: scale(.3); }
}
@keyframes i-criar { 0%, 39% { opacity: 0; } 42%, 95% { opacity: 1; } 98%, 100% { opacity: 0; } }
@keyframes i-lista { 0%, 49% { opacity: 0; } 51%, 63% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes i-escolha { 0%, 59% { opacity: 0; } 60%, 63% { opacity: 1; } 66%, 100% { opacity: 0; } }
@keyframes i-antes { 0%, 64% { opacity: 1; } 66%, 97% { opacity: 0; } 100% { opacity: 1; } }
@keyframes i-depois { 0%, 64% { opacity: 0; } 66%, 97% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  /* parado: a notificação no topo com o dedo nela, e a tela "Criar partida" com a Região já em CriCri-BR */
  .i-ilus-android .t-aviso { animation: none; transform: none; }
  .i-ilus-android .t-dedo { animation: none; transform: translate(278px, 60px); }
  .i-ilus-android .t-criar { animation: none; opacity: 1; }
  .i-ilus-android .t-toque, .i-ilus-android .t-lista, .i-ilus-android .t-escolha { animation: none; opacity: 0; }
  .i-ilus-android .t-regiao-antes { animation: none; opacity: 0; }
  .i-ilus-android .t-regiao-depois { animation: none; opacity: 1; }
}