/* FutpixelTV "preto e vermelho mais moderno" (docs/ADMIN-E-VISUAL.md §4): the --fp-* tokens and the shared pieces
   (chip, live dot, ADMIN badge, site announcement, reveal motion). Loaded after tv-theme.css and before front-menu.css;
   the existing stylesheets read these tokens gradually. Motion animates transform, opacity and filter only, and
   stops with prefers-reduced-motion or the game's own "Reduzir movimento" setting (final states stay the same). */
:root{
  --fp-bg:#07080b;--fp-bg-2:#0b0d12;--fp-surface:#111319;--fp-surface-2:#171a22;--fp-surface-3:#1f2330;
  --fp-line:#ffffff14;--fp-line-2:#ffffff29;--fp-ink:#f5f6f8;--fp-ink-2:#c9ced8;--fp-muted:#8d94a3;
  --fp-red:#e5173a;--fp-red-hi:#ff3f59;--fp-red-deep:#8f0b22;--fp-red-ink:#ff8396;--fp-red-glow:#e5173a66;
  --fp-gold:#f6d77e;--fp-live:#ff2d4a;--fp-ok:#2fd27a;--fp-warn:#ffb020;--fp-info:#4aa8ff;
  --fp-cta:linear-gradient(180deg,#e81e42,#c8102e 55%,#a30d28);
  --fp-hero-wash:radial-gradient(120% 90% at 85% 10%,#e5173a33,transparent 60%),linear-gradient(180deg,#0b0d12,#07080b);
  --fp-card:linear-gradient(160deg,#1b1f27f2,#101218f5);
  --fp-fs-display:clamp(44px,6.4vw,88px);--fp-fs-h1:clamp(32px,4vw,52px);--fp-fs-h2:clamp(22px,2.4vw,30px);
  --fp-fs-h3:19px;--fp-fs-body:15px;--fp-fs-small:13px;--fp-fs-micro:11px;--fp-lh-tight:1.02;--fp-lh-body:1.45;
  --fp-s1:4px;--fp-s2:8px;--fp-s3:12px;--fp-s4:16px;--fp-s5:24px;--fp-s6:32px;--fp-s7:48px;--fp-s8:72px;
  --fp-gutter:clamp(16px,4vw,40px);--fp-max:1380px;
  --fp-r-sm:6px;--fp-r-md:10px;--fp-r-lg:16px;--fp-r-pill:999px;
  --fp-shadow-1:0 1px 0 #ffffff0d inset,0 8px 24px #0008;--fp-shadow-2:0 1px 0 #ffffff12 inset,0 18px 48px #000a;
  --fp-glow-red:0 0 0 1px #e5173a80,0 0 24px #e5173a59;--fp-glow-gold:0 0 0 1px #f6d77e99,0 0 18px #f6d77e66;
  --fp-focus:0 0 0 2px #07080b,0 0 0 4px #ff3f59;
  --fp-ease:cubic-bezier(.2,.8,.2,1);--fp-ease-out:cubic-bezier(.16,1,.3,1);
  --fp-t-fast:120ms;--fp-t:200ms;--fp-t-slow:420ms;--fp-t-hero:900ms
}

/* Chips: 24 px pills, micro caps; "live" carries the pulsing dot. */
.fp-chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border:1px solid var(--fp-line-2);border-radius:var(--fp-r-pill);background:#0a0b0fcc;color:var(--fp-ink-2);font:700 var(--fp-fs-micro)/1 var(--tv-font,inherit);letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.fp-chip--live{border-color:#ff2d4a80;background:linear-gradient(180deg,#e5173a,#a30d28);color:#fff}
.fp-chip--ok{border-color:#2fd27a73;color:#b7f5d2}.fp-chip--warn{border-color:#ffb02080;color:#ffe2a8}.fp-chip--muted{color:var(--fp-muted)}
.fp-live-dot{position:relative;flex:none;width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 6px #fff}
.fp-live-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid #ffffffb3;opacity:0;animation:fp-ping 1.6s var(--fp-ease-out) infinite}

/* ADMIN badge: only rendered when the server's public payload says role "admin" (never derived from a name). */
.fp-role-badge{position:relative;display:inline-flex;align-items:center;flex:none;height:18px;padding:0 7px;overflow:hidden;border-radius:var(--fp-r-pill);background:linear-gradient(90deg,#8f0b22,#e5173a,#ff3f59,#e5173a,#8f0b22);background-size:300% 100%;color:#fff;font:800 10px/1 var(--tv-font,inherit);letter-spacing:.14em;text-transform:uppercase;text-shadow:0 1px 0 #0006;box-shadow:var(--fp-glow-gold);vertical-align:middle;animation:fp-badge-flow 2.4s linear infinite,fp-badge-glow 2.4s ease-in-out infinite}
.fp-role-badge::after{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;background:linear-gradient(100deg,#fff0,#ffffffb3 50%,#fff0);transform:translateX(-160%) skewX(-20deg);animation:fp-badge-shine 3s ease-in-out infinite}

/* Site announcement (GET /api/announcement): icon per level, text, optional action, dismiss. */
.fp-announcement{position:relative;display:flex;align-items:center;gap:12px;margin:12px 0 0;padding:10px 10px 10px 14px;overflow:hidden;border:1px solid var(--fp-line-2);border-left:4px solid var(--fp-red);border-radius:var(--fp-r-md);background:linear-gradient(90deg,#2a0d14f2,#12141af2 60%);box-shadow:var(--fp-shadow-1);color:var(--fp-ink);animation:fp-rise var(--fp-t-slow) var(--fp-ease-out) both}
.fp-announcement[hidden]{display:none}
.fp-announcement[data-level=info]{border-left-color:var(--fp-info);background:linear-gradient(90deg,#0e1a2af2,#12141af2 60%)}
.fp-announcement[data-level=warning]{border-left-color:var(--fp-warn);background:linear-gradient(90deg,#2a200cf2,#12141af2 60%)}
.fp-announcement::after{content:"";position:absolute;top:0;bottom:0;left:0;width:30%;background:linear-gradient(100deg,#fff0,#ffffff12 50%,#fff0);transform:translateX(-120%);animation:fp-sweep-once 1.4s var(--fp-ease-out) .3s both;pointer-events:none}
.fp-announcement-icon{display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;background:#e5173a2e;color:var(--fp-red-hi)}
.fp-announcement[data-level=info] .fp-announcement-icon{background:#4aa8ff26;color:var(--fp-info)}
.fp-announcement[data-level=warning] .fp-announcement-icon{background:#ffb02026;color:var(--fp-warn)}
.fp-announcement-icon svg{width:18px;height:18px}
.fp-announcement-text{flex:1;min-width:0;margin:0;font:600 14px/1.4 var(--ui-font,inherit);overflow-wrap:anywhere}
.fp-announcement-action,.fp-announcement-close{flex:none;min-height:40px}
.fp-announcement-close{min-width:40px;padding:0}

/* Reveal: cards and sections enter staggered once (opacity + 12 px rise); --fp-i sets each one's place in the cascade. */
.fp-reveal{animation:fp-rise var(--fp-t-slow) var(--fp-ease-out) calc(var(--fp-i,0) * 40ms) backwards}

@keyframes fp-rise{from{opacity:0;transform:translateY(12px)}}
@keyframes fp-ping{0%{opacity:.9;transform:scale(.6)}80%,100%{opacity:0;transform:scale(1.6)}}
@keyframes fp-badge-flow{to{background-position:300% 0}}
@keyframes fp-badge-glow{50%{box-shadow:0 0 0 1px #f6d77ecc,0 0 16px #f6d77e8c}}
@keyframes fp-badge-shine{0%,55%{transform:translateX(-160%) skewX(-20deg)}100%{transform:translateX(360%) skewX(-20deg)}}
@keyframes fp-sweep-once{to{transform:translateX(420%)}}

@media(prefers-reduced-motion:reduce){
  .fp-reveal,.fp-announcement,.fp-announcement::after,.fp-live-dot::after,.fp-role-badge,.fp-role-badge::after{animation:none!important}
  .fp-role-badge{background-position:50% 0}
}
html:has(#settingsReducedMotion:checked) :is(.fp-reveal,.fp-announcement,.fp-role-badge),html:has(#settingsReducedMotion:checked) :is(.fp-announcement,.fp-live-dot,.fp-role-badge)::after{animation:none!important}