[WIP] Create skeleton HTML file for algo trading arena

[Copilot]

• Explore existing FERROS design system (CSS vars, components, patterns)
• Create docs/algo-trading-arena.html with all required sections:
  • Full CSS (variables, components, animations, responsive breakpoints)
  • Header with codename, title, subtitle, mission, tagline pills
  • Sticky nav bar with 10 section anchors
  • Core Trading Game / Arena section (mock game board)
  • Card Collection & Deck Building section (deck builder UI skeleton)
  • Play Modes section (grid + tab container hooks)
  • Genesis Lab section (creature card mockup)
  • Loot Boxes & Reward System section (animation placeholder)
  • Cosmetics & Open Source Store section (store grid skeleton)
  • Idle Engine section ("While You Were Away" panel)
  • NFT Tickets & Profile Cards section (gallery grid)
  • AI Agents section (agent card grid skeleton)
  • Technical Architecture section (.arch-stack, collapsible hooks)
  • Footer
  • Minimal inline JS (scroll-spy nav, no-op placeholders)
• Screenshot and verify rendering
• Code review + CodeQL check

Original prompt

PR #1 — Skeleton (Option A)

Create only a new self-contained HTML file:

• docs/algo-trading-arena.html

Do not modify any other files in this PR (no README.md changes, no docs/AGENT_GUIDE.md changes yet).

This PR is the skeleton/base: it must establish the full page structure, FERROS design system styling, and responsive layout. It should include placeholders for interactive elements that will be implemented in later PRs.

---

Hard Requirements

• Single-file HTML: all CSS + JS inline.
• Zero external dependencies: no CDN, no <script src>, no fetch(), no import/export, no service workers.
• Must work from disk via file://.
• Use the established FERROS dark theme styling (same as other docs/*.html prototypes):
  • :root CSS 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.
  • system font stack; monospace for labels/badges.
  • Component patterns: .panel, .card, .badge, .section, .section-header, .section-icon, .cards-grid, gradient headers, accent-colored left borders on cards.
  • Responsive breakpoints around 900px and 640px.
  • Subtle animations (fade-in, hover transitions) are OK, but avoid spending time on heavy interactivity in this PR.

---

Content / Sections (must all exist in the skeleton)

1) Header — "FERROS Trading Arena"

• Codename: Project Aureum · Sovereign Markets Layer
• Title: TRADING ARENA (FERROS gradient text)
• Subtitle: AI-Centric Algorithmic Trading · Gamified · Open Source · Consent-First
• Mission box paragraph
• Tagline pills: // Card-Based Trading · // AI Agents · // Loot Rewards · // Idle Earnings · // Genesis Creatures · // Open Source

2) Sticky Nav Bar

Anchors to sections:

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

3) Core Trading Game — "The Arena"

• Explanation text of the card-based mechanic
• Abilities list (Rally/Barrier/Elusive/Overwhelm/Lifesteal/Attune)
• A mock game board UI (static skeleton is fine):
  • 3 lanes: Day Trade Lane / Swing Lane / Long Hold Lane
  • lane capacity note
  • several sample "card" elements within lanes
  • turn indicator + portfolio value display

4) Card Collection & Deck Building

• Deck archetypes list
• Card evolution explanation
• Deck builder UI skeleton: a collection grid + a deck zone with clear placeholders (later drag/drop)

5) Play Modes

• A grid of mode cards with the 6 modes and descriptions
• Include a simple tab container skeleton (no JS required yet, but provide markup hooks): data-tab, data-tab-panel, etc.

6) Genesis Lab

• Creature system description
• A creature card mockup (static)

7) Loot Boxes & Reward System

• Triggers list
• Loot contents list
• A loot box opening animation placeholder (static element + notes; later PR will animate)

8) Cosmetics & Open Source Store

• Store categories
• Community workshop paragraph
• Store grid skeleton with sample items and rarity badges

9) Idle Engine

• Idle mechanics list
• "While You Were Away" panel mockup (static)

10) NFT Tickets & Profile Cards

• Optional/consent-gated explanation
• Ticket card gallery grid mockup

11) AI Agents

• Agent role list (Scout/Strategist/Guardian/Oracle/Broker)
• Agent card grid skeleton with trust level placeholders

12) Technical Architecture

• Architecture stack diagram using .arch-stack / .arch-layer style pattern
• Include collapsible markup hooks (e.g., <button class="arch-toggle" aria-expanded="false">) but no JS required yet

13) Footer

• FERROS TRADING ARENA — Founding Concept v0.1 — 2026
• Tagline line

---

JavaScript (keep minimal in PR #1)

• Include a small inline <script> that:
  • sets active nav item based on scroll position (optional but fine)
  • provides placeholder no-op handlers for future interactions (scratcher/loot box/tabs/accordion) so later PRs can extend cleanly
• Do NOT implement the scratcher canvas, lootbox burst animation, or full tab switching yet in this PR.

---

Deliverable

A single new file: docs/algo-trading-arena.html that looks like a real FERROS prototype landing page and provides a clean base for follow-on PRs to add interactivity.

The following is the prior conversation context from the user's chat exploration (may be truncated):

User: 🎰 Prompt: Create docs/algo-trading-arena.html — AI-Centric Gamified Algorithmic Trading Platform Example Page
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 ...

This pull request was created from Copilot chat.

---

⚡ Quickly spin up Copilot coding agent tasks from anywhere on your macOS or Windows machine with Raycast.