<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>Tetrion</title>
<link rel="stylesheet" href="style.css?v=0.8.5-rc34" />
</head>
<body>
<div class="arcade-app-window" id="arcade-app-window" tabindex="0" onclick="window.focus();">
<!-- 1. Arcade Header (42px standard toolbar) -->
<div class="arcade-header" id="arcade-header">
<div class="arcade-header-left">
<span class="arcade-header-brand">
<img src="assets/icon.webp" alt="Tetrion" class="arcade-brand-icon">
<span class="arcade-brand-text">Tetrion</span>
</span>
</div>
<div class="arcade-header-actions">
<div class="layout-btn-group" id="arcade-view-toggle-group">
<button type="button" class="btn btn-icon arcade-view-btn active" id="btn-arcade-view-game" onclick="setArcadeView('game')" title="Tetrion Game View">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="6" x2="10" y1="12" y2="12"/><line x1="8" x2="8" y1="10" y2="14"/><line x1="15" x2="15.01" y1="13" y2="13"/><line x1="18" x2="18.01" y1="11" y2="11"/><rect width="20" height="12" x="2" y="6" rx="6"/></svg>
</button>
<button type="button" class="btn btn-icon arcade-view-btn" id="btn-arcade-view-leaderboard" onclick="setArcadeView('leaderboard')" title="High Scores & Leaderboard (All Users)">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"/><path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"/><path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"/><path d="M18 2H6v7a6 6 0 0 0 12 0V2Z"/></svg>
</button>
<button type="button" class="btn btn-icon arcade-view-btn" id="btn-arcade-view-settings" onclick="setArcadeView('settings')" title="Tetrion Settings & Controls">
<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" x2="4" y1="21" y2="14"/><line x1="4" x2="4" y1="10" y2="3"/><line x1="12" x2="12" y1="21" y2="12"/><line x1="12" x2="12" y1="8" y2="3"/><line x1="20" x2="20" y1="21" y2="16"/><line x1="20" x2="20" y1="12" y2="3"/><line x1="1" x2="7" y1="14" y2="14"/><line x1="9" x2="15" y1="8" y2="8"/><line x1="17" x2="23" y1="16" y2="16"/></svg>
</button>
</div>
</div>
</div>
<!-- 2. Arcade Body Container -->
<div class="arcade-body" id="arcade-body">
<!-- VIEW 1: ARCADE GAME -->
<div class="arcade-view arcade-game-view" id="arcade-view-game">
<div class="arcade-arena">
<!-- Left Column: Hold & Stats (Desktop) -->
<div class="arcade-side-col arcade-left-col">
<div class="arcade-panel-card arcade-hold-card">
<div class="arcade-card-title">HOLD <span class="arcade-key-hint desktop-only">C / Shift</span></div>
<div class="arcade-canvas-wrap">
<canvas id="arcade-hold-canvas" width="90" height="90"></canvas>
</div>
</div>
<div class="arcade-panel-card arcade-stats-card desktop-only-card">
<div class="arcade-mode-banner">
<span class="arcade-mode-badge" id="arcade-arena-mode-badge">MARATHON</span>
</div>
<div class="arcade-stat-row">
<span class="arcade-stat-label">TOP SCORE</span>
<span class="arcade-stat-number arcade-glow-gold" id="arcade-stat-hiscore">0</span>
</div>
<div class="arcade-stat-row">
<span class="arcade-stat-label">MODE</span>
<select id="arcade-mode-select" class="arcade-select" onchange="changeArcadeMode(this.value)">
<option value="marathon">Marathon</option>
<option value="sprint">Sprint (40L)</option>
<option value="ultra">Ultra (3 Min)</option>
</select>
</div>
<div class="arcade-stat-row" id="arcade-timer-row" style="display: none;">
<span class="arcade-stat-label">TIME</span>
<span class="arcade-stat-number" id="arcade-stat-timer">00:00.0</span>
</div>
</div>
<div class="arcade-b2b-badge" id="arcade-b2b-badge" style="display: none;">
⚡ BACK-TO-BACK
</div>
<div class="arcade-combo-badge" id="arcade-combo-badge" style="display: none;">
COMBO ×<span id="arcade-combo-count">0</span>
</div>
</div>
<!-- Center Column: Board Canvas & Overlays -->
<div class="arcade-center-col">
<!-- Mobile Center Mode & Top Score Badge (Mobile Only) -->
<div class="arcade-mobile-center-hud mobile-only-flex">
<span class="arcade-mode-badge" id="arcade-mobile-mode-badge">MARATHON</span>
<div class="arcade-mob-stat-row">
<span class="arcade-mob-stat-lbl">TOP:</span>
<span class="arcade-mob-stat-val arcade-glow-gold" id="arcade-mob-hiscore">0</span>
</div>
</div>
<div class="arcade-canvas-container" id="arcade-canvas-container">
<canvas id="arcade-board-canvas" width="240" height="480" class="arcade-main-canvas"></canvas>
<div class="arcade-scanlines" id="arcade-scanlines"></div>
<!-- Ready / Countdown Overlay -->
<div class="arcade-overlay" id="arcade-ready-overlay">
<div class="arcade-overlay-box">
<div class="arcade-logo">TETRION</div>
<div class="arcade-sub">RETRO FALLING BLOCKS CHEWTOY</div>
<div class="arcade-ready-action">
<button class="btn btn-accent arcade-btn-lg" onclick="startArcadeGame()">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 4px;"><polygon points="6 3 20 12 6 21 6 3"/></svg> START GAME
</button>
</div>
<div class="arcade-key-legend desktop-only">
<div><kbd>←</kbd> <kbd>→</kbd> Move</div>
<div><kbd>↑</kbd> / <kbd>X</kbd> Rotate CW</div>
<div><kbd>Z</kbd> / <kbd>Ctrl</kbd> Rotate CCW</div>
<div><kbd>↓</kbd> Soft Drop</div>
<div><kbd>Space</kbd> Hard Drop</div>
<div><kbd>C</kbd> / <kbd>Shift</kbd> Hold</div>
<div><kbd>P</kbd> / <kbd>Esc</kbd> Pause</div>
</div>
</div>
</div>
<!-- Pause Overlay -->
<div class="arcade-overlay" id="arcade-pause-overlay" style="display: none;">
<div class="arcade-overlay-box">
<div class="arcade-overlay-title">PAUSED</div>
<div style="font-size: 11px; color: var(--text-dim); margin-bottom: 12px;">Press <kbd>P</kbd> or <kbd>Esc</kbd> to resume</div>
<div style="display: flex; gap: 8px;">
<button class="btn btn-accent" onclick="resumeArcadeGame()">
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="6 3 20 12 6 21 6 3"/></svg> Resume
</button>
<button class="btn" onclick="restartArcadeGame()">
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg> Restart
</button>
</div>
</div>
</div>
<!-- Game Over Overlay -->
<div class="arcade-overlay" id="arcade-gameover-overlay" style="display: none;">
<div class="arcade-overlay-box">
<div class="arcade-overlay-title arcade-danger-glow" id="arcade-gameover-title">GAME OVER</div>
<div class="arcade-go-stats">
<div class="arcade-go-stat-item">
<div class="arcade-go-label">FINAL SCORE</div>
<div class="arcade-go-val arcade-accent-glow" id="arcade-go-score">0</div>
</div>
<div class="arcade-go-stat-item">
<div class="arcade-go-label">LEVEL</div>
<div class="arcade-go-val" id="arcade-go-level">1</div>
</div>
<div class="arcade-go-stat-item">
<div class="arcade-go-label">LINES</div>
<div class="arcade-go-val" id="arcade-go-lines">0</div>
</div>
<div class="arcade-go-stat-item">
<div class="arcade-go-label">TIME</div>
<div class="arcade-go-val" id="arcade-go-time">00:00</div>
</div>
</div>
<div class="arcade-rank-banner" id="arcade-rank-banner" style="display: none;">
🏆 <span id="arcade-rank-text">Achieved Rank #1!</span>
</div>
<div style="display: flex; gap: 8px; margin-top: 12px; width: 100%;">
<button class="btn btn-accent" style="flex: 1;" onclick="restartArcadeGame()">
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg> Play Again
</button>
<button class="btn" onclick="setArcadeView('leaderboard')">
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6"/><path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18"/><path d="M4 22h16"/><path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22"/><path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22"/><path d="M18 2H6v7a6 6 0 0 0 12 0V2Z"/></svg> High Scores
</button>
</div>
</div>
</div>
</div>
</div>
<!-- Right Column: Next Pieces & Quick Actions -->
<div class="arcade-side-col arcade-right-col">
<div class="arcade-panel-card arcade-next-card">
<div class="arcade-card-title">NEXT</div>
<div class="arcade-canvas-wrap">
<canvas id="arcade-next-canvas" width="90" height="220"></canvas>
</div>
</div>
<div class="arcade-panel-card arcade-actions-card desktop-only-card">
<button class="btn btn-accent btn-sm" id="btn-arcade-start-pause" onclick="toggleArcadePlayPause()" style="width: 100%;">
<span id="icon-arcade-play-pause"><svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="6 3 20 12 6 21 6 3"/></svg></span> <span id="label-arcade-play-pause">Play</span>
</button>
<button class="btn btn-sm" onclick="restartArcadeGame()" style="width: 100%;">
<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg> Restart
</button>
</div>
</div>
</div>
<!-- Virtual NES-Style Thumb Controller for Mobile & Tablet Touch -->
<div class="arcade-nes-controller" id="arcade-nes-controller">
<!-- Left Zone: Authentic 4-Way Cross D-Pad -->
<div class="arcade-dpad-cross">
<button class="dpad-btn dpad-up" id="tbtn-up" data-action="hardDrop" title="Hard Drop (Slam Piece)">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m17 11-5-5-5 5"/><path d="m17 18-5-5-5 5"/></svg>
</button>
<button class="dpad-btn dpad-left" id="tbtn-left" data-action="left" title="Move Left">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>
</button>
<div class="dpad-center"></div>
<button class="dpad-btn dpad-right" id="tbtn-right" data-action="right" title="Move Right">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m12 5 7 7-7 7"/></svg>
</button>
<button class="dpad-btn dpad-down" id="tbtn-down" data-action="down" title="Soft Drop (Drop Faster)">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14"/><path d="m19 12-7 7-7-7"/></svg>
</button>
</div>
<!-- Center Zone: SELECT (Hold) & START (Pause) -->
<div class="arcade-nes-center-btns">
<button class="nes-pill-btn" id="tbtn-hold" data-action="hold" title="Hold Piece">
<span class="nes-pill-label">HOLD</span>
</button>
<button class="nes-pill-btn" id="tbtn-pause" onclick="toggleArcadePlayPause()" title="Play / Pause">
<span class="nes-pill-label" id="tbtn-pause-label">PAUSE</span>
</button>
</div>
<!-- Right Zone: B and A Action Buttons (Angled NES Layout) -->
<div class="arcade-nes-actions">
<button class="nes-round-btn nes-btn-b" id="tbtn-rot-ccw" data-action="rotateCCW" title="Rotate CCW (B Button)">
<span class="nes-btn-name">B</span>
<span class="nes-btn-sub">↺</span>
</button>
<button class="nes-round-btn nes-btn-a" id="tbtn-rot-cw" data-action="rotateCW" title="Rotate CW (A Button)">
<span class="nes-btn-name">A</span>
<span class="nes-btn-sub">↻</span>
</button>
</div>
</div>
</div>
<!-- VIEW 2: LEADERBOARD & DB TOP SCORES -->
<div class="arcade-view arcade-leaderboard-view" id="arcade-view-leaderboard" style="display: none;">
<div class="arcade-lb-header-bar">
<div class="arcade-lb-mode-pills">
<button class="btn btn-xs arcade-lb-tab active" data-mode="marathon" onclick="loadArcadeLeaderboard('marathon')">Marathon</button>
<button class="btn btn-xs arcade-lb-tab" data-mode="sprint" onclick="loadArcadeLeaderboard('sprint')">Sprint (40L)</button>
<button class="btn btn-xs arcade-lb-tab" data-mode="ultra" onclick="loadArcadeLeaderboard('ultra')">Ultra (3 Min)</button>
</div>
<div class="arcade-lb-scope-toggle">
<label class="arcade-scope-btn"><input type="radio" name="arcade-scope" value="all" checked onchange="handleArcadeScopeChange(this.value)"> 🌐 All Users</label>
<label class="arcade-scope-btn"><input type="radio" name="arcade-scope" value="mine" onchange="handleArcadeScopeChange(this.value)"> 👤 My Best</label>
<button class="btn btn-icon btn-xs" onclick="refreshArcadeLeaderboard()" title="Refresh Scores">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/><path d="M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16"/><path d="M8 16H3v5"/></svg>
</button>
</div>
</div>
<!-- User Stats Summary Banner -->
<div class="arcade-user-summary" id="arcade-user-summary">
<div class="arcade-summary-item">
<span class="arcade-summary-lbl">PERSONAL BEST</span>
<span class="arcade-summary-val arcade-glow-gold" id="arcade-sum-best">0</span>
</div>
<div class="arcade-summary-item">
<span class="arcade-summary-lbl">GLOBAL RANK</span>
<span class="arcade-summary-val" id="arcade-sum-rank">-</span>
</div>
<div class="arcade-summary-item">
<span class="arcade-summary-lbl">MAX LEVEL</span>
<span class="arcade-summary-val" id="arcade-sum-level">1</span>
</div>
<div class="arcade-summary-item">
<span class="arcade-summary-lbl">TOTAL LINES</span>
<span class="arcade-summary-val" id="arcade-sum-lines">0</span>
</div>
<div class="arcade-summary-item">
<span class="arcade-summary-lbl">GAMES PLAYED</span>
<span class="arcade-summary-val" id="arcade-sum-games">0</span>
</div>
</div>
<!-- Leaderboard Table Container -->
<div class="arcade-lb-table-wrap">
<table class="arcade-table">
<thead>
<tr>
<th style="width: 50px;">Rank</th>
<th>Player</th>
<th style="text-align: right;">Score</th>
<th style="text-align: right;">Level</th>
<th style="text-align: right;">Lines</th>
<th style="text-align: right;">Time</th>
<th style="text-align: right;">Date</th>
</tr>
</thead>
<tbody id="arcade-leaderboard-tbody">
<tr><td colspan="7" style="text-align: center; color: var(--text-dim); padding: 24px;">Loading top scores from database...</td></tr>
</tbody>
</table>
</div>
<!-- Leaderboard Bottom Alias Bar -->
<div class="arcade-lb-footer">
<div style="display: flex; align-items: center; gap: 8px;">
<label for="arcade-player-alias" style="font-size: 11px; color: var(--text-dim);">Player Alias:</label>
<input type="text" id="arcade-player-alias" class="arcade-input-sm" placeholder="Your Name" style="width: 140px; height: 26px; font-size: 11px;" onchange="saveArcadePlayerAlias(this.value)">
<button class="btn btn-xs btn-outline" onclick="saveArcadePlayerAlias(document.getElementById('arcade-player-alias').value)">Save</button>
</div>
<div>
<button class="btn btn-xs btn-danger-action" onclick="promptClearArcadeScores()" title="Reset high scores">
<svg xmlns="http://www.w3.org/2000/svg" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="margin-right: 2px;"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/><line x1="10" x2="10" y1="11" y2="17"/><line x1="14" x2="14" y1="11" y2="17"/></svg> Clear Scores
</button>
</div>
</div>
</div>
<!-- VIEW 3: SETTINGS & CUSTOMIZATION -->
<div class="arcade-view arcade-settings-view" id="arcade-view-settings" style="display: none;">
<div class="arcade-settings-scroll">
<div class="arcade-settings-section">
<div class="arcade-section-title">🕹️ Gameplay & Controls</div>
<div class="arcade-setting-row">
<div>
<div class="arcade-setting-title">Starting Level</div>
<div class="arcade-setting-sub">Select starting gravity level (1 = standard, 10 = master speed)</div>
</div>
<select id="arcade-cfg-start-level" class="arcade-select" onchange="updateArcadeConfig('startLevel', parseInt(this.value, 10))">
<option value="1">Level 1 (Relaxed)</option>
<option value="3">Level 3 (Brisk)</option>
<option value="5">Level 5 (Fast)</option>
<option value="8">Level 8 (Intense)</option>
<option value="10">Level 10 (Master)</option>
</select>
</div>
<div class="arcade-setting-row">
<div>
<div class="arcade-setting-title">Rotation System</div>
<div class="arcade-setting-sub">SRS (Super Rotation System with wall kicks) or NES Classic</div>
</div>
<select id="arcade-cfg-rotation" class="arcade-select" onchange="updateArcadeConfig('rotationSystem', this.value)">
<option value="srs">Super Rotation System (SRS)</option>
<option value="nes">Classic NES (Single Rotation)</option>
</select>
</div>
<div class="arcade-setting-row">
<div>
<div class="arcade-setting-title">Ghost Piece Projection</div>
<div class="arcade-setting-sub">Project translucent landing shadow on the board</div>
</div>
<input type="checkbox" id="arcade-cfg-ghost" checked onchange="updateArcadeConfig('ghostPiece', this.checked)">
</div>
<div class="arcade-setting-row">
<div>
<div class="arcade-setting-title">Delayed Auto Shift (DAS)</div>
<div class="arcade-setting-sub">Initial delay before rapid piece shifting (<span id="arcade-das-val">133</span>ms)</div>
</div>
<input type="range" min="60" max="250" step="5" value="133" id="arcade-cfg-das" oninput="document.getElementById('arcade-das-val').textContent=this.value; updateArcadeConfig('das', parseInt(this.value, 10))">
</div>
<div class="arcade-setting-row">
<div>
<div class="arcade-setting-title">Auto Repeat Rate (ARR)</div>
<div class="arcade-setting-sub">Continuous shift speed (<span id="arcade-arr-val">16</span>ms)</div>
</div>
<input type="range" min="0" max="50" step="2" value="16" id="arcade-cfg-arr" oninput="document.getElementById('arcade-arr-val').textContent=this.value; updateArcadeConfig('arr', parseInt(this.value, 10))">
</div>
<div class="arcade-setting-row">
<div>
<div class="arcade-setting-title">Virtual Touch Controller</div>
<div class="arcade-setting-sub">On-screen NES D-pad and A/B buttons for touchscreens & mobile</div>
</div>
<select id="arcade-cfg-touch-ctrl" class="arcade-select" onchange="updateArcadeConfig('touchControls', this.value)">
<option value="auto">Auto (Touch & Mobile Only)</option>
<option value="hide">Always Hide (Keyboard Focus)</option>
<option value="show">Always Show (On-Screen)</option>
</select>
</div>
</div>
<div class="arcade-settings-section">
<div class="arcade-section-title">🎨 Audio & Visual Style</div>
<div class="arcade-setting-row">
<div>
<div class="arcade-setting-title">Retro Theme Palette</div>
<div class="arcade-setting-sub">Color palette for board canvas and tetrominoes</div>
</div>
<select id="arcade-cfg-theme" class="arcade-select" onchange="setArcadeTheme(this.value)">
<option value="amber">Woofsons Amber Charcoal</option>
<option value="gameboy">Game Boy Monochrome Green</option>
<option value="nes">NES 8-Bit Vibrant</option>
<option value="cyberpunk">Arcade Cyberpunk</option>
</select>
</div>
<div class="arcade-setting-row">
<div>
<div class="arcade-setting-title">CRT Scanlines & Glow</div>
<div class="arcade-setting-sub">Subtle retro CRT screen scanline overlay</div>
</div>
<input type="checkbox" id="arcade-cfg-scanlines" checked onchange="updateArcadeConfig('scanlines', this.checked)">
</div>
<div class="arcade-setting-row">
<div>
<div class="arcade-setting-title">8-Bit Sound Effects</div>
<div class="arcade-setting-sub">Synthesized Web Audio sound effects</div>
</div>
<input type="checkbox" id="arcade-cfg-sound" checked onchange="updateArcadeConfig('soundEnabled', this.checked)">
</div>
<div class="arcade-setting-row">
<div>
<div class="arcade-setting-title">Audio Volume (<span id="arcade-vol-val">60</span>%)</div>
<div class="arcade-setting-sub">Master volume level for synthesized audio</div>
</div>
<input type="range" min="0" max="100" step="5" value="60" id="arcade-cfg-volume" oninput="document.getElementById('arcade-vol-val').textContent=this.value; updateArcadeConfig('volume', parseInt(this.value, 10))">
</div>
</div>
</div>
</div>
</div>
<!-- 3. Arcade Bottom Status-Bar -->
<div class="arcade-statusbar" id="arcade-statusbar">
<div class="arcade-sb-left">
<button class="arcade-statusbar-sound-btn" id="btn-arcade-audio" onclick="toggleArcadeAudio()" title="Sound Effects (Click to Mute/Unmute)">
<span id="icon-arcade-audio"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"/><path d="M15.54 8.46a5 5 0 0 1 0 7.07"/><path d="M19.07 4.93a10 10 0 0 1 0 14.14"/></svg></span>
</button>
<span class="arcade-sb-hint desktop-only">P / Esc: Pause</span>
</div>
<div class="arcade-sb-center">
<div class="arcade-sb-pill">
<span class="arcade-sb-label">SCORE</span>
<span class="arcade-sb-val" id="arcade-sb-score-val">0</span>
</div>
<div class="arcade-sb-pill">
<span class="arcade-sb-label">LEVEL</span>
<span class="arcade-sb-val" id="arcade-sb-lvl-val">1</span>
</div>
<div class="arcade-sb-pill">
<span class="arcade-sb-label">LINES</span>
<span class="arcade-sb-val" id="arcade-sb-lines-val">0</span>
</div>
</div>
<div class="arcade-sb-right">
<span class="arcade-sb-engine">60 FPS • SRS</span>
</div>
</div>
</div>
<script src="main.js?v=0.8.5-rc34"></script>
</body>
</html>