botfights/frontend/src/pages/BotProfilePage.vue

<script setup lang="ts">
import { ref, reactive, computed, onMounted, onUnmounted } from 'vue'
import { useRoute, useRouter, RouterLink } from 'vue-router'
import { useNostr } from '../composables/useNostr'
import SpritePreview from '../components/SpritePreview.vue'
import HumanPreview from '../components/HumanPreview.vue'
import type { SpriteCustomization } from '../game/sprites'

const route = useRoute()
const router = useRouter()
const { bot: nostrBot, isLoggedIn, logout, updateCustomization } = useNostr()
const botName = route.params.name as string

interface BotCustomization {
  archetype?: string
  primaryColor?: string
  secondaryColor?: string
  forceVisor?: boolean
  forceMohawk?: boolean
  forceHorns?: boolean
}

interface BotStats {
  id: string
  name: string
  avatarSeed: string
  archetype: string
  customization: BotCustomization | null
  profilePicUrl: string | null
  eloRating: number
  wins: number
  losses: number
  winStreak: number
  bestStreak: number
  tier: number
  tierName: string
  tierColor: string
  winRate: number
  totalFights: number
  rank: number
  totalBots: number
  createdAt: string
  recentFights: {
    id: string
    opponent: string
    result: string
    rounds: number
    arena: string
    date: string
  }[]
}

function getStatusTitle(s: BotStats): string {
  if (s.totalFights === 0) return 'FRESH MEAT'
  if (s.winStreak >= 10) return 'UNSTOPPABLE'
  if (s.winStreak >= 5) return 'ON FIRE'
  if (s.winStreak >= 3) return 'HOT STREAK'
  if (s.winRate >= 80 && s.totalFights >= 10) return 'DOMINANT'
  if (s.winRate >= 60) return 'RISING'
  if (s.winRate >= 40) return 'SCRAPPY'
  if (s.winRate < 20 && s.totalFights >= 5) return 'PUNCHING BAG'
  if (s.losses > s.wins && s.totalFights >= 5) return 'UNDERDOG'
  return 'CONTENDER'
}

interface QueueEntry {
  botId: string
  botName: string
  eloRating: number
}

const stats = ref<BotStats | null>(null)
const isLoading = ref(true)
const isJoining = ref(false)
const showChoose = ref(false)
const waitingFighters = ref<QueueEntry[]>([])
let pollHandle: ReturnType<typeof setInterval> | null = null

const isOwner = ref(false)
const showCustomize = ref(false)
const isSaving = ref(false)
const custError = ref('')

const ARCHETYPES = [
  'standard', 'lobster', 'sheep', 'cyborg', 'blob', 'tank', 'dog', 'cat',
  'cactus', 'pizza', 'mushroom', 'shark', 'penguin', 'octopus', 'skeleton',
  'ghost', 'alien', 'dinosaur', 'pirate', 'ninja', 'cowboy', 'wizard',
  'bee', 'frog', 'snail', 'robot', 'android', 'drone', 'toaster', 'tv_head',
  'calculator', 'satellite', 'mech', 'led_cube', 'circuit', 'antenna_bot',
  'microwave', 'cyberdog', 'robocat', 'ufo_bot', 'minotaur', 'unicorn',
  'phoenix', 'dragon', 'mermaid', 'griffin', 'cyclops', 'gargoyle', 'golem',
  'vampire', 'werewolf', 'zombie', 'witch', 'demon', 'chef', 'firefighter',
  'astronaut', 'clown', 'detective', 'nurse', 'lumberjack', 'scientist',
  'wrestler', 'boxer', 'gladiator', 'samurai', 'viking', 'knight',
  'elephant', 'giraffe', 'hippo', 'lion', 'monkey', 'parrot', 'raccoon',
  'snake', 'turtle', 'whale', 'crocodile', 'flamingo', 'hedgehog', 'panda',
  'hamster', 'sock_puppet', 'traffic_cone', 'toilet_man', 'potato',
  'cloud_man', 'rock_man', 'balloon_man', 'trash_can', 'rubber_duck',
  'snowman', 'scarecrow', 'jack_o_lantern', 'garden_gnome', 'lamp_post',
  'broom_man',
]

const custForm = reactive({
  archetype: '',
  primaryColor: '#3388cc',
  secondaryColor: '#cc8833',
  forceVisor: false,
  forceMohawk: false,
  forceHorns: false,
})

function hslToHex(hsl: string): string {
  const m = hsl.match(/hsl\((\d+),\s*(\d+)%,\s*(\d+)%\)/)
  if (!m) return '#888888'
  const h = +m[1] / 360, s = +m[2] / 100, l = +m[3] / 100
  const hue2rgb = (p: number, q: number, t: number) => {
    if (t < 0) t += 1; if (t > 1) t -= 1
    if (t < 1/6) return p + (q - p) * 6 * t
    if (t < 1/2) return q
    if (t < 2/3) return p + (q - p) * (2/3 - t) * 6
    return p
  }
  let r: number, g: number, b: number
  if (s === 0) { r = g = b = l }
  else {
    const q = l < 0.5 ? l * (1 + s) : l + s - l * s
    const p = 2 * l - q
    r = hue2rgb(p, q, h + 1/3)
    g = hue2rgb(p, q, h)
    b = hue2rgb(p, q, h - 1/3)
  }
  const hex = (v: number) => Math.round(v * 255).toString(16).padStart(2, '0')
  return `#${hex(r)}${hex(g)}${hex(b)}`
}

function hexToHsl(hex: string): string {
  const r = parseInt(hex.slice(1, 3), 16) / 255
  const g = parseInt(hex.slice(3, 5), 16) / 255
  const b = parseInt(hex.slice(5, 7), 16) / 255
  const max = Math.max(r, g, b), min = Math.min(r, g, b)
  const l = (max + min) / 2
  if (max === min) return `hsl(0, 0%, ${Math.round(l * 100)}%)`
  const d = max - min
  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
  let h = 0
  if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6
  else if (max === g) h = ((b - r) / d + 2) / 6
  else h = ((r - g) / d + 4) / 6
  return `hsl(${Math.round(h * 360)}, ${Math.round(s * 100)}%, ${Math.round(l * 100)}%)`
}

const previewCustomization = computed<SpriteCustomization>(() => ({
  archetype: custForm.archetype || undefined,
  primaryColor: hexToHsl(custForm.primaryColor),
  secondaryColor: hexToHsl(custForm.secondaryColor),
  forceVisor: custForm.forceVisor,
  forceMohawk: custForm.forceMohawk,
  forceHorns: custForm.forceHorns,
}))

function initCustForm() {
  if (!stats.value) return
  const c = stats.value.customization
  custForm.archetype = c?.archetype || stats.value.archetype || ''
  custForm.primaryColor = c?.primaryColor ? hslToHex(c.primaryColor) : '#3388cc'
  custForm.secondaryColor = c?.secondaryColor ? hslToHex(c.secondaryColor) : '#cc8833'
  custForm.forceVisor = c?.forceVisor ?? false
  custForm.forceMohawk = c?.forceMohawk ?? false
  custForm.forceHorns = c?.forceHorns ?? false
}

async function saveCustomization() {
  if (isSaving.value) return
  isSaving.value = true
  custError.value = ''
  try {
    await updateCustomization({
      archetype: custForm.archetype || undefined,
      primaryColor: hexToHsl(custForm.primaryColor),
      secondaryColor: hexToHsl(custForm.secondaryColor),
      forceVisor: custForm.forceVisor,
      forceMohawk: custForm.forceMohawk,
      forceHorns: custForm.forceHorns,
    })
    if (stats.value) {
      stats.value = {
        ...stats.value,
        archetype: custForm.archetype || stats.value.archetype,
        customization: {
          archetype: custForm.archetype || undefined,
          primaryColor: hexToHsl(custForm.primaryColor),
          secondaryColor: hexToHsl(custForm.secondaryColor),
          forceVisor: custForm.forceVisor,
          forceMohawk: custForm.forceMohawk,
          forceHorns: custForm.forceHorns,
        },
      }
    }
    showCustomize.value = false
  } catch (err) {
    custError.value = err instanceof Error ? err.message : 'Save failed'
  }
  isSaving.value = false
}

onMounted(async () => {
  try {
    const res = await fetch(`/api/bots/${encodeURIComponent(botName)}/stats`)
    if (res.ok) stats.value = await res.json()
  } catch { /* */ }
  isLoading.value = false

  // Check ownership
  isOwner.value = isLoggedIn.value && nostrBot.value?.name === botName

  // Poll queue for "choose your fight"
  pollQueue()
  pollHandle = setInterval(pollQueue, 4000)
})

onUnmounted(() => {
  if (pollHandle) clearInterval(pollHandle)
})

async function pollQueue() {
  try {
    const res = await fetch('/api/queue/status')
    if (res.ok) {
      const data = await res.json()
      waitingFighters.value = data.queue || []
    }
  } catch { /* */ }
}

async function instantFight() {
  if (!stats.value || isJoining.value) return
  isJoining.value = true
  try {
    const res = await fetch(`/api/queue/join/${stats.value.id}`, { method: 'POST' })
    if (res.ok) {
      const data = await res.json()
      router.push(`/arena/${data.fightId}`)
    }
  } catch { /* */ }
  isJoining.value = false
}

async function fightSpecific(opponentBotId: string) {
  if (!stats.value || isJoining.value) return
  isJoining.value = true
  try {
    const res = await fetch(`/api/fights/matchmake/${stats.value.id}`, { method: 'POST' })
    if (res.ok) {
      const data = await res.json()
      router.push(`/arena/${data.fightId}`)
    }
  } catch { /* */ }
  isJoining.value = false
}

function handleSignOut() {
  logout()
  router.push('/')
}

const tierClass = (t: number) => `tier-${t}`
</script>

<template>
  <div class="h-[calc(100vh-4rem)] flex flex-col px-6 py-6 overflow-hidden">
    <div class="max-w-lg mx-auto w-full flex flex-col flex-1 min-h-0">

      <div v-if="isLoading" class="flex-1 flex items-center justify-center">
        <p class="font-display text-text-muted animate-pulse">LOADING...</p>
      </div>

      <div v-else-if="!stats" class="flex-1 flex items-center justify-center">
        <p class="font-display text-text-muted">Bot not found.</p>
      </div>

      <template v-else>
        <!-- Header -->
        <div class="text-center mb-5">
          <!-- Human player: just the human avatar, centered -->
          <div v-if="stats.archetype === 'human'" class="flex justify-center mb-3">
            <HumanPreview
              :seed="stats.avatarSeed || stats.name"
              archetype="human"
              :size="220"
              :win-rate="(stats.winRate || 0) / 100"
              anim="idle"
              class="drop-shadow-[0_0_20px_rgba(0,255,255,0.3)]"
            />
          </div>
          <!-- Bot player: human controller + wire + bot sprite -->
          <div v-else class="flex items-end justify-between mb-3 relative">
            <HumanPreview
              :seed="stats.avatarSeed || stats.name"
              :archetype="stats.archetype || 'standard'"
              :size="200"
              :win-rate="(stats.winRate || 0) / 100"
              anim="idle"
              class="drop-shadow-[0_0_12px_rgba(0,0,0,0.6)] shrink-0 relative z-10"
            />
            <!-- Wire from gamepad to bot with electricity -->
            <svg class="absolute bottom-8 left-0 w-full h-24 z-0 pointer-events-none" preserveAspectRatio="none">
              <defs>
                <linearGradient id="wire-grad" x1="0%" y1="0%" x2="100%" y2="0%">
                  <stop offset="0%" stop-color="#444455"/>
                  <stop offset="50%" stop-color="#555566"/>
                  <stop offset="100%" stop-color="#444455"/>
                </linearGradient>
                <filter id="elec-glow">
                  <feGaussianBlur stdDeviation="3" result="blur"/>
                  <feMerge><feMergeNode in="blur"/><feMergeNode in="SourceGraphic"/></feMerge>
                </filter>
              </defs>
              <!-- Main wire -->
              <path d="M 30% 85% Q 45% 40%, 55% 55% T 78% 30%" fill="none" stroke="url(#wire-grad)" stroke-width="3" stroke-linecap="round"/>
              <!-- Electricity pulse 1 -->
              <path class="elec-pulse-1" d="M 30% 85% Q 45% 40%, 55% 55% T 78% 30%" fill="none" stroke="#00f0ff" stroke-width="1.5" stroke-linecap="round" filter="url(#elec-glow)" stroke-dasharray="8 20" opacity="0.8"/>
              <!-- Electricity pulse 2 (reverse) -->
              <path class="elec-pulse-2" d="M 30% 85% Q 45% 40%, 55% 55% T 78% 30%" fill="none" stroke="#ff2d7b" stroke-width="1" stroke-linecap="round" filter="url(#elec-glow)" stroke-dasharray="5 25" opacity="0.6"/>
              <!-- Spark nodes -->
              <circle class="elec-spark-1" cx="45%" cy="55%" r="2" fill="#00f0ff" filter="url(#elec-glow)" opacity="0"/>
              <circle class="elec-spark-2" cx="62%" cy="45%" r="2" fill="#ff2d7b" filter="url(#elec-glow)" opacity="0"/>
            </svg>
            <SpritePreview
              :seed="stats.avatarSeed || stats.name"
              :archetype="stats.archetype"
              :tier="stats.tier"
              :size="160"
              :customization="stats.customization || undefined"
              class="drop-shadow-[0_0_20px_var(--glow)] mx-auto relative z-10"
              :style="{ '--glow': stats.tierColor + '80' } as any"
            />
          </div>
          <h2 class="font-display font-black text-3xl sm:text-4xl tracking-wider gradient-text">
            {{ stats.name }}
          </h2>
          <div class="inline-block px-3 py-0.5 border text-[9px] font-display font-black tracking-widest mt-1"
               :style="{ borderColor: stats.tierColor, color: stats.tierColor, backgroundColor: 'rgba(0,0,0,0.8)' }">
            {{ stats.tierName }}
          </div>
          <p class="font-display text-sm font-bold tracking-widest mt-1"
             :style="{ color: stats.tierColor }">
            {{ getStatusTitle(stats) }}
          </p>
          <p class="font-mono text-text-muted text-[10px] mt-0.5">
            #{{ stats.rank }} of {{ stats.totalBots }}
          </p>
          <button
            v-if="isOwner && stats.archetype !== 'human'"
            class="mt-2 font-mono text-[10px] text-neon-cyan/60 hover:text-neon-cyan transition-colors"
            @click="showCustomize = !showCustomize; if (showCustomize) initCustForm()"
          >
            {{ showCustomize ? 'CLOSE' : 'CUSTOMIZE' }}
          </button>
        </div>

        <!-- Customization panel (owner only) -->
        <div v-if="showCustomize && isOwner" class="mb-4 border border-neon-cyan/20 bg-surface-raised/60 p-4">
          <p class="font-display text-[10px] font-bold text-neon-cyan tracking-[0.15em] mb-3">
            CUSTOMIZE CHARACTER
          </p>

          <!-- Live preview -->
          <div class="flex justify-center mb-3">
            <SpritePreview
              :seed="stats.avatarSeed || stats.name"
              :archetype="custForm.archetype || stats.archetype"
              :tier="stats.tier"
              :size="120"
              :customization="previewCustomization"
              class="drop-shadow-[0_0_12px_rgba(0,255,255,0.3)]"
            />
          </div>

          <!-- Archetype selector -->
          <label class="block mb-2">
            <span class="font-display text-[9px] text-text-muted tracking-wider">ARCHETYPE</span>
            <select
              v-model="custForm.archetype"
              class="mt-0.5 w-full bg-surface-base border border-border text-text-primary
                     font-mono text-xs px-2 py-1.5 focus:border-neon-cyan/50 outline-none"
            >
              <option value="">Default (from seed)</option>
              <option v-for="a in ARCHETYPES" :key="a" :value="a">{{ a.replace(/_/g, ' ') }}</option>
            </select>
          </label>

          <!-- Colors -->
          <div class="flex gap-3 mb-2">
            <label class="flex-1">
              <span class="font-display text-[9px] text-text-muted tracking-wider">PRIMARY</span>
              <div class="flex items-center gap-1 mt-0.5">
                <input type="color" v-model="custForm.primaryColor"
                       class="w-8 h-8 border border-border bg-transparent cursor-pointer" />
                <span class="font-mono text-[10px] text-text-muted">{{ custForm.primaryColor }}</span>
              </div>
            </label>
            <label class="flex-1">
              <span class="font-display text-[9px] text-text-muted tracking-wider">SECONDARY</span>
              <div class="flex items-center gap-1 mt-0.5">
                <input type="color" v-model="custForm.secondaryColor"
                       class="w-8 h-8 border border-border bg-transparent cursor-pointer" />
                <span class="font-mono text-[10px] text-text-muted">{{ custForm.secondaryColor }}</span>
              </div>
            </label>
          </div>

          <!-- Accessories -->
          <p class="font-display text-[9px] text-text-muted tracking-wider mb-1">ACCESSORIES</p>
          <div class="flex gap-3 mb-3">
            <label class="flex items-center gap-1 cursor-pointer">
              <input type="checkbox" v-model="custForm.forceVisor"
                     class="accent-neon-cyan" />
              <span class="font-mono text-[10px] text-text-secondary">Visor</span>
            </label>
            <label class="flex items-center gap-1 cursor-pointer">
              <input type="checkbox" v-model="custForm.forceMohawk"
                     class="accent-neon-cyan" />
              <span class="font-mono text-[10px] text-text-secondary">Mohawk</span>
            </label>
            <label class="flex items-center gap-1 cursor-pointer">
              <input type="checkbox" v-model="custForm.forceHorns"
                     class="accent-neon-cyan" />
              <span class="font-mono text-[10px] text-text-secondary">Horns</span>
            </label>
          </div>

          <p v-if="custError" class="font-mono text-[10px] text-neon-pink mb-2">{{ custError }}</p>

          <button
            class="w-full py-2 bg-neon-cyan/10 border border-neon-cyan/40 text-neon-cyan
                   font-display font-bold text-xs tracking-wider
                   hover:bg-neon-cyan/20 transition-all
                   disabled:opacity-30 disabled:cursor-not-allowed"
            :disabled="isSaving"
            @click="saveCustomization"
          >
            {{ isSaving ? 'SAVING...' : 'SAVE LOOK' }}
          </button>
        </div>

        <!-- Stats -->
        <div class="grid grid-cols-3 gap-2 mb-4">
          <div class="border border-border bg-surface-raised/50 p-2.5 text-center">
            <p class="font-display font-black text-xl text-neon-cyan">{{ Math.round(stats.eloRating) }}</p>
            <p class="font-display text-[8px] text-text-muted tracking-wider mt-0.5">ELO</p>
          </div>
          <div class="border border-border bg-surface-raised/50 p-2.5 text-center">
            <p class="font-display font-black text-xl">
              <span class="text-neon-cyan">{{ stats.wins }}</span>
              <span class="text-text-muted text-sm">-</span>
              <span class="text-neon-pink">{{ stats.losses }}</span>
            </p>
            <p class="font-display text-[8px] text-text-muted tracking-wider mt-0.5">RECORD</p>
          </div>
          <div class="border border-border bg-surface-raised/50 p-2.5 text-center">
            <p class="font-display font-black text-xl"
               :class="stats.winRate >= 60 ? 'text-neon-cyan' : stats.winRate >= 40 ? 'text-neon-yellow' : 'text-neon-pink'">
              {{ stats.winRate }}%
            </p>
            <p class="font-display text-[8px] text-text-muted tracking-wider mt-0.5">WIN RATE</p>
          </div>
        </div>

        <!-- Streaks row -->
        <div class="flex gap-2 mb-4">
          <div class="flex-1 border border-border bg-surface-raised/50 p-2.5 text-center">
            <p class="font-display font-bold text-base"
               :class="stats.winStreak >= 3 ? 'text-neon-yellow' : 'text-text-primary'">
              {{ stats.winStreak > 0 ? `${stats.winStreak}x` : '-' }}
            </p>
            <p class="font-display text-[8px] text-text-muted tracking-wider mt-0.5">STREAK</p>
          </div>
          <div class="flex-1 border border-border bg-surface-raised/50 p-2.5 text-center">
            <p class="font-display font-bold text-base text-text-primary">{{ stats.bestStreak }}x</p>
            <p class="font-display text-[8px] text-text-muted tracking-wider mt-0.5">BEST</p>
          </div>
          <div class="flex-1 border border-border bg-surface-raised/50 p-2.5 text-center">
            <p class="font-display font-bold text-base text-text-primary">{{ stats.totalFights }}</p>
            <p class="font-display text-[8px] text-text-muted tracking-wider mt-0.5">FIGHTS</p>
          </div>
        </div>

        <!-- Fight actions (only for owner or anyone for now) -->
        <div class="flex gap-2 mb-4">
          <button
            class="flex-1 py-3 bg-neon-pink/10 border-2 border-neon-pink/50 text-neon-pink
                   font-display font-black text-sm tracking-wider
                   hover:bg-neon-pink/20 transition-all neon-border-pink
                   disabled:opacity-30 disabled:cursor-not-allowed"
            :disabled="isJoining"
            @click="instantFight"
          >
            {{ isJoining ? 'MATCHING...' : 'INSTANT FIGHT' }}
          </button>
          <button
            class="flex-1 py-3 border-2 border-neon-purple/50 text-neon-purple
                   font-display font-bold text-sm tracking-wider
                   hover:bg-neon-purple/10 transition-all"
            @click="showChoose = !showChoose"
          >
            CHOOSE FIGHT
          </button>
        </div>

        <!-- Choose your fight panel -->
        <div v-if="showChoose" class="mb-4 border border-border bg-surface-raised/50 p-3">
          <p class="font-display text-[10px] font-bold text-text-muted tracking-[0.15em] mb-2">
            FIGHTERS WAITING
          </p>
          <div v-if="waitingFighters.length === 0" class="text-center py-3">
            <p class="font-mono text-xs text-text-muted">Nobody waiting. Use Instant Fight instead.</p>
          </div>
          <button
            v-for="fighter in waitingFighters"
            :key="fighter.botId"
            class="w-full flex items-center justify-between px-3 py-2 border border-border
                   hover:border-neon-cyan/30 hover:bg-neon-cyan/5 transition-all mb-1 text-xs
                   disabled:opacity-30"
            :disabled="isJoining || fighter.botId === stats.id"
            @click="fightSpecific(fighter.botId)"
          >
            <span class="font-display font-bold text-text-primary">{{ fighter.botName }}</span>
            <span class="font-mono text-text-muted">{{ Math.round(fighter.eloRating) }} ELO</span>
          </button>
        </div>

        <!-- Recent fights -->
        <p class="font-display text-[10px] font-bold text-text-muted tracking-[0.15em] mb-2">
          RECENT BOUTS
        </p>
        <div class="flex-1 min-h-0 overflow-y-auto space-y-1.5">
          <RouterLink
            v-for="fight in stats.recentFights"
            :key="fight.id"
            :to="`/arena/${fight.id}`"
            class="flex items-center justify-between px-3 py-2 border border-border
                   bg-surface-raised/30 hover:border-neon-pink/30 transition-all text-xs"
          >
            <span class="font-display font-bold w-6"
                  :class="fight.result === 'W' ? 'text-neon-cyan' : fight.result === 'L' ? 'text-neon-pink' : 'text-text-muted'">
              {{ fight.result }}
            </span>
            <span class="font-mono text-text-secondary flex-1 ml-2">vs {{ fight.opponent }}</span>
            <span class="font-mono text-[10px] text-text-muted">R{{ fight.rounds }}</span>
          </RouterLink>
          <div v-if="stats.recentFights.length === 0" class="text-center py-4">
            <p class="font-mono text-text-muted text-xs">No fights yet. Hit Instant Fight!</p>
          </div>
        </div>

        <!-- Sign out (only if owner) -->
        <div v-if="isOwner" class="mt-3 text-center flex-shrink-0">
          <button
            class="font-mono text-[10px] text-text-muted hover:text-ko transition-colors"
            @click="handleSignOut"
          >
            Sign out
          </button>
        </div>
      </template>
    </div>
  </div>
</template>

<style scoped>
/* Electricity pulses along wire */
.elec-pulse-1 {
  animation: elec-flow 1.2s linear infinite;
}
.elec-pulse-2 {
  animation: elec-flow 0.9s linear infinite reverse;
}
@keyframes elec-flow {
  0% { stroke-dashoffset: 0; opacity: 0.9; }
  50% { opacity: 0.4; }
  100% { stroke-dashoffset: -56; opacity: 0.9; }
}

/* Spark flashes at wire midpoints */
.elec-spark-1 {
  animation: spark-flash 0.8s ease-in-out infinite;
}
.elec-spark-2 {
  animation: spark-flash 1.1s ease-in-out infinite 0.4s;
}
@keyframes spark-flash {
  0%, 70%, 100% { opacity: 0; r: 1; }
  75% { opacity: 1; r: 4; }
  85% { opacity: 0.6; r: 2; }
}
</style>