/* ============================================================
   fh-battle.css — the battle board, "Glass" look
   Used on the creator's public profile and in the creator dashboard
   (Sell › Battles). Drawn by fh-battle.js.
   The two hype clips sit side by side in rounded cards; one frosted-glass
   scorecard floats under them. Side A is the page's creator (blue),
   side B the opponent (gold).
   ============================================================ */
.fb { --a:#8FB3FF; --b:#E3B862; --a-hi:#CFE0FF; --b-hi:#F6DFA0; --ink:#07090F; --red:#E5484D;
  position:relative; isolation:isolate; overflow:hidden; color:#F4F5F7; background:var(--ink); border-radius:26px; padding:20px;
  font-family:Inter,ui-sans-serif,system-ui,sans-serif; text-align:left; box-shadow:0 30px 60px -30px rgba(7,9,15,.7); }
.fb.fb-profile { border-radius:30px; display:flex; flex-direction:column; }
.fb *, .fb *::before, .fb *::after { box-sizing:border-box; }
.fb [hidden] { display:none !important; }
.fb button { font-family:inherit; }

/* Soft blue and gold light drifting behind the glass */
.fb-blob { position:absolute; width:62%; aspect-ratio:1; border-radius:50%; filter:blur(80px); opacity:.5; z-index:-1; pointer-events:none; animation:fbDrift 14s ease-in-out infinite alternate; }
.fb-blob.a { background:#2F5BFF; left:-18%; top:-22%; }
.fb-blob.b { background:#C98A1C; right:-18%; bottom:-28%; animation-delay:-7s; }
@keyframes fbDrift { to { transform:translate(8%,10%) scale(1.1); } }

/* ── Top line ── */
.fb-top { display:flex; align-items:center; gap:12px; margin-bottom:16px; font-size:13px; min-width:0; }
.fb-live { display:inline-flex; align-items:center; gap:8px; padding:7px 12px; border-radius:99px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); font-weight:700; font-size:12px; letter-spacing:.06em; white-space:nowrap; }
.fb-live i { width:7px; height:7px; border-radius:50%; background:var(--red); animation:fbPing 1.6s ease-out infinite; }
.fb-live.soon i { background:#6E95FF; animation:none; }
.fb-live.over i { background:#8B93A5; animation:none; }
@keyframes fbPing { 0% { box-shadow:0 0 0 0 rgba(229,72,77,.6); } 70% { box-shadow:0 0 0 7px rgba(229,72,77,0); } 100% { box-shadow:0 0 0 0 rgba(229,72,77,0); } }
.fb-title { font-weight:700; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; text-transform:capitalize; }
.fb-title span { text-transform:none; }
.fb-title em { font-style:normal; font-weight:500; color:rgba(255,255,255,.45); margin:0 4px; }
.fb-when { margin-left:auto; font-size:12.5px; font-weight:600; color:rgba(255,255,255,.6); white-space:nowrap; }

/* ── The two clip cards ── */
.fb-stage { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.fb-cam { position:relative; isolation:isolate; aspect-ratio:1/1; max-height:500px; width:100%; border-radius:22px; overflow:hidden; background:#0E1119; border:1px solid rgba(255,255,255,.12); transition:box-shadow .4s; }
.fb-cam video, .fb-media { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.fb-media { background:center 25%/cover no-repeat; animation:fbKb 15s ease-in-out infinite alternate; }
.fb-cam.side-b .fb-media { animation-duration:18s; animation-direction:alternate-reverse; }
.fb-cam.audio .fb-media { filter:blur(18px) brightness(.45) saturate(1.2); transform:scale(1.2); animation:none; }
.fb-noclip { position:absolute; inset:0; display:grid; place-items:center; font-size:64px; font-weight:800; color:rgba(255,255,255,.2); background:radial-gradient(60% 60% at 50% 40%,#1D2230,#0B0D14); }
@keyframes fbKb { from { transform:scale(1.02); } to { transform:scale(1.1) translate(-1.5%,-1%); } }
.fb-shade { position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(0,0,0,.4) 0,transparent 28%,transparent 62%,rgba(0,0,0,.6) 100%); }
.fb-cam.glow { box-shadow:0 0 0 2px var(--a),0 0 44px rgba(143,179,255,.4); }
.fb-cam.side-b.glow { box-shadow:0 0 0 2px var(--b),0 0 44px rgba(227,184,98,.4); }
.fb-prog { position:absolute; left:14px; right:14px; bottom:72px; height:3px; border-radius:3px; background:rgba(255,255,255,.22); overflow:hidden; z-index:2; }
.fb-prog i { display:block; height:100%; width:0; background:#fff; transition:width .25s linear; }
/* Voice clip: the creator in a ring, with sound rings and a waveform */
.fb-voice { position:absolute; inset:0; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:44px 0 64px; }
.fb-vav { position:relative; width:38%; aspect-ratio:1; border-radius:50%; background:#1D2230 center/cover; display:grid; place-items:center; font-size:34px; font-weight:800; color:rgba(255,255,255,.5); box-shadow:0 0 0 3px rgba(227,184,98,.85); }
.fb-cam.side-a .fb-vav { box-shadow:0 0 0 3px rgba(143,179,255,.85); }
.fb-vav::before, .fb-vav::after { content:""; position:absolute; inset:-3px; border-radius:50%; border:1.5px solid rgba(227,184,98,.6); animation:fbRing 2.4s ease-out infinite; }
.fb-cam.side-a .fb-vav::before, .fb-cam.side-a .fb-vav::after { border-color:rgba(143,179,255,.6); }
.fb-vav::after { animation-delay:-1.2s; }
@keyframes fbRing { from { transform:scale(1); opacity:1; } to { transform:scale(1.5); opacity:0; } }
.fb-wave { display:flex; align-items:center; gap:3px; height:34px; width:62%; }
.fb-wave i { flex:1; border-radius:2px; background:var(--b-hi); animation:fbWave 1.1s ease-in-out infinite; }
.fb-cam.side-a .fb-wave i { background:var(--a-hi); }
.fb-wave i:nth-child(3n) { animation-delay:-.3s; } .fb-wave i:nth-child(3n+1) { animation-delay:-.7s; } .fb-wave i:nth-child(4n) { animation-delay:-.5s; animation-duration:.9s; }
@keyframes fbWave { 0%,100% { height:16%; } 50% { height:100%; } }
/* Card labels */
.fb-tags { position:absolute; left:14px; top:14px; z-index:2; display:flex; flex-wrap:wrap; align-items:flex-start; gap:6px; max-width:calc(100% - 60px); }
.fb-cam { container-type:inline-size; }
@container (max-width:360px) { .fb-sound span { display:none; } .fb-sound { padding:7px; } }
.fb-tag { white-space:nowrap; display:inline-flex; align-items:center; gap:7px; padding:6px 11px; border-radius:99px; background:rgba(0,0,0,.42); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); font-size:11.5px; }
.fb-tag b { font-weight:600; }
.fb-eq { display:inline-flex; align-items:flex-end; gap:2px; height:10px; }
.fb-eq i { width:2px; background:currentColor; border-radius:1px; animation:fbEq 1s ease-in-out infinite; }
.fb-eq i:nth-child(2) { animation-delay:-.4s; } .fb-eq i:nth-child(3) { animation-delay:-.7s; } .fb-eq i:nth-child(4) { animation-delay:-.2s; }
@keyframes fbEq { 0%,100% { height:25%; } 50% { height:100%; } }
.fb-leading { white-space:nowrap; padding:6px 10px; border-radius:99px; font-size:11px; font-weight:800; letter-spacing:.04em; color:var(--ink); background:var(--a); }
.fb-cam.side-b .fb-leading { background:var(--b); }
.fb-final { position:absolute; left:50%; top:14px; transform:translateX(-50%); z-index:2; padding:6px 10px; border-radius:99px; font-size:11px; font-weight:800; letter-spacing:.06em; background:var(--red); color:#fff; white-space:nowrap; }
.fb-review { position:absolute; left:14px; right:14px; bottom:48px; z-index:2; font-size:12px; font-weight:600; color:#FCD34D; }
.fb-sound { position:absolute; right:12px; top:12px; z-index:3; display:inline-flex; align-items:center; gap:6px; padding:7px 11px; border-radius:99px; border:0; background:rgba(0,0,0,.5); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); color:#fff; font-size:11.5px; font-weight:700; cursor:pointer; }
.fb-sound svg { width:14px; height:14px; }
.fb-sound.on { background:rgba(255,255,255,.22); }
.fb-pops { position:absolute; left:14px; bottom:80px; width:0; height:0; z-index:4; }
.fb-pop { position:absolute; left:0; bottom:0; white-space:nowrap; font-size:12.5px; font-weight:700; padding:6px 11px; border-radius:99px; background:rgba(10,12,18,.72); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,.14); animation:fbPop 2.3s cubic-bezier(.2,.8,.2,1) forwards; }
.fb-pop b { color:var(--a-hi); } .fb-cam.side-b .fb-pop b { color:var(--b-hi); }
@keyframes fbPop { 0% { opacity:0; transform:translateY(10px) scale(.9); } 12% { opacity:1; transform:none; } 75% { opacity:1; transform:translateY(-36px); } 100% { opacity:0; transform:translateY(-52px); } }
/* Lead change / milestone banner: a glass toast over the cards */
.fb-lower { position:absolute; left:50%; top:50%; z-index:6; transform:translate(-50%,-50%) scale(.9); opacity:0; pointer-events:none; padding:12px 20px; border-radius:16px; background:rgba(18,21,30,.78); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); font-weight:800; font-size:15px; white-space:nowrap; max-width:92%; overflow:hidden; text-overflow:ellipsis; box-shadow:0 20px 40px -14px rgba(0,0,0,.7); }
.fb-lower.side-a { box-shadow:0 0 0 1px var(--a),0 20px 40px -14px rgba(0,0,0,.7); }
.fb-lower.side-b { box-shadow:0 0 0 1px var(--b),0 20px 40px -14px rgba(0,0,0,.7); }
.fb-lower.mile { box-shadow:0 0 0 1px #4ADE80,0 20px 40px -14px rgba(0,0,0,.7); }
.fb-lower.show { animation:fbToast 2.8s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes fbToast { 0% { opacity:0; transform:translate(-50%,-50%) scale(.9); } 12%,80% { opacity:1; transform:translate(-50%,-50%) scale(1); } 100% { opacity:0; transform:translate(-50%,-50%) scale(1); } }
.fb.shake .fb-stage { animation:fbShake .45s; }
@keyframes fbShake { 20% { transform:translateX(-3px); } 40% { transform:translateX(3px); } 60% { transform:translateX(-2px); } 80% { transform:translateX(2px); } }

/* ── The frosted scorecard ── */
.fb-panel { position:relative; z-index:3; margin:-60px 18px 0; padding:18px 20px; border-radius:22px; background:rgba(18,21,30,.64); border:1px solid rgba(255,255,255,.14); backdrop-filter:blur(22px) saturate(1.3); -webkit-backdrop-filter:blur(22px) saturate(1.3); box-shadow:0 30px 60px -20px rgba(0,0,0,.7); display:flex; flex-direction:column; gap:14px; }
.fb-board { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; }
.fb-side { display:flex; align-items:center; gap:12px; min-width:0; }
.fb-side.side-b { flex-direction:row-reverse; text-align:right; }
/* The ring around each photo fills with that side's share of the total */
.fb-ring { --p:50%; flex:none; width:52px; height:52px; border-radius:50%; padding:3px; background:conic-gradient(var(--a) var(--p), rgba(255,255,255,.12) 0); transition:background .9s; }
.fb-side.side-b .fb-ring { background:conic-gradient(var(--b) var(--p), rgba(255,255,255,.12) 0); }
.fb-pic { display:grid; place-items:center; width:100%; height:100%; border-radius:50%; background:#1D2230 center/cover; border:2px solid rgba(18,21,30,.9); font-weight:800; color:rgba(255,255,255,.6); }
.fb-sidetxt { display:flex; flex-direction:column; min-width:0; }
.fb-name { font-size:13px; font-weight:600; color:rgba(255,255,255,.7); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fb-score { font-size:34px; font-weight:800; letter-spacing:-.03em; line-height:1.05; font-variant-numeric:tabular-nums; background:linear-gradient(180deg,#fff,#D9DCE3 55%,#9EA4B2); -webkit-background-clip:text; background-clip:text; color:transparent; }
.fb-score.bump { background:none; -webkit-background-clip:border-box; background-clip:border-box; color:var(--a-hi); }
.side-b .fb-score.bump { color:var(--b-hi); }
.fb-count { font-size:11.5px; color:rgba(255,255,255,.5); }
.fb-clock { display:flex; flex-direction:column; align-items:center; text-align:center; }
.fb-clock b { font-size:22px; font-weight:600; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.fb-clock span { font-size:10.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.fb-clock.final b { color:#FCA5A5; animation:fbBlink 1s steps(2) infinite; }
@keyframes fbBlink { 50% { opacity:.35; } }
.fb-mom { position:relative; display:flex; height:6px; border-radius:6px; background:linear-gradient(90deg,#E3B862,#C98A1C); }
.fb-mom .side-a { width:50%; border-radius:6px 0 0 6px; background:linear-gradient(90deg,#5E8BFF,#8FB3FF); transition:width .9s cubic-bezier(.2,.8,.2,1); }
.fb-mom .side-b { flex:1; }
.fb-mom i { position:absolute; top:50%; left:50%; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; background:#fff; box-shadow:0 0 12px 3px rgba(255,255,255,.5); transition:left .9s cubic-bezier(.2,.8,.2,1); }
/* Dashboard: backers, how far ahead, milestones */
.fb-stats span:not(.fb-ahead) { display:none; }
.fb-stats { display:flex; justify-content:center; gap:10px; font-size:12.5px; color:rgba(255,255,255,.6); }
.fb-stats b { color:#fff; font-variant-numeric:tabular-nums; }
.fb-goals { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.fb-goal { display:flex; flex-direction:column; gap:4px; min-width:0; }
.fb-ms { display:flex; gap:7px; align-items:baseline; font-size:12px; color:rgba(255,255,255,.6); }
.fb-ms i { font-style:normal; width:14px; flex-shrink:0; text-align:center; color:rgba(255,255,255,.4); }
.fb-ms b { color:#fff; font-variant-numeric:tabular-nums; }
.fb-ms.done { color:rgba(255,255,255,.85); } .fb-ms.done i { color:#4ADE80; }
.fb-ms.just { animation:fbMs 1.2s ease-out 2; border-radius:6px; }
@keyframes fbMs { 30% { background:rgba(74,222,128,.22); } }
/* Latest backer: one line that changes, nothing scrolls sideways */
.fb-ticker { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:14px; background:rgba(255,255,255,.05); min-width:0; }
.fb-tk-h { font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.5); flex-shrink:0; }
.fb-feed { list-style:none; margin:0; padding:0; min-width:0; flex:1; }
.fb-feed li { display:none; align-items:center; gap:7px; font-size:13px; color:rgba(255,255,255,.75); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; animation:fbIn .5s ease-out; }
.fb-feed li:first-child { display:flex; }
.fb-feed li b { color:#fff; } .fb-feed li em { font-style:normal; color:#fff; font-weight:800; }
.fb-feed .d { width:8px; height:8px; border-radius:50%; flex-shrink:0; background:var(--a); } .fb-feed .d.b { background:var(--b); }
.fb-feed .none { color:rgba(255,255,255,.5); animation:none; }
@keyframes fbIn { from { opacity:0; transform:translateY(6px); } }
.fb-foot { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.fb-top3 { font-size:12.5px; color:rgba(255,255,255,.75); }
.fb-top3 span { display:block; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.5); font-weight:700; margin-bottom:3px; }
.fb-top3 b { display:inline-grid; place-items:center; width:16px; height:16px; border-radius:50%; background:rgba(255,255,255,.14); font-size:10.5px; margin:0 3px 0 8px; }
.fb-top3 b:first-of-type { margin-left:0; background:var(--b); color:var(--ink); }
.fb-btn { height:44px; padding:0 22px; border-radius:99px; border:0; background:#fff; color:var(--ink); font-size:14px; font-weight:800; cursor:pointer; }
.fb-btn.blue { background:#fff; }
.fb-acts { display:flex; gap:8px; flex-wrap:wrap; }

/* ── Back bar (profile) ── */
.fb-bk { display:flex; flex-direction:column; gap:10px; }
.fb-bk-row { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
.fb-bk-title { font-size:16px; font-weight:800; }
.fb-bk-next { font-size:12.5px; color:rgba(255,255,255,.65); } .fb-bk-next b { color:#4ADE80; font-weight:800; }
.fb-bk-pick { display:flex; gap:8px; align-items:stretch; }
.fb-chips { display:flex; gap:6px; flex:1; min-width:0; }
.fb-chip { flex:1; min-width:0; height:44px; display:flex; align-items:center; justify-content:center; border-radius:99px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.05); color:#fff; font-size:14px; font-weight:800; cursor:pointer; transition:border-color .15s,background .15s; }
.fb-chip:hover { border-color:rgba(255,255,255,.32); }
.fb-chip.on { border-color:var(--a); background:rgba(143,179,255,.16); }
.fb-bk.for-b .fb-chip.on { border-color:var(--b); background:rgba(227,184,98,.16); }
.fb-amt { gap:2px; color:rgba(255,255,255,.55); cursor:text; padding:0 10px; }
.fb-amt input { width:100%; min-width:0; max-width:64px; border:0; outline:0; background:transparent; color:#fff; font:inherit; font-weight:800; }
.fb-amt input::placeholder { color:rgba(255,255,255,.55); font-weight:700; }
.fb-go { flex-shrink:0; height:44px; padding:0 22px; border:0; border-radius:99px; background:#fff; color:var(--ink); font-size:14px; font-weight:800; cursor:pointer; white-space:nowrap; box-shadow:0 10px 30px -10px rgba(143,179,255,.8); }
.fb-bk.for-b .fb-go { box-shadow:0 10px 30px -10px rgba(227,184,98,.8); }
.fb-go:disabled { opacity:.6; cursor:default; }
.fb-get { font-size:13px; color:rgba(255,255,255,.75); } .fb-get b { color:rgba(255,255,255,.5); font-weight:700; margin-right:6px; }
.fb-alt { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; font-size:12px; color:rgba(255,255,255,.5); border-top:1px solid rgba(255,255,255,.08); padding-top:10px; }
.fb-alt button { border:0; background:none; padding:0; color:var(--b-hi); font-size:12.5px; font-weight:800; cursor:pointer; }
.fb-bk.for-b .fb-alt button { color:var(--a-hi); }
.fb-err { font-size:13px; color:#FCA5A5; font-weight:600; }
.fb-mine { font-size:12.5px; color:#4ADE80; font-weight:700; }
.fb-get:empty, .fb-err:empty, .fb-mine:empty { display:none; }

@media (max-width:760px) {
  .fb { padding:12px; border-radius:22px; }
  .fb.fb-profile { border-radius:22px; }
  .fb-top { margin-bottom:10px; }
  .fb-when { display:none; }
  .fb-stage { gap:8px; }
  .fb-cam { aspect-ratio:3/4; border-radius:16px; }
  .fb-tag { font-size:10.5px; padding:5px 8px; }
  .fb-tag .fb-eq { display:none; }
  .fb-tags { left:8px; top:8px; gap:4px; max-width:calc(100% - 44px); }
  .fb-leading { font-size:9.5px; padding:4px 7px; }
  .fb-sound { right:8px; top:8px; padding:6px; font-size:0; gap:0; }
  .fb-prog { left:8px; right:8px; bottom:40px; }
  .fb-voice { padding:40px 0 34px; gap:10px; }
  .fb-pops { left:8px; bottom:44px; }
  .fb-pop { font-size:11px; }
  .fb-vav { width:46%; } .fb-wave { width:72%; height:26px; }
  .fb-panel { margin:-34px 4px 0; padding:14px 12px; border-radius:18px; gap:12px; }
  .fb-board { gap:6px; }
  .fb-ring { width:36px; height:36px; padding:2px; }
  .fb-side { gap:8px; }
  .fb-score { font-size:24px; }
  .fb-name, .fb-count { font-size:11px; }
  .fb-clock b { font-size:14px; } .fb-clock span { font-size:8.5px; }
  .fb-goals { grid-template-columns:1fr; gap:6px; }
  .fb-bk-pick { flex-direction:column; } .fb-go { width:100%; }
  .fb-lower { font-size:13px; }
}
@media (prefers-reduced-motion:reduce) { .fb *, .fb *::before, .fb *::after { animation:none !important; } .fb-lower { display:none; } }