.info-panel { flex: 1; background: #0e1628cc; border-radius: 1.5rem; padding: 1.2rem; backdrop-filter: blur(4px); border: 1px solid #283458; }
button { background: #1f2a46; border: none; padding: 0.7rem 1rem; border-radius: 2rem; font-weight: bold; font-family: inherit; color: white; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: all 0.2s; border-bottom: 2px solid #3a4a72; }
<!-- info & controls --> <div class="info-panel"> <div class="score-box"> <div style="font-size: 0.8rem; letter-spacing: 1px;">⭐ SURVIVAL SCORE</div> <div class="score-value" id="scoreDisplay">0</div> <div id="highScoreBadge" style="font-size: 0.7rem; margin-top: 6px;">🏆 best: 0</div> </div> <div class="controls"> <button id="resetGameBtn" class="primary-btn">🔄 NEW GAME</button> <button id="githubStarBtn">🌟 Star on GitHub</button> </div> <div style="margin-top: 1rem; font-size: 0.75rem; background: #00000033; padding: 0.6rem; border-radius: 1rem;"> 📌 <strong>how to play</strong><br> → move your mouse (or finger) horizontally<br> → avoid red enemies, collect yellow orbs<br> → +10 points each orb · survive as long as possible </div> </div> </div> game github.io
.github-badge::before { content: "⌨️"; font-size: 1rem; }
.canvas-panel { flex: 2; min-width: 280px; background: #070c17; border-radius: 1.5rem; padding: 1rem; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4); } .info-panel { flex: 1
.game-container { background: #010101; border-radius: 1rem; display: flex; justify-content: center; overflow: hidden; aspect-ratio: 16 / 9; max-width: 100%; }
.score-box { background: #00000055; border-radius: 1rem; padding: 1rem; text-align: center; margin-bottom: 1.5rem; } border: 1px solid #283458
<script> (function(){ // ------ FEATURE: dynamic game on github.io canvas ------ const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); const scoreSpan = document.getElementById('scoreDisplay'); const highBadge = document.getElementById('highScoreBadge');