[WIP] Add self-contained HTML file for algorithmic trading arena

[Copilot]

• Create docs/algo-trading-arena.html — self-contained gamified trading platform page
  • Header + sticky nav + all 13 sections
  • CSS matching FERROS design system (CSS variables, dark theme, responsive)
  • Interactive: scratcher card, card flip, loot box animation, tab switching, collapsible arch stack
  • Zero external dependencies, file:// compatible, hashData() + localStorage with session guard
• Update README.md — Interactive Prototypes table + Repository Structure tree
• Update docs/AGENT_GUIDE.md — File Map table
• Code review + security scan

Original prompt

Overview

Create a new self-contained HTML file at docs/algo-trading-arena.html in the Maangled/ferros repository. This is an example/showcase page for an AI-centric Algorithmic Trading platform built on FERROS principles. The platform gamifies stock trading by pulling mechanics from card games (Marvel Snap, Legends of Runeterra), lottery scratchers, idle games, creature-genesis games (Mewgenics), and loot box reward systems — making trading as accessible and engaging as playing a mobile game.

This file must be a fully self-contained, single-file HTML document — all CSS and JS embedded inline. Zero external dependencies (no CDN links, no <script src="...">, no fetch(), no import, no service workers). It must work when opened directly from disk via the file:// protocol, consistent with every other HTML prototype in the FERROS docs/ directory.

---

Design System — Match Existing FERROS Style

Use the exact same dark-theme design system from ferros-blueprint.html and the other docs/*.html files:

• CSS variables — use the established :root variables: --bg-base: #0a0c10, --bg-panel: #111520, --bg-card: #161b28, --accent-blue: #4a90d9, --accent-cyan: #2dd4bf, --accent-green: #34d399, --accent-amber: #f59e0b, --accent-red: #f87171, --accent-purple: #a78bfa, --accent-pink: #f472b6, etc.
• Typography — system font stack (-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto...), monospace for badges/labels ('Courier New', Courier, monospace)
• Component patterns — .card, .panel, .badge, .section, .section-header, .section-icon, .cards-grid, gradient headers, accent-colored left borders on cards, sticky nav bar
• Responsive — grid layouts that collapse at 900px and 640px breakpoints
• Animations — subtle fade-in, pulse-border on active items, hover transitions on cards

---

Page Sections to Build

1. Header — "FERROS Trading Arena"

• Codename line: Project Aureum · Sovereign Markets Layer
• Title: TRADING ARENA (gradient text matching FERROS style)
• Subtitle: AI-Centric Algorithmic Trading · Gamified · Open Source · Consent-First
• Mission box: "A free, open-source, gamified algorithmic trading platform built on FERROS. Trading should be as intuitive as playing a card game, as rewarding as opening a loot box, and as strategic as a chess match — all powered by AI agents under your sovereign control."
• Tagline pills: // Card-Based Trading · // AI Agents · // Loot Rewards · // Idle Earnings · // Genesis Creatures · // Open Source

2. Nav Bar (sticky)

• Sections: Core Game · Card System · Play Modes · Genesis Lab · Loot & Rewards · Cosmetics Store · Idle Engine · NFT Tickets · AI Agents · Architecture

3. Section: Core Trading Game — "The Arena"

Explain the base trading mechanic as a card game:

• Every stock/asset is represented as a trading card with stats (price, volatility, dividend yield, sector, momentum score, analyst consensus)
• Cards have rarity tiers: Common (penny stocks), Uncommon (mid-cap), Rare (blue-chip), Epic (high-growth tech), Legendary (market movers like AAPL/TSLA/BRK)
• Trading is done by playing cards onto a board — inspired by Marvel Snap's lane system:
  • 3 lanes representing time horizons: Day Trade Lane, Swing Lane, Long Hold Lane
  • Each lane has a capacity limit (portfolio concentration rules)
  • You "play" a card by committing capital to that position
  • AI agent advisors can suggest plays, but the user always confirms (consent-first)
• Cards have abilities inspired by Legends of Runeterra keywords:
  • Rally — triggers a re-buy at dip
  • Barrier — stop-loss protection
  • Elusive — low-correlation stealth asset
  • Overwhelm — momentum breakout play
  • Lifesteal — dividend reinvestment
  • Attune — reduces transaction fee for next play
• Show a mock game board UI with 3 lanes, sample cards in each lane, turn indicator, and portfolio value display

4. Section: Card Collection & Deck Building

• Users build a deck (portfolio strategy) from their card collection
• Deck archetypes: Dividend Kings (income), Momentum Blitz (day trading), Value Deep (long-term), Sector Siege (concentrated bets), Index Shield (diversified defense)
• Card evolution: holding a stock long enough causes the card to visually evolve (new art, holographic effects, stat boosts displayed)
• Show a deck builder UI mockup — grid of cards with drag-to-deck interaction concept

5. Section: Play Modes — Multiple Ways to Trade

Cards grid showing different game modes:

• 🎰 Scratcher Mode — "Instant play. Pick a theme (Tech, Energy, Pharma), scratch to reveal 3 stocks, the AI picks the best micro-trade. As easy as a lottery scratcher." Uses a scratch-off card visual metaphor.
• 🃏 Arena Mode — "The full card game. Build your deck, play the board, compete on leaderboar...

This pull request was created from Copilot chat.

---

🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. Learn more about Advanced Security.