/* FanPulse · Go live as an announcer (owner mockups, 2026-10-16, "FansPulse Announcer Assets").
   Shared by the web game page (game.php) and the app's game screen (live-v2.php).
   fp-announce.js builds the preview sheet; the pages render the banner, card and empty state. */

:root { --fpa-lime: var(--fp-lime, var(--c-lime, #C6FF00)); --fpa-ink: #08120a; --fpa-panel: #0b1b2a; --fpa-line: rgba(160, 190, 220, .18); --fpa-text-2: #b7c3d2; }
.fpa-ico { width: 1em; height: 1em; flex: none; }

/* The one call to action: lime, full width, mic first. */
.fpa-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 52px; padding: 0 20px; border: 0; border-radius: 14px;
  background: var(--fpa-lime); color: var(--fpa-ink); font: 800 17px/1.1 var(--font-body, system-ui); text-decoration: none; cursor: pointer;
  box-shadow: 0 8px 24px -10px rgba(198, 255, 0, .55); transition: transform .12s ease, box-shadow .2s ease, filter .2s ease; }
.fpa-btn .fpa-ico { font-size: 22px; }
.fpa-btn .fpa-go-chev { margin-left: auto; font-size: 18px; }
.fpa-btn:hover { filter: brightness(1.04); box-shadow: 0 10px 30px -10px rgba(198, 255, 0, .7); }
.fpa-btn:active { transform: translateY(1px); }
.fpa-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
/* Second choice: the same shape, outlined, so the lime fill marks the first choice. */
.fpa-btn.fpa-btn-2 { background: transparent; color: var(--fpa-lime); box-shadow: inset 0 0 0 2px var(--fpa-lime); }
.fpa-btn.fpa-btn-2:hover { background: rgba(198, 255, 0, .08); filter: none; }
.fpa-card.fpa-card-2 { border-width: 1px; border-color: rgba(198, 255, 0, .45); background: #0a1622; }
.fpa-link { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 6px 2px; color: #7fb6ff; font: 600 14px/1.2 var(--font-body, system-ui);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.fpa-link .fpa-ico { font-size: 14px; }
.fpa-link:hover { color: #a9cdff; }

/* Web: the banner under the scoreboard ("Your voice. This game."). */
.fpa-banner { display: flex; align-items: center; gap: 18px; padding: 16px 22px; margin: 0 0 12px; border-radius: 16px; border: 2px solid var(--fpa-lime);
  background: radial-gradient(120% 140% at 0% 50%, rgba(198, 255, 0, .10), transparent 55%), #0a1622; position: relative; overflow: hidden; }
.fpa-banner > .fpa-ico { font-size: 44px; color: var(--fpa-lime); }
.fpa-banner-copy { display: grid; gap: 2px; min-width: 0; }
.fpa-banner-copy b { color: var(--fpa-lime); font: 800 26px/1.1 var(--font-body, system-ui); letter-spacing: -.01em; text-transform: none; }
.fpa-banner-copy span { color: #e8eef6; font-size: 16px; }
.fpa-banner-wave { flex: 1; min-width: 40px; height: 40px; color: var(--fpa-lime); opacity: .28; background:
  repeating-linear-gradient(90deg, currentColor 0 3px, transparent 3px 9px); -webkit-mask: radial-gradient(50% 60% at 50% 50%, #000, transparent); mask: radial-gradient(50% 60% at 50% 50%, #000, transparent); }
.fpa-banner .fpa-link { color: var(--fpa-lime); font-size: 16px; white-space: nowrap; }
@media (max-width: 720px) {
  .fpa-banner { padding: 14px 16px; gap: 12px; flex-wrap: wrap; }
  .fpa-banner > .fpa-ico { font-size: 34px; }
  .fpa-banner-copy b { font-size: 20px; }
  .fpa-banner-wave { display: none; }
}

/* Empty state: nobody is calling the game (web Announcers panel, app Listen sheet). */
.fpa-empty { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 4px 4px 8px; }
.fpa-art { position: relative; width: 100%; max-width: 360px; }
.fpa-art img { display: block; width: 100%; height: auto; border-radius: 12px;
  -webkit-mask: radial-gradient(85% 90% at 50% 45%, #000 60%, transparent); mask: radial-gradient(85% 90% at 50% 45%, #000 60%, transparent); }
.fpa-pill { display: inline-flex; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: #dfe7f1; font: 600 13px/1 var(--font-body, system-ui); margin-top: -18px; position: relative; }
.fpa-empty h3, .fp-coverage .fpa-empty h3 { margin: 4px 0 0; color: #fff; font: 800 24px/1.15 var(--font-body, system-ui); letter-spacing: -.01em; text-transform: none; }
.fpa-empty p { margin: 0; color: var(--fpa-text-2); font-size: 16px; line-height: 1.4; }
.fpa-empty .fpa-btn { margin-top: 8px; }
.fpa-or { display: flex; align-items: center; gap: 12px; width: 100%; color: var(--fpa-text-2); font-size: 13px; margin: 6px 0 2px; }
.fpa-or::before, .fpa-or::after { content: ""; flex: 1; height: 1px; background: var(--fpa-line); }

/* The AI as the alternative ("Listen to FansPulse AI"). */
.fpa-ai { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--fpa-line); background: rgba(255, 255, 255, .03);
  color: #fff; text-align: left; cursor: pointer; font: inherit; }
.fpa-ai > .fpa-ico { font-size: 30px; color: #c9d4e2; }
.fpa-ai-copy { display: grid; gap: 2px; flex: 1; min-width: 0; }
.fpa-ai-copy b { font: 700 16px/1.2 var(--font-body, system-ui); }
.fpa-ai-copy small { color: var(--fpa-text-2); font-size: 13px; }
.fpa-ai .fpa-go-chev { font-size: 18px; color: #c9d4e2; }
.fpa-ai:hover { border-color: rgba(198, 255, 0, .45); }
.fpa-ai:focus-visible { outline: 2px solid var(--fpa-lime); outline-offset: 2px; }

/* App game screen: the promotion card ("Call this game live"). */
.fpa-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 14px; align-items: center; padding: 16px; border-radius: 16px; border: 2px solid var(--fpa-lime);
  background: radial-gradient(90% 120% at 0% 0%, rgba(198, 255, 0, .10), transparent 60%), #0a1622; }
.fpa-card-mic { grid-row: span 2; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; color: var(--fpa-lime); font-size: 36px;
  background: radial-gradient(circle, rgba(198, 255, 0, .16), rgba(198, 255, 0, .04)); box-shadow: inset 0 0 0 2px rgba(198, 255, 0, .45); }
.fpa-card h3 { text-transform: none; margin: 0; color: #fff; font: 800 24px/1.1 var(--font-body, system-ui); letter-spacing: -.01em; }
.fpa-card p { margin: 0; color: #e3eaf3; font-size: 15px; line-height: 1.35; }
.fpa-card p small { display: block; color: var(--fpa-text-2); font-size: 13px; }
.fpa-card .fpa-btn { grid-column: 1 / -1; margin-top: 10px; }

/* ---------------------------------------------------------------- preview sheet */
.fpa-open, .fpa-open body { overflow: hidden; }
.fpa-root { position: fixed; inset: 0; z-index: 2000; }
.fpa-scrim { position: absolute; inset: 0; background: rgba(1, 6, 14, .6); opacity: 0; transition: opacity .2s ease; }
.fpa-sheet { position: absolute; left: 50%; bottom: 0; width: min(100%, 480px); max-height: min(92dvh, 860px); overflow-y: auto; overscroll-behavior: contain;
  transform: translate(-50%, 100%); transition: transform .24s cubic-bezier(.2, .8, .2, 1);
  padding: 10px 20px calc(18px + env(safe-area-inset-bottom, 0px)); border-radius: 22px 22px 0 0; background: var(--fpa-panel); color: #fff;
  box-shadow: 0 -20px 60px rgba(0, 0, 0, .5); border: 1px solid var(--fpa-line); border-bottom: 0; font-family: var(--font-body, system-ui); }
.fpa-root.is-open .fpa-scrim { opacity: 1; }
.fpa-root.is-open .fpa-sheet { transform: translate(-50%, 0); }
@media (min-width: 720px) {
  .fpa-sheet { bottom: auto; top: 50%; transform: translate(-50%, -46%); opacity: 0; border-radius: 22px; border-bottom: 1px solid var(--fpa-line); transition: transform .22s ease, opacity .22s ease; }
  .fpa-root.is-open .fpa-sheet { transform: translate(-50%, -50%); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .fpa-sheet, .fpa-scrim { transition: none; } }
.fpa-grab { width: 40px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .25); margin: 0 auto 12px; }
.fpa-head { display: flex; align-items: center; gap: 10px; }
.fpa-head h2 { margin: 0; flex: 1; font: 800 24px/1.15 var(--font-body, system-ui); letter-spacing: -.01em; text-transform: none; color: #fff; }
.fpa-notlive { padding: 6px 12px; border-radius: 999px; background: #e0284a; color: #fff; font: 700 14px/1 var(--font-body, system-ui); white-space: nowrap; }
.fpa-x { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 10px; background: none; color: #fff; font-size: 22px; cursor: pointer; }
.fpa-x:hover { background: rgba(255, 255, 255, .08); }
.fpa-sub { margin: 4px 0 16px; color: var(--fpa-text-2); font-size: 15px; }

.fpa-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.fpa-seg button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 10px; border-radius: 12px; border: 1.5px solid var(--fpa-line);
  background: rgba(255, 255, 255, .03); color: #e8eef6; font: 700 15px/1 var(--font-body, system-ui); cursor: pointer; }
.fpa-seg button .fpa-ico { font-size: 20px; }
.fpa-seg button small { font-weight: 500; font-size: 12px; opacity: .85; }
.fpa-seg button[aria-checked="true"] { border-color: var(--fpa-lime); color: var(--fpa-lime); background: rgba(198, 255, 0, .06); }
.fpa-seg button:disabled { opacity: .45; cursor: not-allowed; }
.fpa-cam { margin: -4px 0 14px; border-radius: 12px; overflow: hidden; background: #000; aspect-ratio: 16 / 9; }
.fpa-cam video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }

.fpa-field { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 8px; }
.fpa-field label, .fpa-label { font: 700 16px/1.2 var(--font-body, system-ui); color: #fff; }
.fpa-count { color: var(--fpa-text-2); font-size: 13px; font-variant-numeric: tabular-nums; }
.fpa-input, .fpa-select { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 8px 0 14px; margin-bottom: 16px; border-radius: 12px; border: 1px solid var(--fpa-line); background: rgba(255, 255, 255, .04); }
.fpa-input:focus-within, .fpa-select:focus-within { border-color: var(--fpa-lime); }
.fpa-input input, .fpa-select select { flex: 1; min-width: 0; height: 50px; border: 0; background: none; color: #fff; font: 500 16px/1 var(--font-body, system-ui); outline: none; }
.fpa-select select { appearance: none; -webkit-appearance: none; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dfe7f1' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center / 18px; padding-right: 30px; }
.fpa-select select option { color: #111; }
.fpa-select > .fpa-ico { font-size: 20px; color: #dfe7f1; }
.fpa-clear { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 8px; background: none; color: #dfe7f1; font-size: 16px; cursor: pointer; }

.fpa-meter, .fpa-voice { display: flex; align-items: center; gap: 14px; padding: 14px; margin-bottom: 16px; border-radius: 14px; border: 1px solid var(--fpa-line); background: rgba(255, 255, 255, .03); }
.fpa-meter-mic { display: grid; place-items: center; flex: none; width: 58px; height: 58px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .35); font-size: 26px; color: #fff; }
.fpa-meter-body { display: grid; gap: 4px; min-width: 0; flex: 1; }
.fpa-meter-body b { font-size: 15px; }
.fpa-meter-body small { color: var(--fpa-text-2); font-size: 13px; }
.fpa-bars { display: flex; align-items: center; gap: 3px; height: 34px; margin-bottom: 4px; }
.fpa-bars i { flex: 1; max-width: 5px; height: 100%; border-radius: 3px; background: var(--fpa-lime); transform: scaleY(.12); transform-origin: center; transition: transform .06s linear; }
.fpa-bars i:nth-child(n+16) { opacity: .45; }
.fpa-voice-av { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #c9d4e2; font-size: 24px; }
.fpa-voice-t { flex: 1; color: var(--fpa-text-2); font-size: 13px; line-height: 1.35; }
.fpa-voice-btn { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .35); background: none; color: #fff; font-size: 26px; cursor: pointer; }
.fpa-voice-btn:hover { border-color: var(--fpa-lime); color: var(--fpa-lime); }
.fpa-voice-btn.is-rec { border-color: #e0284a; color: #ff5a76; animation: fpa-pulse 1s ease-in-out infinite; }
@keyframes fpa-pulse { 50% { box-shadow: 0 0 0 6px rgba(224, 40, 74, .2); } }
.fpa-note { display: flex; gap: 12px; padding: 14px; margin-bottom: 16px; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid var(--fpa-line); }
.fpa-note > .fpa-ico { font-size: 22px; color: #c9d4e2; margin-top: 1px; }
.fpa-note p { margin: 0; display: grid; gap: 4px; }
.fpa-note b { font-size: 14px; }
.fpa-note span { color: var(--fpa-text-2); font-size: 13px; }
.fpa-actions { display: grid; gap: 10px; }
.fpa-go { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 56px; border: 0; border-radius: 14px; background: var(--fpa-lime); color: var(--fpa-ink);
  font: 800 19px/1 var(--font-body, system-ui); text-decoration: none; cursor: pointer; box-shadow: 0 8px 24px -10px rgba(198, 255, 0, .6); }
.fpa-go .fpa-ico { font-size: 24px; }
.fpa-go:active { transform: translateY(1px); }
.fpa-go:focus-visible, .fpa-cancel:focus-visible, .fpa-seg button:focus-visible, .fpa-voice-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.fpa-cancel { min-height: 52px; border-radius: 14px; border: 1.5px solid rgba(255, 255, 255, .35); background: none; color: #fff; font: 700 17px/1 var(--font-body, system-ui); cursor: pointer; }
.fpa-cancel:hover { border-color: #fff; }