/* Camada de movimento do site (painel admin, área do jogador e página inicial).
   Tempos e curvas vindos dos componentes do transitions.dev: Notification badge, Snapshot Toolbar e Weather Day Switcher.
   Classes .t-* são as mesmas dos originais; as cores usam os tokens do site (--o, --on, --text…). */
:root{
  /* pílula deslizante (abas, filtros, menu lateral) */
  --tabs-dur:250ms;--tabs-ease:cubic-bezier(0.22,1,0.36,1);
  /* menus que crescem a partir do botão */
  --dropdown-open-dur:250ms;--dropdown-close-dur:150ms;--dropdown-pre-scale:0.97;--dropdown-closing-scale:0.99;--dropdown-ease:cubic-bezier(0.22,1,0.36,1);
  /* texto que se transforma letra a letra */
  --text-morph-dur:180ms;--text-morph-resize-dur:240ms;--text-morph-blur:2px;--text-morph-ease:cubic-bezier(0.22,1,0.36,1);--text-morph-stagger:35ms;--text-morph-rise:3px;--text-morph-shrink-lag:60ms;
  /* troca de texto curto (status) */
  --text-swap-dur:150ms;--text-swap-translate-y:4px;--text-swap-blur:2px;--text-swap-ease:ease-in-out;
  /* números que saltam */
  --digit-dur:500ms;--digit-distance:8px;--digit-stagger:70ms;--digit-blur:2px;--digit-ease:cubic-bezier(0.34,1.45,0.64,1);--digit-dir-x:0;--digit-dir-y:1;
  /* troca de ícone */
  --icon-swap-dur:250ms;--icon-swap-blur:2px;--icon-swap-start-scale:0.25;--icon-swap-ease:ease-in-out;
  /* selo de notificação (transitions.dev · Notification badge, valores originais) */
  --badge-slide-dur:260ms;--badge-pop-dur:500ms;--badge-pop-close-dur:180ms;--badge-fade-dur:400ms;--badge-fade-close-dur:180ms;--badge-blur:2px;
  --badge-offset-x:-8.2px;--badge-offset-y:12.4px;--badge-slide-ease:cubic-bezier(0.22,1,0.36,1);--badge-pop-ease:cubic-bezier(0.34,1.36,0.64,1);--badge-close-ease:cubic-bezier(0.4,0,0.2,1);
  /* dica flutuante */
  --tt-in-dur:150ms;--tt-out-dur:50ms;--tt-scale:0.98;--tt-delay:80ms;--tt-in-ease:ease-out;--tt-out-ease:ease-out;--tt-move-dur:160ms;--tt-move-ease:cubic-bezier(0.22,1,0.36,1);
  /* clique */
  --press-scale:0.97;--press-dur:150ms;--ease-smooth-out:cubic-bezier(0.22,1,0.36,1);
}

/* ── clique: todo botão afunda um pouco ── */
:where(.btn,.nav a,.tabs button,.pills button,.tabs-p a,.btab,.chip,.quick button,.me-pill,.t-pressable){transition:transform var(--press-dur) var(--ease-smooth-out),background-color .2s,color .2s,border-color .2s}
:where(.btn,.tabs button,.pills button,.quick button,.t-pressable):is(:active,.is-pressed){transform:scale(var(--press-scale))!important}
:where(button,[role=button],[role=tab],.btn){-webkit-tap-highlight-color:transparent;touch-action:manipulation}

/* ── selo de notificação (original) ── */
@keyframes t-badge-slide-in{from{transform:translate(var(--badge-offset-x),var(--badge-offset-y))}to{transform:translate(0,0)}}
.t-badge{position:absolute;top:-6px;right:-8px;pointer-events:none;will-change:transform}
.t-badge[data-open="true"]{animation:t-badge-slide-in var(--badge-slide-dur) var(--badge-slide-ease)}
.t-badge-dot{display:block;transform-origin:center;transform:scale(1);opacity:1;filter:blur(0);
  transition:transform var(--badge-pop-dur) var(--badge-pop-ease),opacity var(--badge-fade-dur) var(--badge-pop-ease),filter var(--badge-pop-dur) var(--badge-pop-ease);will-change:transform,opacity,filter}
.t-badge[data-open="false"] .t-badge-dot{transform:scale(0);opacity:0;filter:blur(var(--badge-blur));
  transition:transform var(--badge-pop-close-dur) var(--badge-close-ease),opacity var(--badge-fade-close-dur) var(--badge-close-ease),filter var(--badge-pop-close-dur) var(--badge-close-ease)}
/* visual do selo no site */
.t-badge-dot{min-width:20px;height:20px;padding:0 6px;border-radius:99px;background:var(--o);color:var(--on,#0a0a0b);font:700 11px/20px 'Inter Tight',system-ui,sans-serif;text-align:center;font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px var(--bg,#0a0a0b),0 6px 18px -4px rgba(var(--glow,255,106,0),.7)}
.t-badge.inline{position:relative;top:auto;right:auto;margin-left:auto}

/* ── pílula deslizante ── */
.t-tabs-pill{position:absolute;left:0;top:0;width:0;height:0;pointer-events:none;z-index:0;
  transition:transform var(--tabs-dur) var(--tabs-ease),width var(--tabs-dur) var(--tabs-ease),height var(--tabs-dur) var(--tabs-ease);will-change:transform,width}
.t-tabs-host{position:relative}
.t-tabs-host>*:not(.t-tabs-pill){position:relative;z-index:1}

/* ── texto que se transforma (letra a letra) ── */
.t-morph{white-space:nowrap}
.t-morph-swap{display:inline-grid;vertical-align:bottom;justify-items:start;overflow-x:clip;overflow-y:visible;transition:width var(--text-morph-resize-dur) var(--text-morph-ease) var(--text-morph-shrink-delay,0ms)}
.t-morph-swap>span{grid-area:1/1;white-space:pre}
.t-morph-ch{display:inline-block;white-space:pre;transition:opacity var(--text-morph-dur) var(--text-morph-ease) calc(var(--i,0) * var(--text-morph-stagger)),filter var(--text-morph-dur) var(--text-morph-ease) calc(var(--i,0) * var(--text-morph-stagger)),transform var(--text-morph-dur) var(--text-morph-ease) calc(var(--i,0) * var(--text-morph-stagger))}
.t-morph-new .t-morph-ch{opacity:0;filter:blur(var(--text-morph-blur));transform:translateY(var(--text-morph-rise))}
.t-morph-swap.is-morphing .t-morph-old .t-morph-ch{opacity:0;filter:blur(var(--text-morph-blur));transform:translateY(calc(var(--text-morph-rise) * -1))}
.t-morph-swap.is-morphing .t-morph-new .t-morph-ch{opacity:1;filter:blur(0);transform:none}

/* ── troca de texto curto ── */
.t-text-swap{display:inline-block;transition:transform var(--text-swap-dur) var(--text-swap-ease),filter var(--text-swap-dur) var(--text-swap-ease),opacity var(--text-swap-dur) var(--text-swap-ease)}
.t-text-swap.is-exit{transform:translateY(calc(var(--text-swap-translate-y) * -1));filter:blur(var(--text-swap-blur));opacity:0}
.t-text-swap.is-enter-start{transform:translateY(var(--text-swap-translate-y));filter:blur(var(--text-swap-blur));opacity:0;transition:none}

/* ── números que saltam ── */
@keyframes t-digit-pop-in{0%{transform:translate(calc(var(--digit-distance) * var(--digit-dir-x)),calc(var(--digit-distance) * var(--digit-dir-y)));opacity:0;filter:blur(var(--digit-blur))}100%{transform:translate(0,0);opacity:1;filter:blur(0)}}
.t-digit-group{display:inline-flex;align-items:baseline;white-space:pre}
.t-digit{display:inline-block}
.t-digit-group.is-animating .t-digit{animation:t-digit-pop-in var(--digit-dur) var(--digit-ease) both;animation-delay:calc(var(--n,0) * 28ms)}
.t-digit-group.is-animating .t-digit[data-stagger="1"]{animation-delay:calc(var(--n,0) * 28ms + var(--digit-stagger))}
.t-digit-group.is-animating .t-digit[data-stagger="2"]{animation-delay:calc(var(--n,0) * 28ms + var(--digit-stagger) * 2)}
.t-digit-group.is-animating .t-digit[data-same]{animation:none}

/* ── troca de ícone ── */
.t-icon-swap{position:relative;display:inline-grid;flex:none}
.t-icon-swap .t-icon{grid-area:1/1;display:grid;place-items:center;transition:opacity var(--icon-swap-dur) var(--icon-swap-ease),filter var(--icon-swap-dur) var(--icon-swap-ease),transform var(--icon-swap-dur) var(--icon-swap-ease)}
.t-icon-swap[data-state=a] .t-icon[data-icon=a],.t-icon-swap[data-state=b] .t-icon[data-icon=b]{opacity:1;filter:blur(0);transform:scale(1)}
.t-icon-swap[data-state=a] .t-icon[data-icon=b],.t-icon-swap[data-state=b] .t-icon[data-icon=a]{opacity:0;filter:blur(var(--icon-swap-blur));transform:scale(var(--icon-swap-start-scale))}

/* ── menu que cresce a partir do botão ── */
.t-dropdown{transform-origin:top right;transform:scale(var(--dropdown-pre-scale));opacity:0;pointer-events:none;transition:transform var(--dropdown-open-dur) var(--dropdown-ease),opacity var(--dropdown-open-dur) var(--dropdown-ease)}
.t-dropdown.is-open{transform:scale(1);opacity:1;pointer-events:auto}
.t-dropdown.is-closing{transform:scale(var(--dropdown-closing-scale));opacity:0;pointer-events:none;transition:transform var(--dropdown-close-dur) var(--dropdown-ease),opacity var(--dropdown-close-dur) var(--dropdown-ease)}

/* ── dica flutuante (gráfico) ── */
.t-tt{position:fixed;left:0;top:0;z-index:95;padding:8px 12px;border-radius:10px;background:#262626;color:#f2f2f2;font:400 12px/16px 'Inter Tight',system-ui,sans-serif;white-space:nowrap;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(196,196,196,.08),0 8px 24px rgba(0,0,0,.4);opacity:0;scale:var(--tt-scale);translate:var(--tt-x,0) var(--tt-y,0);transform-origin:50% 100%;
  transition:opacity var(--tt-out-dur) var(--tt-out-ease),scale var(--tt-out-dur) var(--tt-out-ease),translate var(--tt-move-dur) var(--tt-move-ease)}
.t-tt[data-show=true]{opacity:1;scale:1;transition:opacity var(--tt-in-dur) var(--tt-in-ease) var(--tt-delay),scale var(--tt-in-dur) var(--tt-in-ease) var(--tt-delay),translate var(--tt-move-dur) var(--tt-move-ease)}
.t-tt b{font-weight:600}

/* ── indicador "ao vivo" ── */
.live{display:inline-flex;align-items:center;gap:8px;height:30px;padding:0 12px;border-radius:99px;border:1px solid var(--line2,rgba(244,241,234,.18));font:500 10.5px/1 'Plex Mono',ui-monospace,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#8d8b86);white-space:nowrap}
.live i{position:relative;width:7px;height:7px;border-radius:50%;background:var(--ok,#5ee08a)}
.live i:after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1.5px solid var(--ok,#5ee08a);animation:t-ping 2s var(--ease-smooth-out) infinite}
@keyframes t-ping{0%{transform:scale(.4);opacity:.9}80%,100%{transform:scale(1.6);opacity:0}}

/* ── entrada em cascata ── */
@keyframes t-rise{from{opacity:0;transform:translateY(14px);filter:blur(4px)}to{opacity:1;transform:none;filter:blur(0)}}
.t-stagger>*{animation:t-rise .6s var(--ease-smooth-out) both;animation-delay:calc(var(--si,0) * 55ms)}

@media (prefers-reduced-motion:reduce){
  .t-badge,.t-badge-dot,.t-tabs-pill,.t-morph-swap,.t-morph-swap>span,.t-morph-ch,.t-text-swap,.t-icon-swap .t-icon,.t-dropdown,.t-tt{animation:none!important;transition:none!important}
  .t-digit-group .t-digit,.t-stagger>*,.live i:after{animation:none!important}
  :where(.btn,.tabs button,.pills button,.quick button,.t-pressable):is(:active,.is-pressed){transform:none!important}
}