[WIP] Add skeleton for new prototype page

[Copilot]

• Explore existing FERROS design system and HTML patterns
• Create docs/algo-trading-arena.html with all required sections:
  • Header with gradient title, mission box, tagline pills
  • Sticky nav with all anchors
  • Core Trading Game — The Arena (mock game board)
  • Card Collection & Deck Building (deck builder mock)
  • Play Modes (cards grid + static tab strip skeleton)
  • Genesis Lab (creature card mock)
  • Loot Boxes & Reward System (placeholder component)
  • Cosmetics & Open Source Store (store grid)
  • Idle Engine (panel mock)
  • NFT Tickets & Profile Cards (gallery grid)
  • AI Agents (agent role cards grid)
  • Technical Architecture (.arch-stack / .arch-layer)
  • Footer
• Verify responsive behavior and visual fidelity
• Code review and security scan

Original prompt

Create PR #1 (base: main) that adds a skeleton for the new prototype page.

Scope (PR #1)

Files

• ✅ Create only: docs/algo-trading-arena.html
• ❌ Do NOT modify: README.md, docs/AGENT_GUIDE.md, or any other files in this PR.

Goal

Deliver a high-fidelity layout + styling skeleton that matches FERROS docs design language and includes all required sections, but uses placeholders for the heavier interactive widgets/animations. The intent is to establish the full page structure, visual system, and responsive behavior so follow-up PRs can safely add complex interactivity without fighting layout.

Critical constraints

• Single self-contained HTML file.
• Inline CSS + inline JS only.
• Zero external dependencies: no CDN, no <script src>, no fonts, no fetch(), no import/export, no service workers.
• Must work via file://.

Design system (match existing FERROS docs)

Use the established FERROS dark theme and component patterns:

• :root variables like:
  • --bg-base: #0a0c10, --bg-panel: #111520, --bg-card: #161b28
  • accents: --accent-blue: #4a90d9, --accent-cyan: #2dd4bf, --accent-green: #34d399, --accent-amber: #f59e0b, --accent-red: #f87171, --accent-purple: #a78bfa, --accent-pink: #f472b6
• Typography: system stack; monospace for badges/labels.
• Components: .panel, .card, .badge, .section, .section-header, .section-icon, .cards-grid, sticky navbar, gradient headers, accent left borders.
• Responsive breakpoints: collapse at 900px and 640px.
• Animation: subtle fade-in / hover transitions; keep light in PR feat: Initialize FERROS repository with founding blueprint, README, and docs #1.

Page content requirements (structure only in PR #1)

Include the following sections with strong visual presentation (not wireframe). Each section should include at least one of:

• a visual mock component (board, cards grid, store grid, gallery grid, architecture stack)
• or a subtle animation (fade-in, hover, shimmer)

Header

• “FERROS Trading Arena”
• Codename: Project Aureum · Sovereign Markets Layer
• Title: TRADING ARENA (gradient)
• 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

Sticky nav

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

Core Trading Game — The Arena

• Explain the card-based mechanic, rarity tiers, 3 lanes (Day Trade / Swing / Long Hold), capacity limits, consent-first AI suggestions.
• Show a mock game board UI with three lanes and sample cards, plus a top HUD (turn indicator + portfolio value).

Card Collection & Deck Building

• Deck archetypes
• Card evolution concept
• Show deck builder mock: collection grid + deck slots (visual placeholders for drag/drop)

Play Modes

• Show modes as cards in a grid.
• Add static tab strip skeleton (no real tab switching required in PR feat: Initialize FERROS repository with founding blueprint, README, and docs #1; can be a placeholder).
• Include scratcher mode card with a scratcher visual placeholder area.

Genesis Lab

• Creature card mock with stats/abilities/evolution stage.
• Emphasize cosmetic-only.

Loot Boxes & Reward System

• List triggers and contents.
• Include loot box opening placeholder component with button disabled or “Coming in PR Add four interactive prototype HTML documents to docs/ #2”.

Cosmetics & Open Source Store

• Store grid with items, earned currency pricing, rarity badges.
• Emphasize no real-money transactions.

Idle Engine

• “While You Were Away” panel mock.

NFT Tickets & Profile Cards

• Gallery grid of ticket cards.
• Emphasize consent-gated and optional.

AI Agents

• Agent role cards grid: Scout, Strategist, Guardian, Oracle, Broker.
• Consent-first note.

Technical Architecture

• Use .arch-stack / .arch-layer style.
• Include the specified layers and boundaries.
• Collapsible behavior can be placeholder only in PR feat: Initialize FERROS repository with founding blueprint, README, and docs #1.

Footer

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

JS in PR #1

Keep JS minimal:

• Smooth-scroll for nav anchor clicks.
• Optional: small “active section” highlight in nav on scroll.
• Provide stub functions/placeholders for future PRs:
  • initScratcherDemo() (no implementation yet)
  • initLootBoxDemo() (no implementation yet)
  • initPlayModeTabs() (no implementation yet)
  • initArchitectureAccordion() (no implementation yet)

Output

• Create docs/algo-trading-arena.html only.
• Ensure it renders nicely on desktop and stacks appropriately on mobile.

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 pag...

This pull request was created from Copilot chat.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.