/* Jogos com a TV, no celular (jogadores e quem conduz): peças por cima do visual da Galera
   (galera.css + tema.css + neon.css). Cor do jogo em --c. */
:root{--c:#8A5CFF;--c-dark:#5B3FA8;--t:#2D2240}
.tl-bola{--cb:#9775FA;display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--cb);color:#1A1433;font-weight:800;font-family:var(--display);font-size:14px;flex:none;overflow:hidden;box-shadow:0 0 0 2px rgba(255,255,255,.16)}
.tl-bola img{width:100%;height:100%;object-fit:cover}
.tl-cor{color:#FF4F8B}
.tl-cor.off{color:rgba(255,255,255,.2)}
.tl-forma{display:inline-grid;place-items:center;color:#fff}
.tl-forma svg{width:100%;height:100%}
.tl-anel{position:relative;display:grid;place-items:center;width:62px;height:62px;flex:none}
.tl-anel svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.tl-anel-fundo{fill:none;stroke:var(--line);stroke-width:9}
.tl-anel-barra{fill:none;stroke:var(--brand,#F9BD33);stroke-width:9;stroke-linecap:round}
.tl-anel.pouco .tl-anel-barra{stroke:var(--bad)}
.tl-anel b{position:relative;font-family:var(--display);font-weight:700;font-size:22px;font-variant-numeric:tabular-nums}
.tl-anel.pouco b{color:var(--bad);animation:tlPulsa .5s ease-in-out infinite alternate}
@keyframes tlPulsa{to{transform:scale(1.12)}}
@keyframes tlPop{0%{transform:scale(.6);opacity:0}60%{transform:scale(1.06);opacity:1}100%{transform:none}}
@keyframes tlEntra{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes tlTreme{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.tl-toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));translate:-50% 0;z-index:2000;background:var(--ink);color:var(--bg);font-weight:800;padding:12px 18px;border-radius:14px;box-shadow:0 12px 30px -10px rgba(0,0,0,.5);max-width:calc(100% - 32px);text-align:center;animation:tlEntra .25s}