*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;background:linear-gradient(135deg,#4facfe 0%,#00f2fe 100%);display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
.game-wrap{background:#fff;border-radius:20px;padding:30px;text-align:center;box-shadow:0 20px 40px rgba(0,0,0,0.1);max-width:500px;width:100%}
h1{color:#333;margin-bottom:20px;font-size:2em;text-shadow:0 2px 4px rgba(0,0,0,0.1)}
.game-area{display:flex;flex-direction:column;gap:20px}
.progress-container{position:relative;background:#e9ecef;border-radius:10px;height:30px;overflow:hidden}
.progress-bar{background:linear-gradient(90deg,#28a745,#20c997);height:100%;width:0%;transition:width 0.5s ease;border-radius:10px}
.objective{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:bold;text-shadow:0 1px 2px rgba(0,0,0,0.5)}
.grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;background:#f8f9fa;padding:20px;border-radius:10px;border:2px solid #e9ecef;width:fit-content;margin:0 auto}
.cell{width:50px;height:50px;border-radius:10px;border:2px solid #dee2e6;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.3s ease;position:relative;overflow:hidden}
.cell:hover{background:#f1f3f4}
.cell.selected{box-shadow:0 0 0 3px #007bff}
.orb{background:#fff;border-radius:50%;width:40px;height:40px;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:bold;color:#fff;border:2px solid #fff;box-shadow:0 2px 4px rgba(0,0,0,0.2);transition:all 0.3s ease}
.orb.level1{background:#ff6b6b}
.orb.level2{background:#4ecdc4}
.orb.level3{background:#45b7d1}
.orb.level4{background:#f9ca24}
.orb.level5{background:#f0932b}
.orb.level6{background:#eb4d4b}
.orb.level7{background:#6c5ce7}
.orb.merging{animation:mergePulse 0.6s ease}
@keyframes mergePulse{0%{transform:scale(1)}50%{transform:scale(1.2)}100%{transform:scale(1)}}
.particle{position:absolute;width:4px;height:4px;background:#ffd700;border-radius:50%;animation:particleBurst 1s ease-out forwards}
@keyframes particleBurst{0%{opacity:1;transform:scale(0)}50%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(2)}}
.orb-selection{display:flex;gap:10px;justify-content:center;margin-top:10px}
.selection-orb{width:40px;height:40px;border-radius:50%;border:2px solid #dee2e6;cursor:pointer;transition:all 0.3s ease}
.selection-orb:hover{transform:scale(1.1)}
.info{display:flex;justify-content:space-around;margin-top:20px;font-size:18px;color:#333}
.controls{display:flex;gap:10px;justify-content:center;margin-top:10px}
button{padding:10px 20px;border:none;border-radius:8px;background:#007bff;color:#fff;font-size:16px;cursor:pointer;transition:all 0.3s ease}
button:hover{background:#0056b3;transform:translateY(-2px)}
footer{font-size:14px;color:#666;margin-top:20px}
@media (max-width: 600px) {
  .game-wrap{padding:20px;max-width:100%}
  .grid{grid-template-columns:repeat(5,1fr);gap:5px;padding:15px}
  .cell{width:40px;height:40px}
  .orb{width:32px;height:32px;font-size:14px}
  .selection-orb{width:32px;height:32px}
}