:root {
  --azul: #0a1633;
  --azul2: #13234d;
  --painel: rgba(8, 16, 38, 0.86);
  --amarelo: #ffd21f;
  --verde: #1fbf5b;
  --vermelho: #ff3b3b;
  --branco: #f4f7ff;
  --cinza: #9aa8c7;
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --seg-top: env(safe-area-inset-top, 0px);
  --seg-dir: env(safe-area-inset-right, 0px);
  --seg-esq: env(safe-area-inset-left, 0px);
  --seg-baixo: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden; background: var(--azul); color: var(--branco);
  font-family: var(--fonte); -webkit-tap-highlight-color: transparent; touch-action: none;
  overscroll-behavior: none; user-select: none; -webkit-user-select: none;
}
#app { position: fixed; inset: 0; }
#jogo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: 0; color: inherit; touch-action: manipulation; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- escudo (disco com as duas cores do clube) */
.escudo {
  display: inline-block; width: 1em; height: 1em; border-radius: 50%; flex: none;
  background: linear-gradient(135deg, var(--c1, #888) 0 50%, var(--c2, #444) 50% 100%);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.85), 0 2px 6px rgba(0, 0, 0, 0.4);
}

/* ---------------------------------------------------------------- HUD */
#hud { position: absolute; inset: 0; pointer-events: none; }
#hud button { pointer-events: auto; }
.tv {
  position: absolute; top: calc(10px + var(--seg-top)); left: calc(10px + var(--seg-esq));
  display: flex; align-items: stretch; height: 34px; border-radius: 8px; overflow: hidden;
  background: linear-gradient(180deg, #16295a, #0b1838); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45);
  font-weight: 900; letter-spacing: 0.02em; transform: skewX(-8deg);
}
.tv > * { transform: skewX(8deg); }
.tv .lado { display: flex; align-items: center; gap: 6px; padding: 0 10px; font-size: 16px; }
.tv .escudo { font-size: 16px; }
.tv .gols { display: flex; align-items: center; gap: 6px; padding: 0 12px; background: var(--amarelo); color: #0a1633; font-size: 21px; }
.tv .gols span { opacity: 0.6; }
.tv .relogio { display: flex; align-items: center; gap: 6px; padding: 0 12px; background: rgba(255, 255, 255, 0.08); font-size: 15px; font-variant-numeric: tabular-nums; }
.tv .relogio small { color: var(--amarelo); font-size: 12px; }
#radar {
  position: absolute; top: calc(10px + var(--seg-top)); right: calc(100px + var(--seg-dir));
  width: 120px; height: 78px; border-radius: 8px; background: rgba(10, 40, 20, 0.55);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
}
.topo-bts { position: absolute; top: calc(10px + var(--seg-top)); right: calc(10px + var(--seg-dir)); display: flex; gap: 8px; }
.icone {
  width: 38px; height: 38px; border-radius: 50%; background: rgba(8, 16, 38, 0.7); font-size: 16px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
}
#portador {
  position: absolute; left: 50%; bottom: calc(18px + var(--seg-baixo)); transform: translateX(-50%) skewX(-8deg);
  display: flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 8px;
  background: var(--painel); font-weight: 800; font-size: 16px; white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
}
#portador > * { transform: skewX(8deg); }
#portador .cor { width: 8px; height: 26px; border-radius: 3px; background: var(--c1); box-shadow: 4px 0 0 var(--c2); margin-right: 4px; }
#portador .num { background: var(--amarelo); color: #0a1633; border-radius: 5px; padding: 1px 7px; font-size: 15px; }
#forca {
  position: absolute; left: 50%; bottom: calc(62px + var(--seg-baixo)); transform: translateX(-50%);
  width: 220px; height: 16px; border-radius: 9px; background: rgba(0, 0, 0, 0.55); overflow: hidden;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
}
#forca i { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, #3ee07b, #ffd21f 60%, #ff3b3b); }
#forca span { position: absolute; inset: 0; text-align: center; font-size: 11px; font-weight: 900; line-height: 16px; letter-spacing: 0.2em; color: #fff; text-shadow: 0 1px 2px #000; }
#aviso {
  position: absolute; left: 50%; top: 22%; transform: translateX(-50%); font-size: 28px; font-weight: 900;
  letter-spacing: 0.08em; text-shadow: 0 3px 10px rgba(0, 0, 0, 0.7); opacity: 0; transition: opacity 0.25s;
  white-space: nowrap;
}
#aviso.on { opacity: 1; }
#gol-banner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
#gol-banner .gooool {
  font-size: min(18vw, 150px); font-weight: 900; font-style: italic; letter-spacing: -0.02em; line-height: 1;
  color: var(--c1, #ffd21f); -webkit-text-stroke: 4px #fff; text-shadow: 0 8px 0 var(--c2, #0a1633), 0 14px 30px rgba(0, 0, 0, 0.6);
  animation: gol-entra 0.6s cubic-bezier(.2, 1.6, .4, 1) both;
}
#gol-banner .autor {
  margin-top: 14px; padding: 8px 18px; border-radius: 10px; background: var(--painel); font-size: 22px; font-weight: 800;
  animation: sobe 0.5s 0.35s both;
}
@keyframes gol-entra { from { transform: scale(0.2) rotate(-8deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sobe { from { transform: translateY(20px); opacity: 0; } to { transform: none; opacity: 1; } }
#replay-tag {
  position: absolute; top: calc(56px + var(--seg-top)); left: calc(10px + var(--seg-esq)); display: flex; flex-direction: column;
  padding: 6px 12px; border-radius: 8px; background: rgba(220, 20, 40, 0.9); font-size: 18px; letter-spacing: 0.1em;
  animation: pisca 1s infinite alternate;
}
#replay-tag small { font-size: 11px; letter-spacing: 0; opacity: 0.85; }
@keyframes pisca { to { opacity: 0.65; } }
#ajuda-teclas {
  position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); font-size: 12px; color: rgba(255, 255, 255, 0.75);
  text-shadow: 0 1px 3px #000; white-space: nowrap;
}

/* ---------------------------------------------------------------- controles de toque */
.toque { position: absolute; inset: 0; display: none; pointer-events: none; }
.toque.visivel { display: block; }
.zona-dir { position: absolute; left: 0; top: 60px; bottom: 0; width: 46%; pointer-events: auto; }
.dir-base {
  position: absolute; left: 110px; top: calc(100% - 120px); width: 128px; height: 128px; margin: -64px 0 0 -64px;
  border-radius: 50%; background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.35);
  pointer-events: none; opacity: 0.55; transition: opacity 0.15s;
}
.dir-base.ativo { opacity: 1; }
.dir-bola {
  position: absolute; left: 34px; top: 34px; width: 60px; height: 60px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #cfd8ea); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4);
}
.botoes { position: absolute; right: calc(14px + var(--seg-dir)); bottom: calc(14px + var(--seg-baixo)); width: 250px; height: 200px; pointer-events: none; }
.bt {
  position: absolute; border-radius: 50%; pointer-events: auto; font-weight: 900; font-size: 13px; letter-spacing: 0.04em;
  box-shadow: 0 6px 0 rgba(0, 0, 0, 0.35), inset 0 -4px 0 rgba(0, 0, 0, 0.18), 0 0 0 3px rgba(255, 255, 255, 0.55);
  color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); transition: transform 0.06s;
}
.bt.apertado { transform: translateY(4px) scale(0.95); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35), 0 0 0 3px #fff; }
.bt-chute { right: 0; bottom: 0; width: 104px; height: 104px; background: radial-gradient(circle at 40% 30%, #ff6b6b, #d61f2c); font-size: 15px; }
.bt-passe { right: 116px; bottom: 6px; width: 84px; height: 84px; background: radial-gradient(circle at 40% 30%, #4fe38b, #139a47); }
.bt-correr { right: 30px; bottom: 116px; width: 72px; height: 72px; background: radial-gradient(circle at 40% 30%, #62b7ff, #1b6fd6); font-size: 11px; }
.crianca-on .bt-chute { width: 124px; height: 124px; font-size: 17px; }
.crianca-on .bt-passe { right: 134px; }
.crianca-on .bt-correr { right: 40px; bottom: 136px; }

/* ---------------------------------------------------------------- telas */
.tela {
  position: absolute; inset: 0; overflow: auto; touch-action: pan-y;
  padding: calc(16px + var(--seg-top)) calc(16px + var(--seg-dir)) calc(16px + var(--seg-baixo)) calc(16px + var(--seg-esq));
}
#tela-inicio {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center;
  background: radial-gradient(ellipse at 50% 120%, rgba(10, 22, 51, 0.1), rgba(10, 22, 51, 0.75) 70%);
}
.logo { display: flex; align-items: center; gap: 14px; justify-content: center; }
.logo h1 {
  margin: 0; font-size: clamp(34px, 8vw, 76px); font-weight: 900; font-style: italic; letter-spacing: -0.02em; line-height: 0.95;
  text-shadow: 0 4px 0 #0a1633, 0 10px 30px rgba(0, 0, 0, 0.6);
}
.logo h1 em {
  display: inline-block; margin-left: 10px; padding: 0 10px; border-radius: 8px; background: var(--amarelo); color: #0a1633;
  font-size: 0.55em; vertical-align: middle; transform: rotate(-4deg); text-shadow: none;
}
.bola-logo {
  width: 58px; height: 58px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 35% 30%, #fff 0 30%, #dfe6f5 60%, #aab6cf);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5), inset -6px -8px 0 rgba(0, 0, 0, 0.08);
  position: relative;
}
.bola-logo::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px; background: #14161c; clip-path: polygon(50% 0, 100% 38%, 82% 100%, 18% 100%, 0 38%); }
.sub { margin: 6px 0 0; color: var(--cinza); font-size: 15px; font-weight: 600; }
.modos { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; }
.modo {
  display: flex; flex-direction: column; align-items: center; gap: 4px; width: min(300px, 84vw); padding: 18px 16px;
  border-radius: 18px; font-size: 22px; font-weight: 900; box-shadow: 0 8px 0 rgba(0, 0, 0, 0.3), 0 14px 30px rgba(0, 0, 0, 0.4);
  transition: transform 0.08s;
}
.modo:active { transform: translateY(4px); }
.modo .emoji { font-size: 34px; }
.modo small { font-size: 13px; font-weight: 600; opacity: 0.92; }
.modo.crianca { background: linear-gradient(160deg, #ffdd3c, #ff9a1f); color: #3a1d00; }
.modo.normal { background: linear-gradient(160deg, #2bd46e, #0f8a45); }
.recordes { margin: 0; color: var(--cinza); font-size: 13px; font-weight: 600; }
.dica-girar { display: none; margin: 0; font-size: 13px; color: var(--amarelo); }
@media (orientation: portrait) { .dica-girar { display: block; } }

#tela-times { background: linear-gradient(180deg, rgba(10, 22, 51, 0.92), rgba(10, 22, 51, 0.97)); }
.cab { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.cab h2 { margin: 0; flex: 1; font-size: 22px; font-weight: 900; font-style: italic; }
.voltar { width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, 0.1); font-size: 28px; line-height: 1; }
.etiqueta { padding: 4px 10px; border-radius: 99px; background: var(--verde); font-size: 11px; font-weight: 900; letter-spacing: 0.08em; }
.etiqueta.crianca { background: var(--amarelo); color: #3a1d00; }
.times-corpo { display: grid; grid-template-columns: minmax(250px, 330px) 1fr; gap: 16px; align-items: start; }
.confronto { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; position: sticky; top: 0; }
.vaga {
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.12); min-height: 128px;
}
.vaga.ativa { box-shadow: inset 0 0 0 3px var(--amarelo); background: rgba(255, 210, 31, 0.1); }
.vaga small { font-size: 10px; font-weight: 900; letter-spacing: 0.12em; color: var(--cinza); }
.vaga .escudo { font-size: 38px; margin: 4px 0; }
.vaga .nome { font-size: 16px; font-weight: 900; }
.vaga .craques { font-size: 10.5px; color: var(--cinza); line-height: 1.3; }
.vs { font-size: 22px; font-weight: 900; font-style: italic; color: var(--amarelo); }
.niveis { grid-column: 1 / -1; display: flex; border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.15); }
.niveis button { flex: 1; padding: 10px 4px; font-weight: 900; font-size: 13px; background: transparent; color: var(--cinza); }
.niveis button.sel { background: var(--amarelo); color: #0a1633; }
.acoes { grid-column: 1 / -1; display: flex; gap: 10px; }
.primario, .secundario { flex: 1; padding: 14px 10px; border-radius: 14px; font-weight: 900; font-size: 17px; }
.primario { background: linear-gradient(180deg, #2bd46e, #11994b); box-shadow: 0 6px 0 #0a5c2c; }
.primario:active { transform: translateY(3px); box-shadow: 0 3px 0 #0a5c2c; }
.secundario { background: rgba(255, 255, 255, 0.1); font-size: 14px; }
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 8px; padding-bottom: 20px; }
.clube {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 12px; background: rgba(255, 255, 255, 0.06);
  text-align: left; min-height: 48px; box-shadow: inset 0 0 0 2px transparent;
}
.clube .escudo { font-size: 24px; }
.clube b { display: block; font-size: 14px; font-weight: 900; }
.clube span { display: block; font-size: 10.5px; color: var(--cinza); }
.clube.casa { box-shadow: inset 0 0 0 2px var(--amarelo); }
.clube.fora { box-shadow: inset 0 0 0 2px #ff6b6b; }
@media (max-width: 640px) and (orientation: portrait) {
  .times-corpo { grid-template-columns: 1fr; }
  .confronto { position: static; }
}
@media (max-height: 460px) {
  .tela { padding-top: calc(8px + var(--seg-top)); padding-bottom: calc(8px + var(--seg-baixo)); }
  #tela-inicio { gap: 10px; }
  .logo h1 { font-size: 42px; }
  .bola-logo { width: 44px; height: 44px; }
  .modo { padding: 10px 14px; font-size: 19px; }
  .modo .emoji { font-size: 24px; }
  .cab { margin-bottom: 6px; }
  .vaga { min-height: 104px; padding: 6px; }
  .vaga .escudo { font-size: 30px; }
  .primario { padding: 11px 10px; }
  .times-corpo { grid-template-columns: 300px 1fr; }
  .grade { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 6px; }
  .clube { min-height: 40px; padding: 5px 8px; }
}

/* painéis (intervalo, fim, pausa) */
.painel { display: flex; align-items: center; justify-content: center; background: rgba(5, 10, 25, 0.55); }
.cartao {
  width: min(460px, 100%); padding: 20px; border-radius: 20px; background: var(--painel); text-align: center;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), inset 0 0 0 1px rgba(255, 255, 255, 0.12);
  display: flex; flex-direction: column; gap: 10px; max-height: 100%; overflow: auto;
}
.cartao h2 { margin: 0; font-size: 30px; font-weight: 900; font-style: italic; }
.eyebrow { font-size: 11px; font-weight: 900; letter-spacing: 0.18em; color: var(--amarelo); }
.placar-grande { display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 40px; font-weight: 900; }
.placar-grande .escudo { font-size: 30px; }
.placar-grande small { font-size: 18px; }
.stats { display: grid; grid-template-columns: 1fr auto 1fr; gap: 4px 12px; font-size: 14px; font-weight: 700; }
.stats span:nth-child(3n + 2) { color: var(--cinza); font-size: 12px; font-weight: 600; }
.artilheiros { list-style: none; margin: 0; padding: 0; font-size: 13px; color: var(--cinza); display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: center; }
.recorde { margin: 0; color: var(--amarelo); font-weight: 800; }
.ajuda-controles { margin: 0; font-size: 13px; line-height: 1.6; color: var(--cinza); }

#carregando {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  background: var(--azul); z-index: 5; transition: opacity 0.4s;
}
#carregando.sumir { opacity: 0; pointer-events: none; }
#carregando .bola-logo { animation: gira 1s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
#carregando .barra { width: 200px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.15); overflow: hidden; }
#carregando .barra i { display: block; height: 100%; width: 0; background: var(--amarelo); transition: width 0.2s; }
#carregando p { margin: 0; color: var(--cinza); font-weight: 700; }
#erro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; text-align: center; background: var(--azul); z-index: 6; }
#perf {
  position: absolute; left: 8px; bottom: 8px; margin: 0; padding: 6px 8px; border-radius: 6px; background: rgba(0, 0, 0, 0.6);
  font: 11px/1.35 ui-monospace, Menlo, monospace; color: #9f9; pointer-events: none; z-index: 4;
}

@media (orientation: portrait) {
  .tv { transform: skewX(-8deg) scale(0.9); transform-origin: left top; }
  #radar { display: none; }
  .botoes { transform: scale(0.9); transform-origin: right bottom; }
  #portador { bottom: calc(230px + var(--seg-baixo)); }
  #forca { bottom: calc(272px + var(--seg-baixo)); }
}

@media (max-width: 480px) {
  .logo .bola-logo { display: none; }
  .logo h1 { font-size: 40px; }
}

/* ================================================================ melhorias 10/10/2026 */
/* alvos de toque >= 56 px e nada de letra minúscula */
.icone { width: 56px; height: 56px; font-size: 22px; }
#radar { right: calc(138px + var(--seg-dir)); }
.voltar { width: 56px; height: 56px; }
.niveis button { min-height: 56px; font-size: 15px; }
.clube { min-height: 56px; }
.clube span, .vaga .craques { font-size: 13px; }
.vaga small, .etiqueta, .eyebrow { font-size: 13px; }
.bt-correr { font-size: 13px; }
#forca { height: 22px; }
#forca span { font-size: 13px; line-height: 22px; }
#replay-tag small { font-size: 14px; }
#ajuda-teclas { font-size: 15px; bottom: 10px; }
.recordes, .dica-girar { font-size: 15px; }
.stats span:nth-child(3n + 2) { font-size: 14px; }
.artilheiros, .ajuda-controles { font-size: 15px; }
.primario, .secundario { min-height: 56px; }
#aviso { font-size: clamp(24px, 6vw, 34px); }
@media (max-height: 460px) {
  .clube { min-height: 52px; }
  .niveis button { min-height: 48px; }
}

/* álbum de taças na tela inicial */
.album { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.album-tit { font-size: 16px; font-weight: 800; color: var(--branco); }
.album-tit b { color: var(--amarelo); }
.album-escudos { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 420px; }
.album-escudos .escudo { font-size: 18px; filter: grayscale(1) brightness(0.55); opacity: 0.5; }
.album-escudos .escudo.ganho { filter: none; opacity: 1; box-shadow: 0 0 0 2px var(--amarelo), 0 0 10px rgba(255, 210, 31, 0.7); }
.como-jogar { flex: none; padding: 10px 22px; font-size: 16px; }
@media (max-height: 460px) { .album-escudos { max-width: 640px; } .album-escudos .escudo { font-size: 14px; } .como-jogar { min-height: 48px; padding: 6px 18px; } }

/* estrelas e taça nova no fim */
.premios .estrelas { display: flex; justify-content: center; gap: 10px; font-size: 54px; line-height: 1; }
.premios .estrelas span { color: rgba(255, 255, 255, 0.18); }
.premios .estrelas span.acesa { color: var(--amarelo); text-shadow: 0 0 14px rgba(255, 210, 31, 0.8), 0 3px 0 #a7780a; animation: estrela 0.5s cubic-bezier(.2, 1.8, .4, 1) both; }
@keyframes estrela { from { transform: scale(0.3) rotate(-90deg); } to { transform: none; } }
.nova-taca { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; border-radius: 12px; background: rgba(255, 210, 31, 0.16); color: var(--amarelo); font-weight: 900; font-size: 17px; animation: pula 0.5s 0.9s both; }
@keyframes pula { from { transform: scale(0.6); } to { transform: none; } }
.nova-taca .escudo { font-size: 24px; }
.nova-taca small { color: var(--cinza); font-size: 14px; }

/* confete por cima do 3D, sem pegar toque */
#confete { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }

/* tutorial da primeira partida */
#tutorial {
  position: absolute; left: 50%; top: calc(64px + var(--seg-top)); transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 12px; border-radius: 18px;
  background: rgba(255, 255, 255, 0.95); color: #0a1633; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 0 4px var(--amarelo);
  width: max-content; max-width: min(92vw, 520px);
}
#tutorial.entra { animation: tut-entra 0.45s cubic-bezier(.2, 1.6, .4, 1) both; }
#tutorial.ok { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 0 4px var(--verde); }
#tutorial .tut-emoji { font-size: 40px; line-height: 1; }
#tutorial b { display: block; font-size: 22px; font-weight: 900; }
#tutorial small { display: block; font-size: 15px; font-weight: 700; color: #3b4a6b; }
@keyframes tut-entra { from { transform: translateX(-50%) scale(0.6); } to { transform: translateX(-50%); } }
.bt.dica-pulsa { animation: pulsa 0.9s ease-in-out infinite; }
@keyframes pulsa { 0%, 100% { box-shadow: 0 6px 0 rgba(0,0,0,.35), 0 0 0 3px #fff, 0 0 0 6px rgba(255, 210, 31, 0.9); } 50% { box-shadow: 0 6px 0 rgba(0,0,0,.35), 0 0 0 3px #fff, 0 0 0 18px rgba(255, 210, 31, 0); } }
@media (orientation: portrait) { #tutorial { top: calc(70px + var(--seg-top)); } #tutorial b { font-size: 19px; } }

/* "reduzir movimento" do aparelho */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}